Question

我知道人们说箭头函数没有自己的this，它会升至下一个级别并使用在那里找到的'this'，因此下面是一些示例：

let hat = {
 name: "Faviourite",
 writeDetails: () =>
 console.log(this.name)
};

let temp = hat.writeDetails;
temp(); //output: undefined

和

class hat {
   constructor(name) {
      this.name = name;
   }
   writeDetails = () => {
      console.log(this.name)
   }
}

let myHat = new hat("Faviourite");
let temp = myHat.writeDetails;
temp();   //Output: Faviourite

对于第一个示例，不是箭头功能也转到了下一个级别（hat）并使用hat作为this，所以为什么它仍然产生{ {1}}？

Answer 1

您正在调用temp（），它将在window上调用，因此它将打印window.name而不是Faviourite

let hat = {
 name: "Faviourite",
 writeDetails: () =>
 console.log(this.name)
};

let temp = hat.writeDetails;
temp();

由于JavaScript没有块作用域，因此仅功能作用域可用，因此，作为黑客，您将无法直接访问它，因此可以直接访问hat变量，而不能this.name使用hat.name。您可能希望通过this answer来获得更多说明和其他答案。

在第二种情况下，如果看到ES5方式仍在使用function（）{}而不是您认为正在使用的粗箭头，this blog可能会帮助您理解

为什么“ this”在字面对象和类中不同？

1 个答案: