JavaScript this绑定过程深入详解
本文实例形式详细分析了JavaScriptthis绑定过程。分享给大家供大家参考，具体如下：
在理解this的绑定过程之前，首先要理解调用位置：调用位置就是函数在代码中被调用的位置（而不是声明的位置）。只有仔细分析调用位置才能回答这个问题：这个this到底引用的是什么？通常来说，寻找调用位置就是寻找“函数被调用的位置”，但是做起来并没有这么简单，因为某些编程模式可能会隐藏真正的调用位置。最重要的是要分析调用栈（就是为了到达当前执行位置所调用的所有函数）。我们关心的调用位置就在当前正在执行的函数的前一个调用中。
下面我们来看看到底什么是调用栈和调用位置：
functionbaz(){
//当前调用栈是：baz
//因此，当前调用位置是全局作用域
console.log("baz");
bar();//<--bar的调用位置
}
functionbar(){
//当前调用栈是baz->bar
//因此，当前调用位置在baz中
console.log("bar");
foo();//<--foo的调用位置
}
functionfoo(){
//当前调用栈是baz->bar->foo
//因此，当前调用位置在bar中
console.log("foo");
}
baz();//<--baz的调用位置
注意我们是如何（从调用栈中）分析出真正的调用位置的，因为它决定了this的绑定。
你可以把调用栈想象成一个函数调用链，就像我们在前面代码段的注释中所写的一样。但是这种方法非常麻烦并且容易出错。另一个查看调用栈的方法是使用浏览器的调试工具。绝大多数现代桌面浏览器都内置了开发者工具，其中包含JavaScript调试器。就本例来说，你可以在工具中给foo()函数的第一行代码设置一个断点，或者直接在第一行代码之前插入一条debugger;语句。运行代码时，调试器会在那个位置暂停，同时会展示当前位置的函数调用列表，这就是你的调用栈。因此，如果你想要分析this的绑定，使用开发者工具得到调用栈，然后找到栈中第二个元素，这就是真正的调用位置。
绑定规则
我们来看看在函数的执行过程中调用位置如何决定this的绑定对象。你必须找到调用位置，然后判断需要应用下面四条规则中的哪一条。
1.默认绑定
首先要介绍的是最常用的函数调用类型：独立函数调用。可以把这条规则看作是无法应用其他规则时的默认规则。
思考一下下面的代码：
functionfoo(){
console.log(this.a);
}
vara=2;
foo();//2
你应该注意到的第一件事是，声明在全局作用域中的变量（比如vara=2）就是全局对象的一个同名属性。它们本质上就是同一个东西，并不是通过复制得到的，就像一个硬币的两面一样。
接下来我们可以看到当调用foo()时，this.a被解析成了全局变量a。为什么？因为在本例中，函数调用时应用了this的默认绑定，因此this指向全局对象。
那么我们怎么知道这里应用了默认绑定呢？可以通过分析调用位置来看看foo()是如何调用的。在代码中，foo()是直接使用不带任何修饰的函数引用进行调用的，因此只能使用默认绑定，无法应用其他规则。
如果使用严格模式（strictmode），那么全局对象将无法使用默认绑定，因此this会绑定到undefined：
functionfoo(){
"usestrict";
console.log(this.a);
}
vara=2;
foo();//TypeError:thisisundefined
这里有一个微妙但是非常重要的细节，虽然this的绑定规则完全取决于调用位置，但是只有foo()运行在非strictmode下时，默认绑定才能绑定到全局对象；严格模式下与foo()的调用位置无关：
functionfoo(){
console.log(this.a);
}
vara=2;
(function(){
"usestrict";
foo();//2
})();
通常来说你不应该在代码中混合使用strictmode和non-strictmode。整个程序要么严格要么非严格。然而，有时候你可能会用到第三方库，其严格程度和你的代码有所不同，因此一定要注意这类兼容性细节。
2.隐式绑定
另一条需要考虑的规则是调用位置是否有上下文对象，或者说是否被某个对象拥有或者包含，不过这种说法可能会造成一些误导。
思考下面的代码：
functionfoo(){
console.log(this.a);
}
varobj={
a:2,
foo:foo
};
obj.foo();//2
首先需要注意的是foo()的声明方式，及其之后是如何被当作引用属性添加到obj中的。但是无论是直接在obj中定义还是先定义再添加为引用属性，这个函数严格来说都不属于obj对象。然而，调用位置会使用obj上下文来引用函数，因此你可以说函数被调用时obj对象“拥有”或者“包含”它。无论你如何称呼这个模式，当foo()被调用时，它的落脚点确实指向obj对象。当函数引用有上下文对象时，隐式绑定规则会把函数调用中的this绑定到这个上下文对象。因为调用foo()时this被绑定到obj，因此this.a和obj.a是一样的。
对象属性引用链中只有最顶层或者说最后一层会影响调用位置。举例来说：
functionfoo(){
console.log(this.a);
}
varobj2={
a:42,
foo:foo
};
varobj1={
a:2,
obj2:obj2
};
obj1.obj2.foo();//42
隐式丢失
一个最常见的this绑定问题就是被隐式绑定的函数会丢失绑定对象，也就是说它会应用默认绑定，从而把this绑定到全局对象或者undefined上，取决于是否是严格模式。
思考下面的代码：
functionfoo(){
console.log(this.a);
}
varobj={
a:2,
foo:foo
};
varbar=obj.foo;//函数别名！
vara="oops,global";//a是全局对象的属性
bar();//"oops,global"
虽然bar是obj.foo的一个引用，但是实际上，它引用的是foo函数本身，因此此时的bar()其实是一个不带任何修饰的函数调用，因此应用了默认绑定。
一种更微妙、更常见并且更出乎意料的情况发生在传入回调函数时：
functionfoo(){
console.log(this.a);
}
functiondoFoo(fn){
//fn其实引用的是foo
fn();//<--调用位置！
}
varobj={
a:2,
foo:foo
};
vara="oops,global";//a是全局对象的属性
doFoo(obj.foo);//"oops,global"
参数传递其实就是一种隐式赋值，因此我们传入函数时也会被隐式赋值，所以结果和上一个例子一样。
如果把函数传入语言内置的函数而不是传入你自己声明的函数，会发生什么呢？结果是一样的，没有区别：
functionfoo(){
console.log(this.a);
}
varobj={
a:2,
foo:foo
};
vara="oops,global";//a是全局对象的属性
setTimeout(obj.foo,100);//"oops,global"
JavaScript环境中内置的setTimeout()函数实现和下面的伪代码类似：
functionsetTimeout(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的绑定对象，因此我们称之为显式绑定。
思考下面的代码：
functionfoo(){
console.log(this.a);
}
varobj={
a:2
};
foo.call(obj);//2
通过foo.call(..)，我们可以在调用foo时强制把它的this绑定到obj上。如果你传入了一个原始值（字符串类型、布尔类型或者数字类型）来当作this的绑定对象，这个原始值会被转换成它的对象形式（也就是newString(..)、newBoolean(..)或者newNumber(..)）。这通常被称为“装箱”。从this绑定的角度来说，call(..)和apply(..)是一样的，它们的区别体现在其他的参数上，但是现在我们不用考虑这些。可惜，显式绑定仍然无法解决我们之前提出的丢失绑定问题。
1.硬绑定
但是显式绑定的一个变种可以解决这个问题。
思考下面的代码：
functionfoo(){
console.log(this.a);
}
varobj={
a:2
};
varbar=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。这种绑定是一种显式的强制绑定，因此我们称之为硬绑定。
硬绑定的典型应用场景就是创建一个包裹函数，传入所有的参数并返回接收到的所有值：
functionfoo(something){
console.log(this.a,something);
returnthis.a+something;
}
varobj={
a:2
};
varbar=function(){
returnfoo.apply(obj,arguments);
};
varb=bar(3);//23
console.log(b);//5
另一种使用方法是创建一个i可以重复使用的辅助函数：
functionfoo(something){
console.log(this.a,something);
returnthis.a+something;
}
//简单的辅助绑定函数
functionbind(fn,obj){
returnfunction(){
returnfn.apply(obj,arguments);
};
}
varobj={
a:2
};
varbar=bind(foo,obj);
varb=bar(3);//23
console.log(b);//5
由于硬绑定是一种非常常用的模式，所以在ES5中提供了内置的方法Function.prototype.bind，它的用法如下：
functionfoo(something){
console.log(this.a,something);
returnthis.a+something;
}
varobj={
a:2
};
varbar=foo.bind(obj);
varb=bar(3);//23
console.log(b);//5
bind(..)会返回一个硬编码的新函数，它会把参数设置为this的上下文并调用原始函数。
2.API调用的“上下文”
第三方库的许多函数，以及JavaScript语言和宿主环境中许多新的内置函数，都提供了一个可选的参数，通常被称为“上下文”（context），其作用和bind(..)一样，确保你的回调函数使用指定的this。
举例来说：
functionfoo(el){
console.log(el,this.id);
}
varobj={
id:"awesome"
};
//调用foo(..)时把this绑定到obj
[1,2,3].forEach(foo,obj);
//1awesome2awesome3awesome
这些函数实际上就是通过call(..)或者apply(..)实现了显式绑定，这样你可以少些一些代码。
4.new绑定
这是第四条也是最后一条this的绑定规则，在讲解它之前我们首先需要澄清一个非常常见的关于JavaScript中函数和对象的误解。在传统的面向类的语言中，“构造函数”是类中的一些特殊方法，使用new初始化类时会调用类中的构造函数。通常的形式是这样的：
something=newMyClass(..);
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表达式中的函数调用会自动返回这个新对象。
思考下面的代码：
functionfoo(a){
this.a=a;
}
varbar=newfoo(2);
console.log(bar.a);//2
使用new来调用foo(..)时，我们会构造一个新对象并把它绑定到foo(..)调用中的this上。new是最后一种可以影响函数调用时this绑定行为的方法，我们称之为new绑定。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《javascript面向对象入门教程》、《JavaScript常用函数技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。