ES6箭头函数和这个上下文

ES6 arrow function and this context

本文关键字：上下文 函数 ES6      更新时间：2023-09-26

我已经阅读了一些关于箭头函数的主题，但是下面的代码让我感到困惑。

var bunny = {
  name: 'Usagi',
  tasks: ['transform', 'eat cake', 'blow kisses'],
  first : () => {
    console.log(this) //does not refer to bunny
  },
  second: function(){
    console.log(this) //refers to bunny
  },
  third() {
    this.tasks.forEach((task) => {
      console.log(this); //refers to bunny
    });
  }
};
bunny.first();
bunny.second();
bunny.third();

谁能告诉我为什么第三个函数内部函数this指的是当前对象，而第一个没有。是不是当我们使用箭头函数时，它指的是定义它的当前作用域?

箭头函数或多或少相当于function语句，除了它们将this参数绑定到父作用域的参数。

换句话说，如果箭头函数出现在顶部作用域中，它的this参数将始终引用全局作用域(例如，浏览器中的window或node.js中的global)，而常规函数中的箭头函数将具有与其外部函数相同的this参数，如您的代码所示。

相关文章：