JS: If you call the function, the result is 3, but if you bind the context with f.call(f) - the result is 5

Question

var f = function() {
  this.x = 5;
  (function() {
    this.x = 3;
  })();
  console.log(this.x);
};

var obj = {
  x: 4,
  m: function() {
    console.log(this.x);
  }
};

f(); // 3
new f(); // 5
f.call(f); // 5
obj.m.call(f); // 5

If you call the function, the result is 3, but if you bind the context with f.call(f) - the result is 5. Also, if I call the functions as a constructor. Why it happens? Sorry for the stupid question, but I tried to find the answer, but could not.

Answer 1

• In the first case, you call f() as a simple named function. So the this keyword inside of it refers to the global scope (the window).

  Consequence: the this inside the function body and the this inside the closure inside the function body point to the same object: the window.

• In the second case you call f() as a constructor, so the this keyword will point to the created object. But the closure, as it's anonymous, will keep refering to the global scope with this, so in this case they don't point to the same thing and the object created by the constructor f() is not mutated by the closure.

• In the 3rd case, you call f like the first time but specifying the value of this as being the function f itself. So the behavior of this here is equivalent to the second case.

• In the 4th case, you call m using the context of f, so the this.x will refer to f for this, and the closure inside f keeps refering to the window.