为什么'this'在文字对象和类上有所不同？

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，所以为什么它仍会产生undefined？

Answer 1

您正在调用要在窗口上调用的temp（），因此它将打印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可能会帮助您理解

Answer 2

将箭头功能更改为匿名功能，按预期方式工作。

实际上，请检查MDN Documentation of this的第一个示例。还要检查this。

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

hat.writeDetails();

另一个有趣的观察（因为这是指此范围内的窗口对象）

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

hat.writeDetails();