一张图告诉你 this 的指向

废话不多说,直接上图:
一张图告诉你 this 的指向_第1张图片
图意为方法的执行处代码决定this是谁,其执行代码为 object.f(), 则 f 中的this === object

可能还是不清楚,举个栗子说明:

全局方法中的this

function f(){
   return this; 
}
f() === window; //true

说明:以上例子执行时,执行f() 相当于window.f() === window,也可以理解为window.f 中的this就是window

对象方法中的this

var obj={
     f:function(){
         return this
     }
}

obj.f() === obj; //true
var f = obj.f;
f() === obj;  //false
f() === window; //true

上述例子执行时为 obj.f(),和我们上面的图片完全吻合,故为obj
而下面执行时为 window.f() ,有力证明了执行环境决定this指向。
进阶例子:

var name='global';
function f(){
    console.log(this.global);
}

var obj={
     name:'obj的name',
     methods:function(){
          f();
          console.log(this.name);
     }
}

obj.methods(); //输出: global obj的name

本例中执行代码为 f(),虽然是在obj.methos内部执行的,但是其实际执行代码依然是标准的object.f(),所以其中的this为window。

局部/匿名方法中的this

var name='global';

var obj={
     name:'obj的name',
     methods:function(){
         var partialFun=function(){
             console.log(this.name)
         }
         partialFun();
         return function(){
             console.log(this.name)
         } 
     }
}
obj.methods()(); //输出:global global

匿名和局部函数是特别的函数,他不能通过window.partialFun()来调用,但是默认其函数内部中的this为window对象。

以上所有的例子如果你能理解了,基本已经可以处理大部分this的应用了,但是有时候我想规定这个this必须是谁,这种情况下怎么办呢?

自定义this的指向

bind、apply、call均可改变this的指向

var name = 'global';
var obj = {
    name: 'obj',
    f:function(){
        return this.name
    }
} 
obj.f.bind(window)(); //global

f 中的this本来指向obj, 输出 obj,但是由于bind改变其指向为window,所以输出了 global

例:

var name='global'
var obj={
     name:'obj的name',
     f1:function(){
         console.log(this.name)
     },
     f2:function(){
         console.log(this.name)
     }.bind(this) //这里的this是window
}
console.log(this); // window
obj.f1();  //输出: obj的name
obj.f2();  //输出: global  

还有这样的

obj.f1.apply(this,[]);  //global
obj.f1.call(this,'');   //global

apply,call是在调用时改变当前方法中this的指向
bind是在声明时强制改变方法中this的指向,具有传递性,即其他变量引用此被bind过的方法时,也无法逃避之前绑定的值。

总结:
一张图告诉你 this 的指向_第2张图片

你可能感兴趣的:(javascript)