【ES6】箭头函数this指向问题【看这一篇就够啦！】

最新推荐文章于 2022-06-29 21:22:01 发布

Milk595

最新推荐文章于 2022-06-29 21:22:01 发布

阅读量3k

点赞数 4

分类专栏： ES6+ 文章标签： es6

本文链接：https://blog.csdn.net/weixin_43352901/article/details/107913194

版权

本文详细探讨了ES6中的箭头函数，重点分析了箭头函数的this指向问题，强调它总是绑定定义时所在的作用域。箭头函数不能作为构造函数，不支持new操作，也不能使用arguments对象。此外，不适用于需要动态this的情况，如对象方法或需要事件监听器动态绑定的场景。总结了箭头函数的使用限制，并提供了相应的示例来帮助理解。

摘要由CSDN通过智能技术生成

箭头函数this指向

箭头函数有4个使用注意点。

（1）函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
（2）不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。
（3）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。
（4）不可以使用yield命令，因此箭头函数不能用作 Generator 函数。

上面四点中，第一点尤其值得注意。this对象的指向是可变的，但是在箭头函数中，它是固定的。

function foo() {
   
  setTimeout(() => {
   
    console.log('id:', this.id);
  }, 100);
}

var id = 21;

foo.call({
    id: 42 });
// id: 42

上面代码中，setTimeout的参数是一个箭头函数，这个箭头函数的定义生效是在foo函数生成时，而它的真正执行要等到 100 毫秒后。如果是普通函数，执行时this应该指向全局对象window，这时应该输出21。但是，箭头函数导致this总是指向函数定义生效时所在的对象（本例是{id: 42}），所以输出的是42。

箭头函数可以让setTimeout里面的this，绑定定义时所在的作用域，而不是指向运行时所在的作用域。下面是另一个例子。

function Timer() {
   
  this.s1 = 0;
  this.s2 = 0;
  // 箭头函数
  setInterval(() => this.s1++, 1000);
  // 普通函数
  setInterval(function () {
   
    this.s2++;
  }, 1000);
}