要选出 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
