2.’this’ Context

What it is

As a javascript developer you might have come across this strange thing, ‘this’ keyword. There are lot of fancy definitions which are available when you google it. If i start explaining those, i’m sure the title of this book won’t possess any meaning. So let’s get dirty.

Say you having an js file and you declare a global variable in it like below.

1 var variable1=true;

Now, what the above statement will really do.

1 console.log(window.variable1); //result: true

variable1 is now part of window object when you declare it in global context.Now consider the below statement.

1 console.log(this);  //result: window {...}

At global level the value of ‘this’ is window object which is the top most object.To be more clear consider the following code.

1 function foo()
2 {
3     console.log(this);
4 }
5 
6 foo(); //or window.foo();
7 //result: window {...}

foo is part of window object, and when foo is called you are actually using window object to call the method. so the ‘this’ context inside the foo at the time of execution is window object.

Context of function inside an object

In general,

1 var obj={
2     foo:function()
3     {
4         console.log(this);
5     }
6 };
7 
8 obj.foo(); //result: obj {...}

when you call a function which is part of an object like above, the ‘this’ context will be the object holding that method. so the value of ‘this’ is depends up on how and through which object the function is invoked.

Similarly when you attaching an event handler to an event , the ‘this’ context at the time when the handler function invoked by event is window object. since during the system event call the handler will invoked in the context of window object.

Early Binding

When a function is invoked there are two things which come into picture, context and arguments, context is the value of this inside that function and arguments is the parameters passed to that function. We going to have deep look at the this context that is available inside the function and how that can be changed.

Consider the below code,

1 function foo()
2 {
3     console.log(this);
4 }
5 
6 foo();  //result:window

In the above code the value of this at the time foo invoked is window, why ?

Because foo is now part of window object, and when you invoke foo, you are actually using window object to invoke it like below.

1 window.foo(); // this is same as foo()

So the value of this at the time foo invoked is window object. The value of this for that function can be changed, this technique refer to as early binding and late binding.

What is early binding ?. When function is defined this context for that function can be fixed. so regardless of how the function is invoked this context remains same for that particular function.

In other words,We can set the this context for the function with the whatever objects we want. Consider the below code.

1 var obj={};
2 
3 function foo()
4 {
5     console.log(this);
6 }.bind(obj);    //this context is fixed as obj for this function
7 
8 foo();          //result: obj

bind function is used to fix the this context of the function to any object. In the above example the function foo’s this context is bind to the object obj. so at any point of time the value of this inside the foo will be obj.

Late Binding

Similar to early binding , late binding also used to fix the this context inside the function, but in a different way. Consider the below code

 1 var obj1={};
 2 var obj2={};
 3 
 4 function foo()
 5 {
 6   console.log(this);
 7 }
 8 
 9 foo.apply(obj1);    //result: obj1
10 foo.apply(obj2);    //result: obj2

Unless like early binding, late binding technique used to fix the this context at the time when function invoked. In the above example the apply method is used to invoke the function foo and obj1,obj2 is passed as this context to that function during the time of invoke and this is refer to as late binding.