JS中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 的调用位置
复制代码

绑定规则 (注：皆不考虑严格模式)

1. 默认绑定

首先要介绍的是最经常使用的函数调用类型：独立函数调用。能够把这条规则看做是没法应用 其余规则时的默认规则。

思考一下下面的代码：

function foo() {
console.log( this.a );
}
var a = 2;
foo(); // 2
复制代码

咱们能够看到当调用 foo() 时，this.a 被解析成了全局变量 a。为何？由于在本 例中，函数调用时应用了 this 的默认绑定，所以 this 指向全局对象。

2. 隐式绑定

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

思考下面的代码：

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

当函数引 用(注：foo是引用函数，既指向function foo(){···}这个函数，而foo()才是调用函数)有上下文对象时，隐式绑定规则会把函数调用中的 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 绑定到全局对象。

思考下面的代码：

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 函数自己(注：var bar = obj.foo;至关于给这个函数又取了一个名字，因此bar();=foo();)，所以此时的 bar() 实际上是一个不带任何修饰的函数调用，所以应用了默认绑定。

3. 显式绑定

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 绑定的角度来讲，call(..) 和 apply(..)还有bind(...) 是同样的，它们的区别体现 在其余的参数上，可是如今咱们不用考虑这些。)

4. new绑定

在 JavaScript 中，构造函数只是一些 使用 new 操做符时被调用的函数。它们并不会属于某个类，也不会实例化一个类。实际上， 它们甚至都不能说是一种特殊的函数类型，它们只是被 new 操做符调用的普通函数而已。

使用 new 来调用函数，或者说发生构造函数调用时，会自动执行下面的操做。(这里咱们能够不用管第二步)

1. 建立（或者说构造）一个全新的对象。
2. 这个新对象会被执行 [[ 原型 ]] 链接。
3. 这个新对象会绑定到函数调用的 this。
4. 若是函数没有返回其余对象，那么 new 表达式中的函数调用会自动返回这个新对象。

思考下面的代码：

function foo(a) {
this.a = a;
}
var bar = new foo(2);
console.log( bar.a ); // 2
复制代码

使用 new 来调用 foo(..) 时，咱们会构造一个新对象并把它绑定到 foo(..) 调用中的 this 上。new 是最后一种能够影响函数调用时 this 绑定行为的方法，咱们称之为 new 绑定。

最后：优先级

如今咱们已经了解了函数调用中 this 绑定的四条规则，你须要作的就是找到函数的调用位 置并判断应当应用哪条规则。可是，若是某个调用位置能够应用多条规则该怎么办？为了 解决这个问题就必须给这些规则设定优先级。

这里我就不作讨论了，直接给出结论：

new绑定 > 显示绑定 > 隐式绑定 > 默认绑定

有兴趣的同窗能够自行去验证。

参考书籍：《你不知道的JavaScript(上卷)》