How exactly does javascript set context for objects created from constructor function using the new keyword

Question

Consider the following constructor function having a method logging the context

function Foo() {
  this.logContext1 = () => console.log('logContext1', this);
}

let foo = new Foo();

foo.logContext2 = () => console.log('logContext2', this);

foo.logContext1();
foo.logContext2();

logContext1 has context (this) set to the Foo object created by new,

whereas logContext2 has context (this) set to the window object

Considering both are arrow functions, why do we see this difference?

score 1 · Accepted Answer · answered Jun 27 '22 at 19:33

1

this is defined where the arrow functions are declared:

() => console.log('logContext1', this) is declared in the constructor, this is the object being created in that context
() => console.log('logContext2', this) is declared on top-level, this is window in that context (or undefined in strict mode)

answered Jun 27 '22 at 19:33

Guerric P

30,447
6
48
86

so in case of arrow functions, `this` binding depends where it is declared / defined rather than how it is called – Akshay Jun 27 '22 at 20:00
Well yes, exactly – Guerric P Jun 28 '22 at 08:28

How exactly does javascript set context for objects created from constructor function using the new keyword

1 Answers1