lexical this and closures

Question

I'm trying to understand how the arrow function passed to setTimeout, remembers the value of this from the previous execution context. I know that the this value is looked up using lexical scoping rules when executing arrow functions. Does that mean the arrow function closes over variables and the this keyword?

var obj = {
  name: 'TestName',
  func: function() {
    console.log(this)
    setTimeout(() => console.log(this), 1000)
  }
}

obj.func() //{name: "TestName", func: ƒ}

In normal functions `this` is *not* looked up using lexical scoping rules. Arrow functions change this and save `this` in the closure. — Barmar, Jun 27 '18 at 18:58

score 0 · Answer 1 · answered Jul 03 '18 at 12:29

Actually the whole point of using the fat arrow notation is to inherit the parent scope. Main application of arrow functions is to pull down the parent scope. When we invoke a setTimeout the chain happens as follows-:

Call goes into Call-Stack.
It is transferred to Web-Browser api space, which waits till the interval time.
Now after interval time is completed it'll be handled by Event-Loop which will transfer it to JS-queue.
The command execution will wait till other items in queue finish executing and then it'll transfer the execution flow again to Call-Stack whenever it is empty.
Now the command inside setTimeout will be executed.

JS execution flow

score 0 · Answer 2 · answered Jul 03 '18 at 12:47

0

Does that mean the arrow function closes over the this keyword?

Yes, that's exactly what happens.

answered Jul 03 '18 at 12:47

Bergi

630,263
148
957
1,375

lexical this and closures

2 Answers2