为什么我不能在箭头函数中访问“this”？

Question

以下代码应如预期般工作，并记录"meow"，这里有一个示例。

function Cat () {
  this.animalNoise = 'meow' 
}

Cat.prototype.sound = () => {
  console.log(this.animalNoise)
}

let cat = new Cat()
cat.sound()

这段代码不起作用，出现了以下的错误：TypeError: Cannot read property 'animalNoise' of undefined。当您将箭头函数转换为实际的function声明时，它可以工作。似乎使用箭头函数时，我不再可以访问this。这是怎么回事？

明确一点，上面的代码不起作用，而下面的代码可以正常工作，我非常好奇为什么。

function Cat () {
  this.animalNoise = 'meow' 
}

Cat.prototype.sound = function() {
  console.log(this.animalNoise)
}

let cat = new Cat()
cat.sound()

- ThomasReggi

---

箭头函数表达式（也称为“胖箭头函数”）与函数表达式相比具有更短的语法，并且在词法上绑定了this值。-- https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions - elclanrs

已经有多个关于这个问题的提问了，请使用搜索功能。 - Felix Kling

一般来说，我很好奇人们在没有学习箭头函数中this的行为时，如何/从何处学习箭头函数。这个差异是箭头函数的一个重要部分，因此不知道它似乎对我来说是不可能的。 - Felix Kling

Answer 1

箭头函数执行词法绑定，并使用周围范围作为this的作用域。例如，想象一下（由于某种奇怪的原因），你在Dog构造函数内部定义Cat。

function Dog() {
  // do dog like things
  function Cat() { ... }
  Cat.prototype.sound = () => {
    // this == instance of Dog!
  };
}

所以无论周围的作用域是什么，都会成为箭头函数的作用域。

- Mike Cluck

---

每个函数都有词法作用域。只有箭头函数中的 this（和 arguments）是特殊的。 - Felix Kling

@FelixKling 很好的观点。编辑答案以使其更准确。 - Mike Cluck