爆肝3小时，为你讲透This指向！

引子

在JavaScript中​

​this​

​​的指向总是让人很困惑，它到底指的啥？为了彻底弄清它,我们就来探讨一下吧。​

​this​

​​在不同的执行环境，不同的用法下会有所不同，以下分几种情况，讨论​

​this​

​的指向。

this指向分类讨论

this在全局作用域中

// global scope

foo = 'abc';
alert(foo); // abc

this.foo = 'def';
alert(foo); // def      

在全局作用域/全局环境(global scope| global context)中，​

​this​

​指向的就是全局变量

• 在浏览器里,指向​

  ​window​

  ​对象
• 在Node.js里，指向​

  ​global​

  ​对象

this在函数(function)里

var boat = {
    size: 'normal',
    boatInfo: function() {
        alert(this === boat);
        alert(this.size);
    }
};

boat.boatInfo(); // true, 'normal'

var bigBoat = {
    size: 'big'
};

bigBoat.boatInfo = boat.boatInfo;
bigBoat.boatInfo(); // false, 'big'      

上面这段代码里，​

​this​

​​指向谁？可以看到，​

​boat​

​​对象有一个​

​size​

​​属性，和一个​

​boatInfo()​

​​方法。在​

​boatInfo()​

​​方法里，alert出​

​this​

​​是否和​

​boat​

​​相等，以及​

​this​

​所指向的size属性。

当我们去用​

​boat.boatInfo()​

​​时，可以看到，​

​this​

​​和​

​boat​

​​是相等的,​

​this.size​

​​的值就是​

​boat.size​

​的值nomal

当我们创建一个新的对象，​

​bigBoat​

​​,它的​

​size​

​​属性为big，但是​

​bigBoat​

​​这个对象没有​

​boatInfo()​

​​方法，于是我们把​

​boat.boatInfo()​

​​的方法赋给了它。然后我们调用​

​bigBoat.boatInfo()​

​​,发现​

​this​

​​不等于​

​boat​

​​,​

​this.size​

​的值为big

​

​this​

​的指向改变了！

The first thing you must realise is that the value of this inside any function is never static, it is always determined every time you call a function, but before the function actually executes it’s code. The value of this inside a function is actually provided by the parent scope in which the function was called, and more importantly, how the actual function syntax was written.

要理解以上的变化，首先要明白，在任何函数中，​

​this​

​的指向都不是静态的(static)。它总是在你调用一个函数，但尚未执行函数内部代码前被指定。(查看参考链接中的执行环境的文章，这个阶段，实际就是初始化变量对象，在初始化变量对象的时候，确定了this的指向)实际上，this是 被调用的函数的父作用域 提供的，更重要的是，我们要看看函数调用时是怎么写的。

当一个函数被调用时，应该立马看​

​()​

​左边的部分。

• 如果​

  ​()​

  ​​左边是一个引用(reference),那么，函数的​

  ​this​

  ​指向的就是这个引用所属的对象
• 否则​

  ​this​

  ​指向的就是全局对象(window|global)

function bar() {
    alert(this);
}
bar(); // global - because the method bar() belongs to the global object when invoked
// 这里，this指向的是全局对象。我们先看()的左边，是bar,
// 那么bar属于谁呢？bar属于全局对象，所以this指向的就是全局对象。

var foo = {
    baz: function() {
        alert(this);
    }
}
foo.baz(); // foo - because the method baz() belongs to the object foo when invoked
// 这里,this指向的是foo,先看()左边是baz，baz属于foo，所以baz里的this指向的就是foo      

如果代码都那么简单，那么​

​this​

​的指向也就简单明了了。来点复杂点的看看:

var foo = {
    baz: function() {
        alert(this);
    }
}
foo.baz(); // foo - because baz belongs to the foo object when invoked

var anotherBaz = foo.baz;
anotherBaz(); // global - because the method anotherBaz() belongs to the global object when invoked, NOT foo
// this指向全局对象，()左边是anotherBaz,属于全局对象      

可以看到​

​baz()​

​​中​

​this​

​​的指向老是变来变去的。再来看看嵌套在对象里的​

​this​

​的指向

var anum = 0;

var foo = {
    anum: 10,
    baz: {
        anum: 20,
        bar: function() {
            console.log(this.anum);
        }
    }
}
foo.baz.bar(); // 20 - because left side of () is bar, which belongs to baz object when invoked
// ()左边是bar，bar属于foo.baz，所以this就是foo.baz,this.anum = foo.baz.anum = 20

var hello = foo.baz.bar;
hello(); // 0 - because left side of () is hello, which belongs to global object when invoked
// ()左边是hello，hello属于全局对象，所以this指向全局对象，this.anum = window.anum = 0      

再来看个例子：

const obj = {
  name: 'spike',
  friends: ['deer', 'cat'],
  loop: function() {
    this.friends.forEach( // 这个this指向obj
      function( friend ) {
        console.log(`${this.name} knows ${friend}`);
        console.log(this === global); // 在node.js环境下，全局对象为global
      }
    )
  }
}

obj.loop();
// ()左边是loop,属于obj,所以loop函数中的this指向obj      

输出

$ node test
undefined knows dear
true
undefined knows cat
true      

可以看到，在forEach中的this并不是期待的那样指向obj，而是指向全局对象了

可以用上面提到的，还是看​

​()​

​​左边，在forEach中，​

​()​

​左边是function，而不是一个引用, 所以this指向的就是全局对象

这里其实我也有点迷惑，当不明白Scope的结构时候，可以通过在浏览器中运行代码，去调试面板查看函数执行时的作用域变化。

在构造函数里的this指向

当使用​

​new​

​​关键字去执行构造函数时，构造函数中的​

​this​

​指向的的就是新建的那个对象实例。

var savedThis;
    function Constr() {
        // 保存构造函数中的this
        savedThis = this;
    }
    // 通过new关键字执行构造函数
    var inst = new Constr();
    
    // 构造函数中的this指向的就是新创建的对象实例inst
    console.log(savedThis === inst); // true      

如果你没有用​

​new​

​关键字去执行构造函数，那么就要分析函数被调用时所属的作用域了

function Point(x, y) {
        this.x = x;
        this.y = y;
    }
    var p = Point(7, 5); // 没有用new关键字去执行构造函数！
    
    console.log(p === undefined); // 没有用new，所以构造函数没有返回一个实例对象， 所以p === undefined
    
    // 没有用new关键字，Point(7,5);就只是把函数执行了一遍
    // ()左边是Point，属于全局对象，所以this指向全局对象
    console.log(x); // 7
    console.log(y); // 5      

在事件处理器(event handler)中this的指向

<div id="test">I am an element with id #test</div>

function doAlert() { 
    alert(this.innerHTML); 
} 

doAlert(); // undefined 
// doAlert()属于全局对象

var myElem = document.getElementById('test'); 
myElem.onclick = doAlert; 

alert(myElem.onclick === doAlert); // true 
myElem.onclick(); // I am an element
// ()左边是onclick也就是doAlert,属于myElem,所以this指向myElem      

总结