ES6 class field arrow functions scoping problem

Question

I assigned my arrow function to outside variable.But I did not understand why this is refer to 'Animal' constructor. When I called function 'fun' it printed 'Animal, true'. But I thought it would print 'Window, false'.

function Animal() {
  this.sleep = () => {
    console.log(this, this instanceof Animal)
  }
}

let animal = new Animal();
animal.sleep(); // Animal, true

let fun = animal.sleep
fun = animal.sleep;
fun() // Animal, true -- why?

@NeelRathod OP means "Original Poster" – Arup Rakshit Aug 24 '19 at 20:44 — Arup Rakshit, Aug 24 '19 at 20:44
@ArupRakshit Thanks for sharing a information – Neel Rathod Aug 24 '19 at 20:47 — Neel Rathod, Aug 24 '19 at 20:47

score 2 · Accepted Answer · answered Aug 24 '19 at 21:20

Arrow functions resolve this lexically, just like any other variable. That means the value of this does not depend on how the function is called, but how/where it was defined.

The sleep function is defined inside the Animal constructor function, which is called with new. Therefore this will refer to a new instance of Animal.

ES6 class field arrow functions scoping problem

1 Answers1