‘this’ keyword in javascript

One of the confusing part of javascript is the use of keyword this. In fact the this is used a in a little bit different way in javascript than it is used in other programming languages. Also the behavior of this differs in strict and non-strict mode. As a result the scope in javascript is a separate thing to learn for developers coming from other programming language environments.

Generally saying this represents the ‘owner’. For example if the function is called from the context of an object then this represents the object. Didn’t get?? Lets take an example.

this when called as an object’s method

Consider the following piece of code.

Note:- You can see the result from the Result tab

In the above example this inside function printer is referred to the javascript object myObj. So this.x is same as myObj.x. But how came it behave in this way? The last line in the example(myObj.printer();) is responsible for it. See the function printer belongs to object myObj. In other words myObj is the owner of the function printer; and the last line of example is like ‘owner’.printer(). So as we said earlier this represents the ‘owner’ which means this.a = ‘owner.a’.
There is another thing to note; the value of this is not depend on the declaration but on when it is called. ie. even if the function printer is not a property of object myObj at the time of declaration, this can produce the same result. See the example below.

In the example given above, the function independentPrinter is not a property of object myObj at declaration. It is just made objects property by the code myObj.printer = independentPrinter;. But again same result is produced. So we can say that the value of this is determined only when it is called and not when it is declared.

There are some situations in which this can get value from two places in which it chooses the immediate member reference.
See the following example.

Note:- You can see the result from the Result tab

In the example shown above myObj.anotherProperty.printer and myObj.printer are same as both are referring to the same function(function independentPrinter()). From previous example we know calling myObj.printer() will alert 5 which is the value of property x. But here when we call myObj.anotherProperty.printer() we will get 10 which is again the value of property x; but this time this choses the immediate x value (See myObj.anotherProperty has its own xwith value 10) and hence we get 10.

this when called as a function

Ok, now just leave the object. What happens if this is accessed in an independent function and called without any reference to an object? Look at the code below.

Click on the Result tab and see the result. You can see an alert with value [object Window]. What does this mean? The Window represents the global context.
So if there is no specified ‘owner’ for function, this will represent the global context ‘window’. But again this behaves differently in ‘strict’ mode. To see the difference, see the code below.

So in ‘strict’ mode this is undefined if there is no context associated when the function is called. In non-strict mode this refers to the global context(window object) for the same situation.

this with constructor

When a function is created as constructor with new keyword, this associates with new object created.
Consider the following piece of code.

As we said before, this refers to the calling context. Here calling context is myFrined which is an instance of MyFriend. And note that this refers to the ‘entire object’ (created when var myFrined = new MyFriend('javascript'); is executed). That is why this can get the value of name.

this on DOM events

What happens to this when it is on a DOM event? The answer is; it depends on how you register DOM events. Lets see the two ways of DOM event registration and how this behaves in those situations.

A. this and inline event registration

Following piece of code is an example of inline DOM event registration.

Note:- click on the JavaScript tab to see the javascript function and click on Result tab to see the button is rendered. Click on the button to see the actual result.

So if the event is registered inline, the function call to the handler method (here it is clickHandler) is a kind of ‘reference’. Means it is like simply saying to ‘go to clickHandler and execute it’. So in the clickHandler this doesn’t represent the calling function and instead it represents the global context.

B. this and traditional DOM event handler

Lets write some codes first and check.

Note:- click on the html tab to see the html code defining the button and click on Result tab to see the button is rendered. Click on the button to see the actual result.

Upon executing the above code and click on the button, you can see the alert as object HTMLButtonElement. So this represents the ‘button’ here. So traditional style of event handling is the only way to make this represents the actual event firing DOM element.

Ok, till now we were seeing this was determined by the calling context. What should we do if we need to specify the context(or what should be the value of this) explicitly? Well!! we got some options.

The ‘call’ method

‘Call’ method allows us to specify the context along with actual function call. See the example below.

‘call’ method needs a list of parameters out of which first one is the context in which the actual function should be executed.If there is only one parameter, that would be considered as context.

The ‘apply’ method

‘Apply’ method is same as that of ‘call’ except that it accepts an array of arguments instead of a list. See the example below.

The ‘bind’ method

The other way to bind this permanently to a context is to use ‘bind’ method. See the usage of ‘bind’ below.

Here, there are two calls to alert the property name(last two lines in the example). But the ‘owner’ of two methods(showFriend and myFriend) are testObject and it has a property name with value test name. But still the second alert shows javascript. We have already know the ‘owner’ determines the this from the first section of this article. But here the last line of this example behaves differently. How this happened? The answer is in the code itself. See the code var myFriend = showFriend.bind which sets the context for the method showFriend with value javascript for the property name.
The ‘bind’ accepts a context for the function to which it should be bound to and when ever we uses this bound function it executes in the context to which it is bound to.

Thats it!!!.

Leave a Comment

Your email address will not be published. Required fields are marked *