this & 箭头函数

[LadderLay]

this

this 关键字

this 提供了一种简洁的方式来隐式传递一个对象引用，从而函数可以自动引用合适的上下文对象。
常见的错误理解🙅：this指向函数自身、this指向函数作用域
this 实际上是运行时绑定，指向取决于函数在哪里被调用。
理解调用栈和调用位置。

绑定规则

• 默认绑定： 独立函数调用

function foo() {
  console.log(this.a); //默认绑定，this指向全局对象
}
var a = 2;
// 输出为2
// 注意严格模式下全局对象无法使用默认绑定，this 会绑定到 undefined

• 隐式调用
  调用位置是否存在上下文对象

function foo() {
  console.log(this.a); 
}
var obj = {
  a: 2,
  foo: foo
}
obj.foo(); //2
// 函数引用存在上下文对象，隐式绑定会将 this 绑定到该上下文对象中。

隐式丢失问题：函数别名，传入回调函数（传参）

• 显式绑定
  call，apply ：this 绑定到第一个参数传入的对象。
  硬绑定：创建一个包裹函数，传入所有参数并返回接收到的值 -> bind
  bind：
• new 绑定
  new函数的实现

绑定的优先级：

参考

你不知道的JS（上）

箭头函数

特性：

1. 没有自己的 this 对象。
   箭头函数内部的 this 是固定的 ，始终指向定义时上层作用域中的 this 。（适合用来封装回调）
   由于箭头函数没有自己的this，所以也不能用call()、apply()、bind()这些方法去改变this的指向。

2. 不可以 new, 箭头函数不能用作构造函数。

3. 不能使用 arguments。

4. 不能使用 yield 命令，因此箭头函数不能用作 Generator 函数。

案例

// 定义对象方法时应该使用普通函数而不是箭头函数
// 与JS引擎的处理有关，它会先在全局空间生成这个箭头函数，然后赋值给cat.jumps，这导致箭头函数内部的this指向全局对象
const cat = {
  lives: 9,
  jumps: () => {
    this.lives--; // 此时this指向全局对象
  }
}