每个函数的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()
注意我们是如何（从调用栈中）分析出真正的调用位置的，因此它决定了this的绑定。
绑定规则
我们来看看在函数的执行过程中调用位置如何决定this的绑定对象。
1.默认绑定
首先要介绍的是最常用的函数调用方式：独立函数调用。可以把这条规则看作是无法应用其他规则时的默认时的规则。
function foo() {
console.log(this.a)
}
var a = 2;
foo(); // 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
这里有一个微妙但非常重要的细节，虽然this的绑定规则完全取决于调用位置，但是只有foo()运行在非strict mode下时，默认绑定才能绑定到全局对象；严格模式下与foo()的调用位置无关：
function foo() {
console.log(this.a)
}
var a = 2;
(function () {
"use strict";
foo(); // 2
})()
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 obj = {
a: 2,
foo: foo
}
var obj2 = {
a: 3,
obj: obj
}
obj2.obj.foo() // 2
绑定丢失
一个最常见的this绑定问题就是被隐式绑定的函数会丢失绑定对象，也就是说他会应用默认绑定，从而把this绑定到全局对象或者undefined上，取决于是否是严格模式。
function foo() {
console.log(this.a);
}
var obj = {
a: 2,
foo: foo
}
var bar = obj.foo // 函数别名
var a = "oops, global"
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"
doFoo(obj.foo) //"oops, global"
参数传递其实就是一种隐式赋值，因此我们传入函数时也会被隐式赋值，所以结果和上个例子一样。
如果把函数传入内置的函数而不是传入你自己声明的函数呢？
function foo() {
console.log(this.a);
}
function doFoo(fn) {
// fn 引用的是foo
fn()
}
var obj = {
a: 2,
foo: foo
}
var a = "oops, global"
setTimeout(obj.foo, 1000) // "oops, global"
JavaScript环境中内置的setTimeout()函数实现和下面伪代码类似：
function setTimeout(fn, delay){
// 等待delay毫秒
fn(); // 调用位置
}
就像我们看到的那样，回调函数丢失this绑定是非常常见的。除此之外，还有一种情况的this的行为会出乎意料：调用回调函数的函数可能会修改this.在一些流行的JavaScript库中事件处理器常会把回调函数的thsi强制绑定到触发事件的DOM元素上。
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上。
显式绑定仍然无法解决我们之前的丢失 绑定问题。
硬绑定
显式绑定的一种变种可以解决这个问题
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
bind会返回一个硬编码的新函数，它会把参数设置为this的上下文并调用原始函数。
API调用的上下文
第三方库的许多函数，以及JavaScript语言和宿主环境中许多新的内置函数，都提供了一个可选的参数，通常被称为“上下文”（context），作用和bind(...)一样，确保你的回调函数使用指定的this。
4. new绑定
在传统面向类的语言中，“构造函数”是类中的一些特殊方法，使用new初始化类时会调用类中的构造函数。通常的形式是这样的：
something = new MyClass(...)
javascript也有一个new操作符，使用方法看起来也和那些面向类的语言一样。绝大多数开发者都认为javascript中的new机制和其他语言一样。然后，机制完全不同。
首先我们重新定义一下javascript中的构造函数。在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绑定。
网友评论