Strange change of Context in following example

Question

I tried the following example but the 2 types console is returning 2 different results. I expected my custom object to be returned on both occasions, but result seems a bit strange. Can someone explain the outcome?

<html> 
<head> </head> 
<body> 
<script>
var obj1 = {
 printThis: function() {
  console.log(this);
 }
};

obj1.printThis(); //refers to my custom object

var func1 = obj1.printThis;
func1(); //refers to window object
</script>
</body> 
</html>

Result:

While the first console returns Custom Object, 2nd returns the Window Object (though at StackOverflow due to their own anonymous function wrapper some other object it may refer to). But, in Chrome the 2nd console provides reference to the Window Object.

Second function call is closure, where this refer to global object reference. First function call is refer to current object instance. — VIJAYABAL DHANAPAL, Nov 30 '17 at 10:38
@VIJAYABALDHANAPAL - But, it is running from inside custom object, then 'this' must have referred to the custom object. Why referring to 'window' object? — Deadpool, Nov 30 '17 at 10:39
Second function call is in global space. obj1.printThis()->This refers current object. — VIJAYABAL DHANAPAL, Nov 30 '17 at 10:41

Mamun · Accepted Answer · 2017-11-30T11:16:26.850

The output is different because of the context or environment in which the function (printThis) is executing. In first case, function's execution context is inside of obj1. But in the second case, function is executing in the global context or environment.

If you want to execute the second function call to be executed inside obj1, you have to bind it explicitly like: obj1.printThis.bind(obj1).

var obj1 = {
 printThis: function() {
  console.log(this);
 }
};

obj1.printThis(); 

var func1 = obj1.printThis.bind(obj1);
func1();

Strange change of Context in following example

1 Answers1