• JavaScript中函数和类(以及this的使用<重点>,以及js和jquery讲解,原生js实现jquery)


    1.javascript中以函数来表示类:

    一般函数是小写开头:function foo()

    类开头是大写:function Foo()

    实例化类:  obj = new Foo()

    其他属性就同类是一致的

    Name = "root"
    Age = 18
    
    function Foo(name,age){
        this.Name = name;
        this.Age = age;
        this.Func = function(){
            console.log(this.Name,this.Age);  #this是当前对象 输出 aaaa 16
            (function(){
                console.log(this.Name,this.Age);  #内联函数中:this是window,输出root 18
            })();
        }
    }
    
    obj1 = Foo('aaaa',16)
    obj1.Func()

    与类的思想来考虑就出来结果了,干扰项都不是问题

    再比如:

    function Func(){
      this.age = 19;
        this.func=function(){
        console.log(this)  #obj
            function inner(){
                  console.log(this) #window
               }
            inner()
        }
    }

    2.补充:this关键字

    函数中:
    function func(){
        console.log(this);
    }
    this永远对于window全局变量
    Window {stop: ƒ, open: ƒ, alert: ƒ, confirm: ƒ, prompt: ƒ, …}
    其中包含:
    1. age:16
    2. Foo:ƒ Foo(name,age)
    3. Func:ƒ ()
    4. Name:"aaaa"
    5. alert:ƒ alert()
    6. ......其他一堆全局函数,变量等数据
    类中:
    function Func(){
       this.age = 19; this.func=function(){
        console.log(this)
      } } obj2 = new Func()
    obj2.func()
    打印出来:
    1. Func {age: 19, func: ƒ}
      1. age:19
      2. func:ƒ ()
      3. __proto__:Object

    this代表当前对象

    3.js中无字典,只有对象

    obj3 = {
        Name:'root',
        Age:18,
        func:function(){
            console.log(this.Name)
        }
    } 
    obj3相当于new了一个对象
    obj3.func()
    obj3.Name
    obj3.Age

    补充:注意点:

    Name = "ads"
    Age = 11
    obj6 = { Name : "ret", Age : 16, func:function(){ console.log(this.Name); #ret是在对象中,所以是当前对象 function inner(){ console.log(this.Name)  #ads,是在内联函数中,所以是window } inner() } }

    若是想在内联函数中获取当前对象:(可以将this对象传入)

    obj6 = {
        Name : "ret",
        Age : 16,
        func:function(){
            console.log(this.Name);  #ret是在对象中,所以是当前对象
            var that=this;
            function inner(){
                console.log(that.Name)  #ret,是使用了当前对象(that在内联函数作用域中没有找到,就去上一级寻找,发现that是this当前对象)
            }
            inner()
        }
    }

     补充事件触发使用的this:

                    <div class="col-xs-5">
                        <img id="check_code_img" onclick="ChangeImg(this);" src="/check_code.html"> #此处传入了该节点对象
                    </div>

    js:

            function ChangeImg(ths){  #函数处理,接收ths代替该节点,所以其中并没有在函数中声明this,所以在打印$(this)时是window对象
                ths.src = ths.src.split('.html')[0]+'.html?'+Math.random();
                console.log(ths)  //该节点  
           console.log($(ths) //也是该节点对象 console.log($(
    this)) //window 若是将传参也设置为this,那么这里的this,就是节点对象,$(this)就是jquery对象 }

    测试:(重点结论)

                $("#username").click(function(){  //默认会传递this节点对象进去进行调用
                    console.log($(this))
                    $(this).val(6666)   //$(this)是jquery对象,可以调用jquery函数
                    this.value=7777    //this是该节点对象,只可以调用document节点的函数
                })

     补充:在jquery中$(this)使用,也会代表一类元素结点,而非某一个:

                        <ul class="pagination">
                            <li><a>上一页</a></li>
                            
                            <li class="active"><a>1</a></li>
                            
                            <li><a>2</a></li>
                            
                            <li><a>下一页</a></li>
                        </ul>
            目的获取其中点击的页码值
         $(".pagination li a").click(function(){ console.log($(this))      //是jquery对象 console.log($(this)[0].text) //text是js对象的函数,这里我们使用了jquery对象,需要进行转换为js对象则需要使用[0]
           console.log($(this).text())  //使用jquery函数实现

           console.log(this.text)    //直接使用js对象当前操作对象,来获取数据是最好的
         })

    详细参考:https://www.imooc.com/wenda/detail/331557?t=201208

    总结重点:

    事件触发,传递到函数中的this是当前操作对象,this.

    我们使用$(this)是将当前操作节点对象进行封装,成为jquery对象,更加简便使用函数操作。但是若是想像上面那样操作js函数,任然需要转换为js对象

    $(this)[0],这种“jQuery对象”加下标的方式可以将“jQuery对象”转换为“js对象”,这样我们就可以使用“js对象”的属性和方法了;
    $(this),使用$()包装“js对象”,是一种将“js对象”转换为“jQuery对象”的方式,这样我们就可以使用“jQuery对象”的方法了。

    原生js实现jqueryhttps://www.zhihu.com/question/36733934

    前端:

    <input type="button" class="Btn_test" onclick="bind(this);" value="123">
    <input type="button" class="Btn_test" onclick="bind(this);" value="456">
    <input type="button" class="Btn_test" onclick="bind(this);" value="789">

    自定义$和jQuery(两个都可以用)

    var $ = function jQuery(domObj){
    {#console.log(domObj)#}
    var objToReturn = {0:domObj,length:domObj.length};  //其中我们可以封装jquery的函数,进行使用
    objToReturn.click = function(func){
    for(var i=0;i<objToReturn.length;i++){
    {#console.log(objToReturn[0])#}  //objToReturn[0]是传递过来的原数据,我们需要对他进行处理
    objToReturn[0][i].addEventListener("click",func); //用addEventLister会重复绑定事件,所以使用onclick只会触发绑定的最新
    {#objToReturn[i].onclick=func#} //但是在jquery使用的就是addEventLister,所以可以重复绑定多个事件
    }
    }
    return objToReturn
    }

    调用:

        function bind(ths){
            $(ths).click(function(){   //自定义$使用成功
                alert(ths.value);
            })
        }

     或者(下面更加像):

        var domButton = document.getElementsByClassName("Btn_test");
    
        $(domButton).click(function() {
            alert(this.value);
        })

     事件绑定可以看:http://www.cnblogs.com/ssyfj/p/8492101.html

  • 相关阅读:
    你可见过一种基于状压的二进制筛法?
    dp
    tricks
    csp2020 游记
    洛谷P2982 [USACO10FEB]慢下来Slowing down
    NOIP 2018 大翻车记
    2019 ICPC 南京网络赛
    POJ2778 AC自动机 + 快速矩阵幂
    2019 CCPC网络赛
    2018ICPC 北京
  • 原文地址:https://www.cnblogs.com/ssyfj/p/8698249.html
Copyright © 2020-2023  润新知