Arrow function in class

Question

Code 1:

class X1 {
  x = 1;
  get = () => this;
}
a = new X1();
console.log(a.get());

Code 2:

var X1={
    x:1,
    get:()=>this
}
console.log(X1.get())

I don't know why result of code 1 is X1 but code 2 is Window. Hope guys can help me!!

CertainPerformance · Accepted Answer · 2021-03-13 04:15:09Z

5

Class fields are syntax sugar for assigning in the constructor. Code 1 is equivalent to:

class X1 {
  constructor() {
    this.x = 1;
    this.get = () => this;
  }
}

Inside the constructor, this refers to the instance being created - the a. Arrow functions inherit this from their outer scope. So this.get = () => this; results in the returned this being the same as the this in the outer scope - the instance, or the a.

In Code 2, the outer scope is the top level. this on the top level is either the global object (in a browser, that's window), or undefined. So, the arrow function get which returns this returns the this on the top level - in sloppy mode in a browser, that's the window.

answered Mar 13, 2021 at 4:15

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Arrow function in class

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related