js 中的 this

要选出 js 中最让初学者最头疼的概念, this 必定占其中的前 3 名。不像 cpp, java 或者 python，js 在任意函数中都能使用 this。并其 this 在 js 中更类似于动态作用域。即 this 并不是在定义时决定，而是在函数调用时才决定。这种决定绑定到哪个 this 的行为称为 this 绑定。例如通过一个普通函数调用时，this 实际上是绑定到全局对象(浏览器环境为 window，node 环境为 global):

function bar(){
  this.a = 1;
}
bar()
console.info(global.a)

默认绑定

默认绑定是指通过调用普通函数的方式进行绑定，也就是上文提到的绑定方式:

function bar(){
  this.a = 1;
}
bar()
console.info(global.a) //1

隐式绑定

隐式绑定是指该函数通过对象的成员函数的方式调用，此时 this 会绑定到调用的对象。例如:

global.a = 1
obj = {
    a: 2,
    bar: function(){
        console.info(this.a)
    }
}
obj.bar() // 2

注意要强调的一点是，this 绑定始终只和调用方式有关，而和定义的方式无关，例如:

global.a = 1
function bar(){
    console.info(this.a)
}
obj = {
    a: 2
}
obj.bar = bar
obj.bar() // 2

虽然 bar 定义在全局环境中，但仍然绑定到 obj 而不是全局对象。

隐式绑定丢失

由于绑定只和调用有关，因此如果一个成员函数通过普通函数的调用方式进行调用，那么它 this 就会绑定到全局变量，例如:

global.a = 1
obj = {
    a: 2,
    bar: function(){
        console.info(this.a)
    }
}
const bar = obj.bar
bar() // 1

可以看出，此时 this 绑定到了全局对象。还有一种更不容易发现的情况，即将成员函数当成回调函数使用，由于存在一种类似的赋值行为，也会产生对应的丢失问题，例如:

var a = 1
obj = {
    a: 2,
    bar: function(){
        console.info(this.a)
    }
}
setInterval(obj.bar, 1000) // 1 1 1 1 1

这就能解释为什么在 react 中需要手动绑定 this。

显式绑定

通过 call 或者 apply 能够显示的绑定对象到 this:

function bar(){
    console.info(this.a)
}
bar.call({a: 1}) //1
bar.call({a: 2}) //2

硬绑定

为了避免在传递回调函数的时候丢失 this 绑定，我们可以采用一种称为硬绑定的方式，例如:

obj = {
    a: 1,
    bar: function(){
        console.info(this.a)
    }
}
function bind(bar, obj){
    function inner(){
        return bar.call(obj)
    }
    return inner
}
foo = bind(obj.bar, obj)
setInterval(foo, 1000)

通过实现一个 bind 辅组函数来进行绑定。此时，就算我们将其作为一个回调函数也不会丢失 this 绑定。由于这种场景非常常见，所以 js 内置了 Function.prototype.bind 来实现硬绑定。有的同学突发奇想，如果我们将一个硬绑定的函数再赋值给一个对象:

obj = {
    a: 1,
    bar: function(){
        console.info(this.a)
    }
}
obj.foo = obj.bar.bind({a: 3})
obj.foo() //3

可以看出，仍然绑定到 {a: 3} 而不是 obj。所以优先级硬绑定 > 隐式绑定。

new 绑定

当一个函数作为构造函数使用时，它会绑定到它创建的对象上，例如:

function bar(){
    this.a = 1
}
const b = new bar()
console.info(b.a) // 1
console.info(global.a) // undefined