前端 2016-08-18

在第1章中，我们排除了一些对于this的错误理解并且明白了每个函数的this是在调用时被绑定
的，完全取决于函数的调用位置（也就是函数的调用方法）。

调用位置

调用位置：调用位置就是函数在代码中被调用的位置（而
不是声明的位置）。只有仔细分析调用位置才能回答这个问题：这个this到底引用的是什么？

分析调用栈（就是为了到达当前执行位置所调用的所有函数）。我们关心的调用位置
就在当前正在执行的函数的前一个调用中。

function baz() {
// 当前调用栈是：baz
// 因此， 当前调用位置是全局作用域
console.log( "baz" );
bar(); // <-- bar的调用位置
} 
function bar() {
// 当前调用栈是baz -> bar
// 因此， 当前调用位置在baz中
console.log( "bar" );
foo(); // <-- foo的调用位置
} 
function foo() {
// 当前调用栈是baz -> bar -> foo
// 因此， 当前调用位置在bar中
console.log( "foo" );
} 
baz(); // <-- baz的调用位置

你可以把调用栈想象成一个函数调用链，就像我们在前面代码段的注释中所写的一样。但
是这种方法非常麻烦并且容易出错。另一个查看调用栈的方法是使用浏览器的调试工具。绝大
多数现代桌面浏览器都内置了开发者工具，其中包含JavaScript调试器。就本例来说，你可以在
工具中给foo()函数的第一行代码设置一个断点，或者直接在第一行代码之前插入一
条debugger;语句

绑定规则

我们来看看在函数的执行过程中调用位置如何决定this的绑定对象。
你必须找到调用位置，然后判断需要应用下面四条规则中的哪一条。我们首先会分别解释这四条
规则，然后解释多条规则都可用时它们的优先级如何排列。

默认绑定

首先要介绍的是最常用的函数调用类型：独立函数调用。可以把这条规则看作是无法应用其他规
则时的默认规则。

function foo() {
    //当前调用栈
    console.log( this.a );
} 
var a = 2;
foo(); // 2  调用位置

调用foo()时，this.a被解析成了全局变量a。为什么？因为在本例中，函数
调用时应用了this的默认绑定，因此this指向全局对象。

在代码中，foo()是直接使用不带任何修饰的函数引用进行调用的，因此只能使用默认绑定，无法应
用其他规则。
如果使用严格模式（strict mode），那么全局对象将无法使用默认绑定，因此this会绑定
到undefined：

function foo() {
"use strict";
console.log( this.a );
} 
var a = 2;
foo(); // TypeError: this is undefined

隐式绑定

另一条需要考虑的规则是调用位置是否有上下文对象，或者说是否被某个对象拥有或者包含，不
过这种说法可能会造成一些误导

function foo() {
console.log( this.a );
} 
var obj = {
a: 2,
foo: foo
};
obj.foo(); // 2

当foo()被调用时，它的落脚点确实指向obj对象。当函数引用有上下文
对象时，隐式绑定规则会把函数调用中的this绑定到这个上下文对象。因为调用foo()时this被绑
定到obj，因此this.a和obj.a是一样的。
对象属性引用链中只有最顶层或者说最后一层会影响调用位置。举例来说：

function foo() {
console.log( this.a );
} 
var obj2 = {
a: 42,
foo: foo
};
var obj1 = {
a: 2,
obj2: obj2
};
obj1.obj2.foo(); // 42

隐式丢失
一个最常见的this绑定问题就是被隐式绑定的函数会丢失绑定对象，也就是说它会应用默认绑
定，从而把this绑定到全局对象或者undefined上，取决于是否是严格模式。
思考下面的代码：

function foo() {
console.log( this.a );
} 
var obj = {
a: 2,
foo: foo
};
var bar = obj.foo; // 函数别名！
var a = "oops, global"; // a是全局对象的属性
bar(); // "oops, global"

虽然bar是obj.foo的一个引用，但是实际上，它引用的是foo函数本身，因此此时的bar()其实是一
个不带任何修饰的函数调用，因此应用了默认绑定。

一种更微妙、更常见并且更出乎意料的情况发生在传入回调函数时：

function foo() {
console.log( this.a );
} f
unction doFoo(fn) {
// fn其实引用的是foo
fn(); // <-- 调用位置！
} 

var obj = {
a: 2,
foo: foo
};
var a = "oops, global"; // a是全局对象的属性
doFoo( obj.foo ); // "oops, global"

参数传递其实就是一种隐式赋值，因此我们传入函数时也会被隐式赋值，所以结果和上一个例子
一样。
如果把函数传入语言内置的函数而不是传入你自己声明的函数，会发生什么呢？结果是一样的，没
有区别

function foo() {
console.log( this.a );
} 
var obj = {
a: 2,
foo: foo
};
var a = "oops, global"; // a是全局对象的属性
setTimeout( obj.foo, 100 ); // "oops, global"
JavaScript环境中内置的setTimeout()函数实现和下面的伪代码类似：

>function setTimeout(fn,delay) {
// 等待delay毫秒
fn(); // <-- 调用位置！
>}

就像我们看到的那样，回调函数丢失this绑定是非常常见的。除此之外，还有一种情况this的行为
会出乎我们意料：调用回调函数的函数可能会修改this。在一些流行的JavaScript库中事件处理器
常会把回调函数的this强制绑定到触发事件的DOM元素上。这在一些情况下可能很有用，但是有
时它可能会让你感到非常郁闷。遗憾的是，这些工具通常无法选择是否启用这个行为。
无论是哪种情况，this的改变都是意想不到的，实际上你无法控制回调函数的执行方式，因此就没
有办法控制会影响绑定的调用位置。之后我们会介绍如何通过固定this来修复（这里是双关，“修
复”和“固定”的英语单词都是fixing）这个问题。

显式绑定

就像我们刚才看到的那样，在分析隐式绑定时，我们必须在一个对象内部包含一个指向函数的属
性，并通过这个属性间接引用函数，从而把this间接（隐式）绑定到这个对象上。

JavaScript提供的绝大多数函数以及你自己创建的所有函数都可以使用call(..)
和apply(..)方法
它们的第一个参数是一个对象，它们会把这个对象绑定到this，接着
在调用函数时指定这个this。因为你可以直接指定this的绑定对象，因此我们称之为显式绑定。

function foo() {
console.log( this.a );
} 
var obj = {
a:2
};
foo.call( obj ); // 2

通过foo.call(..)，我们可以在调用foo时强制把它的this绑定到obj
如果你传入了一个原始值（字符串类型、布尔类型或者数字类型）来当作this的绑定对象，这个原
始值会被转换成它的对象形式（也就是new String(..)、new Boolean(..)或者new Number(..)）。这通
常被称为“装箱”。
可惜，显式绑定仍然无法解决我们之前提出的丢失绑定问题

硬绑定

但是显式绑定的一个变种可以解决这个问题。

function foo() {
console.log( this.a );
} 
var obj = {
a:2
};
var bar = function() {
foo.call( obj );
};
bar(); // 2
setTimeout( bar, 100 ); // 2
// 硬绑定的bar不可能再修改它的this
bar.call( window ); // 2

我们创建了函数bar()，并在它的内部手动调用
了foo.call(obj)，因此强制把foo的this绑定到了obj。无论之后如何调用函数bar，它总会手动
在obj上调用foo。这种绑定是一种显式的强制绑定，因此我们称之为硬绑定。

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

function foo(something) {
console.log( this.a, something );
return this.a + something;
} 
var obj = {
a:2
};
var bar = function() {
return foo.apply( obj, arguments );
};
var b = bar( 3 ); // 2 3
console.log( b ); // 5

API调用的“上下文”

第三方库的许多函数，以及JavaScript语言和宿主环境中许多新的内置函数，都提供了一个可选的
参数，通常被称为“上下文”（context），其作用和bind(..)一样，确保你的回调函数使用指定的this。
举例来说：

function foo(el) {
console.log( el, this.id );
} 
var obj = {
id: "awesome"
};
// 调用foo(..)时把this绑定到obj
[1, 2, 3].forEach( foo, obj );
// 1 awesome 2 awesome 3 awesome

这些函数实际上就是通过call(..)或者apply(..)实现了显式绑定，这样你可以少些一些代码。

new绑定

在传统的面向类的语言中，“构造函数”是类中的一些特殊方法，使用new初始化类时会调用类中的
构造函数。通常的形式是这样的：

something = new MyClass(..);

JavaScript中new的机制实际上和面向类的
语言完全不同
JavaScript，构造函数只是一些使用new操作符
时被调用的函数。它们并不会属于某个类，也不会实例化一个类。实际上，它们甚至都不能说是一
种特殊的函数类型，它们只是被new操作符调用的普通函数而已。

使用new来调用函数，或者说发生构造函数调用时，会自动执行下面的操作。

创建（或者说构造）一个全新的对象。
这个新对象会被执行[[原型]]连接。
这个新对象会绑定到函数调用的this。
如果函数没有返回其他对象，那么new表达式中的函数调用会自动返回这个新对象。
```
function foo(a) {
this.a = a;
} 
var bar = new foo(2);
console.log( bar.a ); // 2
```
使用new来调用foo(..)时，我们会构造一个新对象并把它绑定到foo(..)调用中的this上。new是最
后一种可以影响函数调用时this绑定行为的方法，我们称之为new绑定。
优先级
毫无疑问，默认绑定的优先级是四条规则中最低的，所以我们可以先不考虑它。
隐式绑定和显式绑定哪个优先级更高？我们来测试一下：
```
function foo() {
console.log( this.a );
} 
var obj1 = {
a: 2,
foo: foo
};
var obj2 = {
a: 3,
foo: foo
};
obj1.foo(); // 2
obj2.foo(); // 3
obj1.foo.call( obj2 ); // 3
obj2.foo.call( obj1 ); // 2
```
可以看到，显式绑定优先级更高，也就是说在判断时应当先考虑是否可以应用显式绑定。

判断this
现在我们可以根据优先级来判断函数在某个调用位置应用的是哪条规则。可以按照下面的顺序来
进行判断：

函数是否在new中调用（new绑定）？如果是的话this绑定的是新创建的对象。

var bar = new foo()
函数是否通过call、apply（显式绑定）或者硬绑定调用？如果是的话，this绑定的是指定的对象。

var bar = foo.call(obj2)
函数是否在某个上下文对象中调用（隐式绑定）？如果是的话，this绑定的是那个上下文对象。

var bar = obj1.foo()
如果都不是的话，使用默认绑定。如果在严格模式下，就绑定到undefined，否则绑定到全局对象。

var bar = foo()

就是这样。对于正常的函数调用来说，理解了这些知识你就可以明白this的绑定原理了。不过……
凡事总有例外

this词法

ES6中介绍了一种无法使用这些规
则的特殊函数类型：箭头函数。
箭头函
数不使用this的四种标准规则，而是根据外层（函数或者全局）作用域来决定this。
我们来看看箭头函数的词法作用域：

function foo() {
// 返回一个箭头函数
return (a) => {
//this继承自foo()
console.log( this.a );
};
} 
var obj1 = {
a:2
};
var obj2 = {
a:3
};
var bar = foo.call( obj1 );
bar.call( obj2 ); // 2, 不是3！

foo()内部创建的箭头函数会捕获调用时foo()的this。由于foo()的this绑定到obj1，bar（引用箭头
函数）的this 也会绑定到obj1，箭头函数的绑定无法被修改。（new也不行！）

如果你经常编写this风格的代码，但是绝大部分时候都会使用self = this或者箭头函数来否
定this机制，那你或许应当：

只使用词法作用域并完全抛弃错误this风格的代码；
完全采用this风格，在必要时使用bind(..)，尽量避免使用self = this和箭头函数。
当然，包含这两种代码风格的程序可以正常运行，但是在同一个函数或者同一个程序中混合使用
这两种风格通常会使代码更难维护，并且可能也会更难编写。
小结

如果要判断一个运行中函数的this绑定，就需要找到这个函数的直接调用位置。找到之后就可以
顺序应用下面这四条规则来判断this的绑定对象。

由new调用？绑定到新创建的对象。
由call或者apply（或者bind）调用？绑定到指定的对象。
由上下文对象调用？绑定到那个上下文对象。
默认：在严格模式下绑定到undefined，否则绑定到全局对象。

一定要注意，有些调用可能在无意中使用默认绑定规则。如果想“更安全”地忽略this绑定，你可以
使用一个DMZ对象，比如ø = Object.create(null)，以保护全局对象。
ES6中的箭头函数并不会使用四条标准的绑定规则，而是根据当前的词法作用域来决定this，具体
来说，箭头函数会继承外层函数调用的this绑定（无论this绑定到什么）。这其实和ES6之前代码中
的self = this机制一样。

赏