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

Question

下面的代码应该按预期工作，并记录 "meow"、here an example.

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

Answer 1

Arrow functions perform lexical binding并将周围范围作为this的范围。例如，假设（出于某种奇怪的原因）您在 Dog 构造函数中定义了 Cat。

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

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

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

Why can't I access `this` within an arrow function?

javascript

this

ecmascript-6

arrow-functions