Question

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

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();

谁能告诉我第三个函数内部函数是如何引用当前对象的，而第一个函数则不是。 当我们使用箭头功能时，这是不是指定的当前范围？

Answer 1

Arrow functions或多或少等同于function语句，除了，它们将this参数绑定到父作用域的参数。

换句话说，如果顶部范围中出现箭头函数，则其this参数将始终引用全局范围（例如，浏览器中的window或节点中的global。 js），而常规函数中的箭头函数将使其this参数与其外部函数相同，就像代码所示。

ES6箭头功能和此上下文

1 个答案: