JavaScript 中 this 的四条绑定规则

前言

ES5 及之前时代的 JavaScript 中 this 的绑定机制是让很多开发者头疼不已的事情。this 的绑定变化多端，让笔者也吃了不少亏。本文根据《你不知道的 JavaScript》上卷中的内容总结了 this 的四条绑定规则，在此记录，以防遗忘。

绑定规则

1. 默认绑定

独立函数调用时，this 指向全局对象，如果使用严格模式，那么全局对象无法使用默认绑定， this绑定至 undefined。

function foo() {
  console.log(this.a);
}

var a = 2;
foo();  // 2

严格模式时：

function foo() {
  "use strict";
  console,log(this.a);
}

var a = 2;
foo();  // TypeError: this is undefined

2. 隐式绑定

当函数引用有上下文对象时（即函数作为引用属性被添加到对象中），隐式绑定规则会把函数调用中的 this 绑定到这个上下文对象。

function foo() {
  console.log( this.a);
}

var obj = {
  a: 2,
  foo: foo
};

obj.foo();  // 2

对象属性引用链中只有最顶层或者说最后一层会影响调用位置：

obj1.obj2.foo();  // foo 中的 this 与 obj2 绑定

2.1 隐式丢失

隐式丢失指的是函数中的 this 丢失绑定对象，即它会应用第 1 条的默认绑定规则，从而将 this 绑定到全局对象或者 undefined 上，取决于是否在严格模式下运行。以下情况会发生隐式丢失：

• 绑定至上下文对象的函数被赋值给一个新的函数，然后调用这个新的函数时：

function foo() {
  console.log( this.a);
}

var obj = {
  a: 2,
  foo: foo
};

var bar = obj.foo; //函数别名
var a = "这是全局变量喔";
bar();  // "这是全局变量喔"

• 传入回调函数时：

function foo() {
  console.log( this.a);
}

function doFoo(fn) {
  fn();  // <-- 调用位置
}

var obj = {
  a: 2,
  foo: foo
};

var a = "这是全局变量喔";
doFoo( obj.foo );  // "这是全局变量喔"

其实这就是第一种情况的变种，实际上参数传递就是一种隐式赋值。除了开发人员自定义的函数，在将函数传入语言内置的函数比如 setTimeout 时，同样会发生隐式丢失的情况。

3. 显式绑定

显式绑定的核心是 JavaScript 内置的 call(..) 和 apply(..) 方法，这两个方法在 JavaScript 提供的绝大多数函数以及开发者自己创建的所有函数上都可以使用。

call(..) 和 apply(..)的第一个参数是一个对象（二者区别在后面传入的参数形式，这里不是重点，不讨论），他们会将 this 绑定到这个对象上。因为你可以直接指定 this 绑定的对象，所以这条规则被称为显式绑定。

function foo() {
  console.log( this.a);
}

var obj = {
  a: 2
};

foo.call(obj);  // 2

如果 call 或者 apply 传入的第一个参数是原始值（字符串类型、布尔类型或者数字类型），那么该原始值会被转换成它的对象形式（new String()、new Boolean() 或 new Number()），俗称“装箱”。

显式绑定仍然无法解决丢失绑定问题。

3.1 硬绑定

作为显式绑定的一个变种，硬绑定可以解决丢失绑定问题。

function foo() {
  console.log( this.a);
}

var obj = {
  a: 2
};

var bar = function() {
  foo.call(obj);
};

bar();  // 2
setTimeout(bar, 100);  // 2

bar.call(window);  //无效，硬绑定的 bar 不会再修改它的 this

在一个新的函数内部强制绑定 this 到某个对象上，无论之后如何调用这个新的函数，其 this 都不会丢失。

典型应用场景为创建一个包裹函数，传入所有的参数并返回接收到的所有值：

function foo(something) {
  console.log(this.a, something);
  return this.a + something;
}

var obj = {
  a:2
};

var bar = function() {
  return foo.call(obj, arguments);
};

var b = bar(3);  // 2 3
console.log(b);  // 5

或者将绑定的对象改为可配置，这样就成了一个辅助绑定函数：

...
function bind(fn, obj){
  return function(){
    return fn.apply(obj, arguments);
  };
}
...

由于硬绑定实在太过常见，所以 ES5 提供了内置的 Function.prototype.bind，其用法如下：

function foo(something) {
  console.log(this.a, something);
  return this.a + something;
}

var obj = {
  a: 2
};

var bar = foo.bind(obj);

var b = bar(3);  // 2 3
console.log(b);  // 5

3.2 API 调用的“上下文”

JavaScript 自身以及许多第三方库的函数都提供了一个可选的参数，通常被称为“上下文”，其作用和 bind(..) 一样，确保回调函数使用指定的 this。

function foo(el) {
  console.log( el, this.id);
}

var obj = {
  id: "awsome"
};

//调用 foo(..) 时把 this 绑定到 obj
[1,2,3].forEach(foo, obj);
// 1 awsome 2 awsome 3 awsome

实际上这些函数背后还是调用了 call() 或者 apply() ，只不过这样开发者需要写的代码就少了一些。

4. new 绑定

使用 new 来调用函数时，会自动执行下面的操作：

1. 创建一个全新的对象
2. 这个新对象会被执行 [[原型]] 连接
3. 这个新对象会绑定到函数调用的 this
4. 如果函数没有返回其他对象，那么 new 表达式中的函数调用会自动返回这个新对象

举例如下：

function foo() {
  this.a = a;
}

var bar = new foo(2);
console.log(bar.a);  // 2

使用 new 来调用 foo(..) 时，会构造一个新对象并把它绑定到 foo(..) 调用中的 this 上。

优先级

具体推断细节不再表述，有兴趣的同学可以自行查看《你不知道的 JavaScript》上卷第 2 章。以上四种绑定规则的使用先后推断如下：

1. 函数是否在 new 中调用（new 绑定）？如果是的话 this 绑定的是新创建的对象。 var bar = new foo();
2. 函数是否通过 call、apply （显示绑定）或者硬绑定？如果是的话，this 绑定的是指定的对象。 var bar = foo.call(obj2);
3. 函数是否在某个上下文对象中调用（隐式绑定）？如果是的话，this 绑定的是那个上下文对象。 var bar = obj1.foo();
4. 如果都不是的话，使用默认绑定。如果在严格模式下，就绑定到 undefined，否则绑定到全局对象。 var bar = foo();

绑定例外

1. 如果把 null 或者 undefined 作为 this 的绑定对象传入 call、apply 或者 bind，那么这些值在调用时会被忽略，实际应用的是默认绑定规则。（书中推荐使用一个空对象来绑定 this）。
2. 间接引用。这种情况容易在赋值时发生： function foo() { console.log( this.a); } var a = 2； var o = {a: 3, foo: foo}; var p = {a: 4}; o.foo(); // 3 (p.foo = o.foo)(); // 2 p.foo() 实际上引用了 foo() ，如此，会应用默认绑定。

其他

ES6 对改变 this 的混乱绑定作了相应的努力，诞生了箭头函数，其根据当前词法作用域来决定 this 而非上面的四条规则，具体来说，箭头函数会继承外层函数调用的 this 绑定（这其实和 ES6 之前代码中的 self = this 是一个道理）。