this的详细分析加案例

对javaScript语言精粹的加一下视频资料学习对this的总结

js中的this也被称为函数上下文
           js函数中this的四种使用方法
           1.方法调用模式
           2.函数调用模式
           3.改造器调用模式
           4，apply,call,bind调用模式

           1.方法调用模式,函数有所属对象，也就是这个函数是myObject.打点声明的的时候this是这个对象的本身,不可以说永远this都是myObject.
           当一个函数被保存在为对象的一个属性的时，我们称它为一个方法，当一个方法被调用时，this被绑定到该对象;

    var myObject = {
            value :0,//记得这里是逗号不是分号
            increment :function(inc){
                console.log(this.value);//this为myObject
                }
            }
            myObject.increment();//0

           2.函数调用模式
           当函数并非一个对象的属性时，那么它被当做一个函数来调用,this被绑定到全局对象(因为这个时候foo这个函数的上下文是window绑定的,this就指向window);

 var myObject = {value: 100}//创建myObject对象
            myObject.getVlue = function(){
                console.log(this.value);//100这里的this值为myObject对象
                var foo = function(){
                    console.log(this);//window; 调用foo()他的对象winfdow，所以函数的上下文(this)为window
                    console.log(this.value);//undefined，window没有设置value的值
                }
                foo(); //函数上下文是window，所以这里的this是window，文是window
            }
            console.log(myObject.getVlue());//没有设置返回值return

           这里的foo函数就相当于，方法中的函数:这个函数与方法中的this是不同的(作用链的关系),这里的foo函数可以是一些其他的函数
           注意:这里有个很麻烦的东西就是myObject.getVlue()函数中的this与foo()函数中的this不同为了为了让他们相同怎么办呢？
           来来：就是赋值呵呵myObject.getVlue()函数中的this赋值给一个变量(that)就可以了

 var myObject = {value: 100}//创建myObject对象
            myObject.getVlue = function(){
                console.log(this.value);//100这里的this值为myObject对象
                that = this;//关键吧myObject对象转给了that这个变量(因为foo函数的上下文为window，想在foo函数中用myobject对象就把myobject对象赋值出来)
                var foo = function(){
                    console.log(this);//window; 调用foo()他的对象winfdow，所以函数的上下文(this)为window
                    console.log(that)//为myObject
                    console.log(this.value);//undefined，window没有设置value的值
                    console.log(that.value);//100
                }
                foo();//函数上下文是window，所以这里的this是window，文是window
            }
            console.log(myObject.getVlue());//没有设置返回值return

           3.构造器中的this：值向新的函数
           js中,我们通过new关键词来调用构造函数，此时this会绑定在该对象上

var someClass = function(){
                this.value = 100;
            }
            someClass();
            console.log(window.value);//100说明了这个时候的this还是指向全局对象
            
            var myCreate = new someClass();//构造对象；
            console.log(myCreate.value);//这里this值向了myCreate

           4.apply和call调用以及bind绑定：指向绑定对象;

 var name = '小王'
            var age =17;
            var obj={
                name:'zqx',
                age:20,
                
                myFun:function(num1,num2){
                    console.log(this.name+"年龄"+this.age+"来自"+num1+"去往"+num2)
                }
            }
            //obj.myFun();
            //console.log(obj.age);//20
            
            var db ={
                naem:'德玛',
                age:99
            }
            obj.myFun.call(db,'成都','上海')；　　　　 // 德玛 年龄 99  来自 成都去往上海
            obj.myFun.apply(db,['成都','上海']);      // 德玛 年龄 99  来自 成都去往上海  
            obj.myFun.bind(db,'成都','上海')();       // 德玛 年龄 99  来自 成都去往上海
            obj.myFun.bind(db,['成都','上海'])();　　 // 德玛 年龄 99  来自 成都, 上海去往 undefined

           //bind方法返回一个新的函数,你必须调用它才可以执行.
           微妙的差距！
           从上面四个结果不难看出:
           call 、bind 、 apply 这三个函数的第一个参数都是 this 的指向对象，第二个参数差别就来了：
           call 的参数是直接放进去的，第二第三第 n 个参数全都用逗号分隔，直接放到后面 obj.myFun.call(db,'成都', ... ,'string' )。
           apply 的所有参数都必须放在一个数组里面传进去 obj.myFun.apply(db,['成都', ..., 'string' ])。
           bind 除了返回是函数以外，它的参数和 call 一样。//所以当obj.myFun.bind(db,['成都','上海'])();的时候，第一个参数成为了一个数组传递进去,无第二个参数所以为undefined
           当然，三者的参数不限定是 string 类型，允许是各种类型，包括函数、 object 等等！

this的详细分析加案例

猜你喜欢