Understanding this and setTimeout in simple Example

Question

In following example I have a couple of surprises:

I am sad, people not even reading question properly before voting it down. JSFiddle wraps variables to set them local. Please, dont show it as a proof in this case! --- And, also someone who was extra clever removed my code and wrapped it in fiddle to show his Great Stupidity to next level!

Snippet:

this.a = 100;
var a = 200;

function b() {
  this.a = 300;
  setTimeout(function() {
    console.log(this.a)
  }, 0);
}
b();
console.log("Hello");
console.log(a);

Result:

Query:

When setTimeout is 0, the first log must be 300. Why do I see Hello printed before? (As function b is executed before "console.log(Hello)".

The 3rd log must have the value "200", as this.a in both lines refers to window.a as this refers to window object in both locations. variable a still hods value as 200.

While chrome shows Hello, 300, 300 Fiddle shows Hello, 200, 300

Any explanations for these 2 phenomenons?

Note: JSfiddle wraps the code in function to set them as local variables, so dont consider it for the current example. Try out in Chrome!

It seems just impossible that `console.log(a);` would give you `300` — adeneo, Sep 15 '16 at 13:04
I did try it out, and I got `200` as expected. The answer to what you're asking, is that `setTimeout` defers execution until the thread is free, even when the timed delay is set to zero. — adeneo, Sep 15 '16 at 13:05
`this` is window so of course `window.a` will set `window.a` — epascarello, Sep 15 '16 at 13:05
Oh, okay, I tried it in a fiddle without global context, what @epascarello said then, `this` is the window inside the function as well. — adeneo, Sep 15 '16 at 13:07
Yep, fiddle shows Hello, 200, 300 - Chrome shows Hello, 300, 300 — Deadpool, Sep 15 '16 at 13:07
[this](http://stackoverflow.com/questions/591269/settimeout-and-this-in-javascript) might help — Rajesh, Sep 15 '16 at 13:13
Within "fiddle" the global `this` isn't `window`. Don't take the behaviour of global stuff within a fiddle environment as canon, it's a very special environment. — deceze, Sep 15 '16 at 13:14
Your whole problem is not being conscious of what `this` is and it's probably not what you think it is in each case. Start logging `this` for more clarity — charlietfl, Sep 15 '16 at 13:15
@adeneo `console.log(a)` will give `300`. What is happening is OP is calling `b()`. This internally calls setTimeout. In it, OP updates `this.a` where `this` is pointing to `window`. Hence `300` — Rajesh, Sep 15 '16 at 13:15
@Rajesh - thank you for the explanation, but I think I got it now. — adeneo, Sep 15 '16 at 13:19

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

As commented,

What is happening is OP is calling b(). This internally calls setTimeout. In it, OP updates this.a where this is pointing to window. Hence 300

Following is a sample where I have wrapped code in IIFE

(function() {
  this.a = 100;
  var a = 200;

  function b() {
    this.a = 300;
    setTimeout(function() {
      console.log(this.a)
    }, 0);
  }
  b();
  console.log("Hello");
  console.log(a);
})()

Explanation

// Here this points to window
this.a = 100;

// variables declared outside any functions are part of global scope (window)
var a = 200;

function b() {
  // this again points to window
  this.a = 300;
  setTimeout(function() {
    console.log(this.a)
  }, 0);
}
b();
console.log("Hello");
console.log(a);

score 1 · Answer 2 · answered Sep 15 '16 at 13:18

1

When setTimeout is 0, the first log must be 300. Why do I see Hello printed before? (As function b is executed before "console.log(Hello)".

No, all "timed out" function executions execute asynchronously. The execution is slotted into the next available time slot after your current snippet has finished. 0 simply schedules it very very soon, it doesn't make it a synchronous call.

The 3rd log must have the value "200", as this.a in both lines refers to window.a as this refers to window object in both locations. variable a still hods value as 200.

This very much depends on what this is initially. When executed in a plain Javascript environment where the initial this is window, all as refer to the same window.a, and the expected result is 300, because that's what it's set to before it's being logged the first time.

While chrome shows Hello, 300, 300 Fiddle shows Hello, 200, 300

The Fiddle environment is special and the initial this is not window.

answered Sep 15 '16 at 13:18

deceze

510,633
85
743
889

1

@Peterson What's "GG"? – deceze Sep 15 '16 at 13:20
CS gamers will no `GG` as `Go Go` – Rajesh Sep 15 '16 at 13:21
@Peterson Never been to [Arkansas](https://www.google.com/maps/place/Dota,+AR+72562/@35.7945186,-100.3427533,5z/data=!4m5!3m4!1s0x87d3e4c65c12881b:0x8995ca56642824a2!8m2!3d35.7945204!4d-91.3779098?shorturl=1), ain't heard that dialect. – deceze Sep 15 '16 at 13:28
Nopse, going to Moscow! – Deadpool Sep 15 '16 at 13:30
1

@Peterson Ah, sure, Дота, Moscow… – deceze Sep 15 '16 at 13:31

Understanding this and setTimeout in simple Example

2 Answers2

Explanation