this的4种绑定规则

每个函数的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绑定。