JS 箭头函数的 this 指向详解

箭头函数是 ES6 引入的新特性，它不拥有自己的 this 值，而是从外层代码库继承 this 指向。

在使用箭头函数时，需要注意以下几个关键点：

• 箭头函数不能作为构造函数使用，否则将抛出错误。
• 箭头函数内部无法使用 arguments 对象，如需获取参数，应使用 rest 参数。
• 箭头函数不支持 yield 命令，因此不能用作 Generator 函数。
• 由于没有自己的 this，箭头函数无法通过 bind、call 或 apply 方法改变其 this 指向。
• 但这并不意味着箭头函数的 this 是静态不变的，我们可以通过修改其外层代码库的 this 指向来间接控制。
• 箭头函数的 this 在定义时就已经确定并绑定，而普通函数的 this 是在调用时确定的。
• 在对象字面量中直接定义的箭头函数，其 this 不会绑定到该对象，而是向外查找一层，通常指向全局对象 window。

PS: 在实际开发中，React 常利用箭头函数解决一个经典问题，此处不再展开。

以下是一个展示箭头函数实际运行情况的示例：

const obj = {
  fun1: function () {
    console.log(this);
    return () => {
      console.log(this);
    }
  },
  fun2: function () {
    return function () {
      console.log(this);
      return () => {
        console.log(this);
      }
    }
  },
  fun3: () => {
    console.log(this);
  }
}

let f1 = obj.fun1(); // obj
f1() // obj

let f2 = obj.fun2();
let f2_2 = f2(); // window
f2_2() // window

obj.fun3(); // window

针对上述代码每行输出的分析如下：

let f1 = obj.fun1() // obj

这里发生的是隐式绑定，fun1 的 this 指向 obj。

f1() // obj

执行上一行返回的箭头函数时，其外层代码库的 this 指向 obj，因此直接继承，箭头函数的 this 指向 obj。

objlet f2 =obj.fun2()

fun2 第一层执行时并未打印代码，而是返回了一个函数赋值给 f2。此处发生了绑定丢失，this 由原来的 obj 指向了 window（因为发生了赋值操作）。

let f2_2 = f2() // window

执行 f2() 后，打印出修改后的 this——window，并返回一个箭头函数赋值给 f2_2f。

2_2() // window

执行该箭头函数打印出 window，因为此时外层代码的 this 指向 window，所以这里继承了 window 作为 this。

obj.fun3() // window

在字面量中直接定义的箭头函数无法继承该对象的 this，而是向外再找一层，找到 window。因为字面量对象无法形成独立的作用域，但构造函数可以。

那么如何操纵箭头函数的 this 指向呢？

答案是修改外层代码库的 this 指向，在箭头函数定义之前先修改 this 的方向即可。

在以上代码基础上进行如下修改：

let fun4 = f2.bind(obj)() // obj
fun4() // obj

我们发现修改的是第二层方法的 this 指向，并且箭头函数也继承了下来。

  fun2: function () {
    return function () { // 我们修改的是这里的this
      console.log(this);
      return () => { // 然后这里定义的时候就继承啦
        console.log(this);
      }
    }
  },

总结

本文到此结束，希望能对您有所帮助，也欢迎您关注本站的更多内容！