this解惑

前言

要正确理解this，首先得理解执行上下文，这里推荐汤姆大叔的执行上下文，因为this是在运行代码时确认具体指向谁，箭头函数除外。

全局作用域中的this

node: 每个javaScript文件都是一个模块，this指向空对象（module.exports）

this.a = 1;
console.log(this, module.exports);
// { a: 1 } { a: 1 }

当然也有些意外，比如下面这种情况:

this.a = 1;
module.exports = {}
console.log(this, module.exports);
// { a: 1 } {}

浏览器端: this指向window。

函数作用域中的this

这里分为两种，一种是全局作用域下直接执行函数，另外一种是被当作某个对象的属性的时候执行。eval的情况这里不作讨论。

全局环境下执行

function foo() {
  console.log(this); // 此时的执行上下文为全局对象
}
foo();
// node global, 浏览器 window

当然严格模式下有不同，具体区别如下：

严格模式

this指向undefined(node and 浏览器端)

非严格模式

浏览器端: this指向全局变量window

node: this指向global

被当作属性调用

当函数作为一个对象的属性时，node和浏览器端一致，指向调用该属性的对象

var obj = {
  name: 'foo',
  foo: function foo() {
    console.log(this);
  }
}obj.foo();
// { name: 'foo', foo: [Function: foo] }

接下来，做一些升级。

var obj = {
  name: 'foo',
  foo: function foo() {
    console.log(this);
  }
}var objA = obj.foo;objA();
// node环境指向global，浏览器端指向window，严格模式下均指向undefined
--------------------------------------------------------------
var obj = {
  name: 'foo',
  foo: function foo() {
    console.log(this);
  }
}var objA = {
  name: 'objA',
  foo: obj.foo
};objA.foo();
// { name: 'objA', foo: [Function: foo] }

call、apply、bind

如果想手动更改函数里的this指向，可通过上述3个方法。call和apply会立即执行，bind则返回一个绑定好this指向的函数。

var obj = {
  name: 'foo',
  foo: function foo() {
    console.log(this);
  }
}var objA = {
  name: 'objA',
  foo: obj.foo
};obj.foo.call(objA); // 将this指向objA
obj.foo.apply(objA);
obj.foo.bind(objA)(); // bind函数会返回一个绑定好this的函数，可供以后调用
/**
{ name: 'objA', foo: [Function: foo] }
{ name: 'objA', foo: [Function: foo] }
{ name: 'objA', foo: [Function: foo] }
*/

这里对上述3个方法进行更细的说明，方便更好的理解之间的差异。

var obj = {
  name: 'foo',
  foo: function foo() {
    console.log(this, arguments); // 通过arguments对象访问函数传入的参数列表，类似数组但不是数组，可通过arguments[0]访问到传入的Tom
  }
}var objA = {
  name: 'objA',
  foo: obj.foo
};obj.foo.call(objA, 'Tom', 'Jerry');
obj.foo.apply(objA, ['Tom', 'Jerry']);
obj.foo.bind(objA, 'Tom', 'Jerry')(1);
/**
{ name: 'objA', foo: [Function: foo] } [Arguments] { '0': 'Tom', '1': 'Jerry' }
{ name: 'objA', foo: [Function: foo] } [Arguments] { '0': 'Tom', '1': 'Jerry' }
{ name: 'objA', foo: [Function: foo] } [Arguments] { '0': 'Tom', '1': 'Jerry', '2': 1 }可以看到call和bind是按序列传参，而apply是按数组传参，bind不会更改传参的顺序
*/

new构造

当函数被当作构造函数调用时，this指向构造的那个对象。

注：new调用中的this不会被call、apply、bind改变。

接下来，简单验证一下，由于call和apply会立即执行，无法被当作构造函数，只能选择bind。

function Foo() {
  console.log(this);
}
var foo = Foo.bind({ name: 'Tom' });
foo();
// { name: 'Tom' }
new foo();
// Foo {}

箭头函数中的this

this在定义时，就已经知道其具体指向，因为在运行到声明的箭头函数时，会将this进行强绑定到外部作用域中的this，且无法更改。可以理解为继承了外部作用域中的this。由于箭头函数的this是确定的，无法更改，因此也无法被当作构造函数调用。

外部作用域为全局作用域：

var foo = () => {
  console.log(this);
}
this.a = 1;
foo();
// 或者下面代码
var obj = {
  name: 'obj',
  foo: () => {
    console.log(this);
  }
}
var foo = obj.foo;
obj.foo();
foo();
foo.call({ name: 'Tom' });
/**
因为obj是在全局作用域下被定义，所以外部作用域为全局对象
node: 指向module.exports
浏览器：指向window
*/

外部作用域为函数作用域：

function foo() {
  var a = () => {
    console.log(this); // 继承外部作用域foo函数的this
  };
  a();
}
foo();
foo.call({ name: 'foo' });
new foo();
/**
这里foo函数中的this并不确定，由于调用方式不同，其this指向也不同
*/

相信写ES6类的情况很多，本人经常写React类组件，刚开始初学者会好奇为什么在类组件里写方法时要用bind或者箭头函数来强绑定this。因为一般类组件里的方法，都会设计到this的处理。比如事件处理函数，当触发相应事件时，调用事件对应的处理函数，此时访问到的this为undefined(ES6默认类与模块内就是严格模式)，这就导致不能正确处理该组件的状态，甚至出错(处理函数内可能调用this.setState方法)。所以在类组件内部声明方法时会需要我们进行强绑定。

接下来我们看看React组件渲染流程：new构造一个组件实例instance，然后调用其render方法进行渲染和事件绑定。new构造的过程，this已经确定指向构造的组件实例，所以你可以在constructor进行bind或直接使用箭头函数，这样函数内部this就绑定到了instance。render函数里之所以能正常访问this，是因为以instance.render()进行渲染。

当然这里不特指React类组件，只要是ES6类，只能用new构造调用，否则会报错，所以ES6类里this指向是确定的，可以放心使用箭头函数。

迷惑的代码

还有一个比较迷惑的地方，遇到的机会很少，代码如下：

(function(){
    console.log(this); // 运行结果和全局作用域下执行结果一致
})();
// 由于没有以对象属性的方式调用，则被认为是全局环境下调用
--------------------------------------------------------
(function(){
  console.log(this);
}).call({ name: 'Hello World' });
// { name: 'Hello World' }，this指向可以被改变
--------------------------------------------------------
new (function(name){
  this.name = name;
  console.log(this);
})('Tom');
// { name: 'Tom' }，this指向新创建的对象

更好的阅读体验在我的github，欢迎

前言