This keyword in JavaScript

11:28 AM Xun 1 Comments

"This" is a very important word, even my son knows. My son is nearly 2 years old, he uses the this keyword all the time. This, this! I want this! He says, he cries. Sometimes he points, so we'd have no problem figuring out what this is; Other times, he does not, which we'd soon be out of our wits guessing, and we get frustrated quickly.

Turned out in JavaScript, this is as important and frustrating as it is widely almost overly used. Understanding this is a key in correctly using JavaScript.


The Window Object
this without a context, or this in a normally functional call, refers to the window object, the container / owner of all. Try the following code:


function WhatIsThis() {
alert("This is " + this);
}





The DOM Element

This is often attached to an DOM element for event handling, click, key up, key down, etc. Do anyone still use those inline event handlers as the following ?

click me



In the above, the owner of this is the link being clicked.

Inline event handler has become pretty much a thing of the past. In JQuery, we often handle event as such:

$("p").click(function () {
$(this).slideUp();
});
$("p").hover(function () {
$(this).addClass("hilite");
}, function () {
$(this).removeClass("hilite");
});

And this is tied directly with the dom element that triggered the event.


Functions

Many, many times, What this means completely depends on how a function is used. And functions can be used in many, many ways.

Functions inside of an object as a member methods


Object in JavaScript is as versatile and overreaching as a function. When you define a function inside an object, it becomes a member method for the object. And if you say this inside the method, this refers to the object, who "owns" the method.


var Person = {
message: this.message + " This is me",
displayMessage: function () {
alert(this.message);
}
};

Person.displayMessage();






Function as constructors


Functions can be used as constructors. For example, the above can be rewritten in the following fashion:


function Person(message) {
this.msg = message;

this.displayMessage=function () {
alert(this.msg);
};
}

var p1 = new Person("hi, how are you");

p1.displayMessage();





.apply() and .call()


So what this refers is really up to the context. What if we really want to get this right done to the object in a global context? ...?? Sorry, not being clear, so illustrated in code:

var p1 = { message: "hi here is P1 talking" };

function displyaMessage(message) {
alert(message + this.message);
}

displyaMessage(p1, "Who is talking?");

What would you get for this in the above function? Undefined!!!

Wouldn't be nice if you can make sure this actually refers the object itself (p1) instead of the window object? JavaScript
.call() or .apply() can do just that.

Now try the following:


var p1 = { message: "hi here is P1 talking" };

function displyaMessage(message) {
alert(message + this.message);
}


displyaMessage.call(p1, " Who is talking?");

displyaMessage.apply(p1, [" Who is talking"])





viola!

.apply() and .call() do the magic. With them, the this keyword is grounded to the object that is supplied to the function call as the first argument.

.apply() and .call() work similarly, the only difference is that .apply take array in the second argument, works nicely when you have to supply multiple parameters to the constructors.

So much about this!

Source:
Scope in JavaScript

1 comment:

  1. "Hello,
    This is really great information found here, I really like your blog. Thanks very much for the share. Keep posting."

    PIC Scheme Singapore

    ReplyDelete