JavaScript 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 的调用位置

注意咱们是如何（从调用栈中）分析出真正的调用位置的，由于它决定了this 的绑定。

你能够把调用栈想象成一个函数调用链，就像咱们在前面代码段的注释中所写的同样。可是这种方法很是麻烦而且容易出错。另外一个查看调用栈的方法是使用浏览器的调试工具。绝大多数现代桌面浏览器都内置了开发者工具，其中包含JavaScript 调试器。就本例来讲，你能够在工具中给foo() 函数的第一行代码设置一个断点，或者直接在第一行代码以前插入一条debugger;语句。运行代码时，调试器会在那个位置暂停，同时会展现当前位置的函数调用列表，这就是你的调用栈。所以，若是你想要分析this 的绑定，使用开发者工具获得调用栈，而后找到栈中第二个元素，这就是真正的调用位置。

前端全栈学习交流圈：866109386,面向1-3经验年前端开发人员,帮助突破技术瓶颈，提高思惟能力,群内有大量PDF可供自取，更有干货实战项目视频进群免费领取。

绑定规则

咱们来看看在函数的执行过程当中调用位置如何决定this 的绑定对象。你必须找到调用位置，而后判断须要应用下面四条规则中的哪一条。

1.默认绑定

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

思考一下下面的代码：

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

你应该注意到的第一件事是，声明在全局做用域中的变量（好比var a = 2）就是全局对象的一个同名属性。它们本质上就是同一个东西，并非经过复制获得的，就像一个硬币的两面同样。

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

那么咱们怎么知道这里应用了默认绑定呢？能够经过分析调用位置来看看foo() 是如何调用的。在代码中，foo() 是直接使用不带任何修饰的函数引用进行调用的，所以只能使用默认绑定，没法应用其余规则。

若是使用严格模式（strict mode），那么全局对象将没法使用默认绑定，所以this 会绑定到undefined：

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

前端全栈学习交流圈：866109386,面向1-3经验年前端开发人员,帮助突破技术瓶颈，提高思惟能力,群内有大量PDF可供自取，更有干货实战项目视频进群免费领取。

这里有一个微妙可是很是重要的细节，虽然this 的绑定规则彻底取决于调用位置，可是只有foo() 运行在非strict mode 下时，默认绑定才能绑定到全局对象；严格模式下与foo()的调用位置无关：

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

一般来讲你不该该在代码中混合使用strict mode 和non-strict mode。整个程序要么严格要么非严格。然而，有时候你可能会用到第三方库，其严格程度和你的代码有所不一样，所以必定要注意这类兼容性细节。

2.隐式绑定

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

思考下面的代码：

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

首先须要注意的是foo() 的声明方式，及其以后是如何被看成引用属性添加到obj 中的。可是不管是直接在obj 中定义仍是先定义再添加为引用属性，这个函数严格来讲都不属于obj 对象。然而，调用位置会使用obj 上下文来引用函数，所以你能够说函数被调用时obj 对象“拥有”或者“包含”它。不管你如何称呼这个模式，当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 );
}
function 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）这个问题。

3.显式绑定

就像咱们刚才看到的那样，在分析隐式绑定时，咱们必须在一个对象内部包含一个指向函数的属性，并经过这个属性间接引用函数，从而把this 间接（隐式）绑定到这个对象上。那么若是咱们不想在对象内部包含函数引用，而想在某个对象上强制调用函数，该怎么作呢？JavaScript 中的“全部”函数都有一些有用的特性（这和它们的[[ 原型]] 有关——以后咱们会详细介绍原型），能够用来解决这个问题。具体点说，可使用函数的call(..) 和apply(..) 方法。严格来讲，JavaScript 的宿主环境有时会提供一些很是特殊的函数，它们并无这两个方法。可是这样的函数很是罕见，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(..)）。这一般被称为“装箱”。从this 绑定的角度来讲，call(..) 和apply(..) 是同样的，它们的区别体如今其余的参数上，可是如今咱们不用考虑这些。惋惜，显式绑定仍然没法解决咱们以前提出的丢失绑定问题。

1. 硬绑定

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

思考下面的代码：

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

另外一种使用方法是建立一个i 能够重复使用的辅助函数：

function foo(something) {
console.log( this.a, something );
return this.a + something;
}
// 简单的辅助绑定函数
function bind(fn, obj) {
return function() {
return fn.apply( obj, arguments );
};
}
var obj = {
a:2
};
var bar = bind( foo, obj );
var b = bar( 3 ); // 2 3
console.log( b ); // 5

因为硬绑定是一种很是经常使用的模式，因此在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

前端全栈学习交流圈：866109386,面向1-3经验年前端开发人员,帮助突破技术瓶颈，提高思惟能力,群内有大量PDF可供自取，更有干货实战项目视频进群免费领取。

bind(..) 会返回一个硬编码的新函数，它会把参数设置为this 的上下文并调用原始函数。

2. 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(..) 实现了显式绑定，这样你能够少些一些代码。

4.new绑定

这是第四条也是最后一条this 的绑定规则，在讲解它以前咱们首先须要澄清一个很是常见的关于JavaScript 中函数和对象的误解。在传统的面向类的语言中，“构造函数”是类中的一些特殊方法，使用new 初始化类时会调用类中的构造函数。一般的形式是这样的：

something = new MyClass(..);

JavaScript 也有一个new 操做符，使用方法看起来也和那些面向类的语言同样，绝大多数开发者都认为JavaScript 中new 的机制也和那些语言同样。然而JavaScript 中new 的机制实际上和面向类的语言彻底不一样。

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

举例来讲，思考一下Number(..) 做为构造函数时的行为，ES5.1 中这样描述它：

Number 构造函数

当Number 在new 表达式中被调用时，它是一个构造函数：它会初始化新建立的对象。

因此，包括内置对象函数（好比Number(..)）在内的全部函数均可以用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 绑定。