Javascript箭头函数词法范围：对象文字与“新”运算符

Question

我试图了解箭头函数在 JS 中的工作原理。让我困惑的一件事是：let obj1 = { // MDN states that object literal does not create a new scope but I didn't find              // any detailed explanation why  name: "benny",  getName: () => {    console.log(this.name);  },};obj1.getName(); // prints "undefined"class myObj {  constructor() {    this.name = "benny";    this.getName = () => {      console.log(this.name);    };  }}let obj2 = new myObj();obj2.getName(); //prints "benny"有人可以解释一下为什么对象文字不创建新作用域，而调用“new”却创建新作用域吗？（我一直认为对象字面量和“new”运算符是相等的；我在 MDN 中没有找到正确的解释。）我找到了关于new 运算符如何工作的解释。但我不清楚为什么对象文字的工作方式不同。

Answer 1

运算new符不会创建新范围。

函数创建了一个新的范围。

该constructor函数是与全局外部任意函数空间不同的函数。

Answer 2

因此，每当您在任何地方使用箭头函数时，它都不会拥有this自己的箭头函数，因为它将引用this其父函数（简单地说）。

因此，在第一种情况下，它引用了thiswindow ，因此也引用了undefined。

在第二种情况下，引用构造函数的“this”，因此引用“benny”。

Answer 3

class myObj {

  constructor() {

    this.name = "benny";

  }

  getName() {

    console.log(this.name);

  }

  getName2 = () => {

    console.log(this.name);

  }

}

let obj2 = new myObj();

obj2.getName();

obj2.getName2();

我想提出这个例子，因为我认为它非常有趣——这并不是直接回答你的问题，而只是一些附加信息。

人们正在讨论在构造函数中定义它如何使this属性引用对象本身 - 因为这就是this构造函数中的含义！所以我想看看如果你按照我上面的方式定义一个箭头函数会发生什么，getName2它不在构造函数中，但它仍然被this定义为对象本身。所以为什么？

好吧，事实证明，当您以这种方式定义箭头函数时，它实际上最终会在构造函数中定义。我认为箭头函数存在某种code hoisting类似的情况。您实际上可以通过尝试更改原型上的函数来验证它：

myObj.prototype.getName = () => {console.log('hello world')}
myObj.prototype.getName2 = () => {console.log('hello world')}
obj2.getName(); // this prints 'hello world'
obj2.getName2(); // this does not

您无法getName2通过原型更改 的函数，因为该函数实际上是在幕后的构造函数中定义的。