JavaScript中的this及如何绑定

在JavaScript中，this指向当前执行代码的上下文对象，具体的绑定规则取决于函数的调用方式。this可以通过call、apply、bind等方法进行显式绑定，也可以隐式绑定到调用函数的对象，或者绑定到全局对象window上。使用箭头函数时，其this指向父级作用域的this。对于异步函数或回调函数，this指向可能会发生变化，需要格外小心处理。了解this绑定规则，可以更好地理解和使用JavaScript中的面向对象和函数式编程等特性。

一、this 绑定

怎么理解 this？
其实 this 就是一个指针，它指示的就是当前的一个执行环境，可以用来对当前执行环境进行一些操作。

MDN 解释：在绝大多数情况下，函数的调用方式决定了 this 的值（运行时绑定）。this 不能在执行期间被赋值，并且在每次函数被调用时 this 的值也可能会不同。ES5 引入了 bind 方法来设置函数的 this 值，而不用考虑函数如何被调用的。ES2015 引入了箭头函数，箭头函数不提供自身的 this 绑定（this 的值将保持为闭合词法上下文的值）。
this 是如何绑定的？
每个函数的 this 是在调用时被绑定的，完全取决于函数的调用位置。我们找到函数的调用位置，然后运用以下四种绑定规则来判断函数的 this 指向。

1、默认绑定

函数的 this 会默认绑定到全局对象 window 上，如果在严格模式中，this 绑定到 undefined。

function foo (){
  console.log(this.a)
}
let a = 1
foo() // 1

2、隐式绑定

调用位置是否有上下文对象，或者被某个对象拥有或包含。

function foo(){
  console.log(this.a)
}
let obj = {
  a: 2,
  foo:foo
}
let a = 1
obj.foo(); // 2
 
function foo(){
  console.log(this.a)
}
let obj1 = {
  a: 2,
  foo: foo
}
let obj2 = {
  a: 3,
  obj1: obj1
}
let a = 1
obj2.obj1.foo(); // 2

3、显式绑定

直接改变 this 指向，绑定到另一个执行环境

function foo(){
  console.log(this.a)
}
let obj = {
  a: 1
}
foo.call(obj)

4、new 绑定

new 出来的函数 this 绑定的是新创建的对象

function Foo(a){
  this.a = a
}
let bar = new Foo(2)
console.log(bar.a) // 2