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

参见英文答案 > What does “this” refer to in arrow functions in ES6?                                    6个
下面的代码应按预期工作,并记录“meow”,here an example.

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

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

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

它不起作用,此错误出现TypeError：无法读取未定义的属性’animalNoise’,当您将箭头函数转换为实际的函数声明时,它可以工作.看起来像箭头功能,我不再能够访问它.这里发生了什么？

需要说明的是,上面的代码在以下代码中不起作用,我很好奇为什么.

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

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

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

解决方法:

Arrow functions perform lexical binding并使用周围的范围作为此范围.例如,想象(出于一些奇怪的原因)你在Dog构造函数中定义Cat.

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

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

标签：arrow-functions,javascript,ecmascript-6,this
来源： https://codeday.me/bug/20190829/1761522.html