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的范围。例如，想象（出于一些奇怪的原因）你在Cat构造函数中定义Dog。

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

因此无论周围的范围是什么，都成为箭头函数的范围。

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

1 个答案: