为什么不能在箭头功能中访问`this`？

下面这段代码应该按预期工作，并记录"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并且当您将arrow函数转换为实际的function声明时，它将起作用。似乎有了箭头功能，我再也无法访问this。这里发生了什么？

需要明确的是，上面的代码在下面的代码不起作用，我很好奇为什么。

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

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

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

Mike Cluck.. 6

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

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

因此，无论周围范围是什么，都将成为箭头功能的范围。

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

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

因此，无论周围范围是什么，都将成为箭头功能的范围。