Javascript 箭头 function 词法 scope：ZA8CFDE6331BD59EB2AC96F8911C4B666 字面量与“新”运算符

Question

I'm trying to understand how arrow functions work in JS. One thing that confuses me is:

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"

Can somebody please explain why object literal does not create a new scope, while calling "new" does? (I always thought object literal and "new" operator are equal; I didn't find proper explanation in MDN.) I found this explanation on how new operator works . But it's not clear to me why object literal works differently.

Thanks in advance!

Answer 1

The new operator doesn't create a new scope.

Functions create a new scope.

The constructor function is a different function to the global-outside-of-any-function space.

Answer 2

So whenever you are using arrow function anywhere it will not have this of its own because it will refer this from its parent function(to be simple).

So in first case its referring this of window and hence undefined .

In second case is referring 'this' of constructor and hence '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();

I wanted to bring up this example because I thought it was quite interesting -- this isn't meant as an answer to your question directly, but just some additional info.

People were talking about how defining it inside the constructor makes the this property refer to the object itself -- because that's what this means in a constructor, So I wanted to see what would happen if you define an arrow function in the way I've done above, with getName2 -- it's not in the constructor, but it still gets this defined as the object itself. So... why?

Well, it turns out when you define arrow functions in that manner, it actually DOES end up being defined in the constructor. I think there's some kind of code hoisting going on with arrow functions like that. You can actually verify it by trying to change the function on the prototype:

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

You can't change the function of getName2 via the prototype, because that function actually gets defined in the constructor behind the scenes.