JavaScript's this keyword

This article address: http://www.laruence.com/2009/09/08/1076.html
Reprint please indicate the source
JavaScript is a very flexible language, and the This keyword is flexible, but because of its flexibility, it is doomed to be difficult to use.


I used this when I would feel uneasy, always worried that it does not know how to point to another place.


In fact, this is because, we do not understand it.


Just recently to Baidu Institute to do "JavaScript advanced-scope/prototype chain" ppt, and swit1983 Netizen also just mention this problem, simply put this part of the content independently summed up, and share with you.


First, I'll throw a conclusion: "In JavaScript, the This keyword always points to the owner of the function (method)."


Function


First, let's look at "functions":


function introduce () {
Alert ("Hello, I am laruence\r\n");
}
For, this function, who does this keyword point to?


As described in my previous article (JavaScript scope), a function defined in the global, the owner of the function is the current page, which is the Window object.


That's why I enclose the function in quotes. Because the function defined in the global is actually a method of the Window object.


So, we can call directly using the function name, or by window. Method name, at which point the This keyword in the method points to its owner: Window object.


If we look at the introduce property of the window, we get:


var name = "I am laruence";
function introduce () {
alert (this.name);
}
alert (window.introduce);
/**
* Output:
* Function introduce () {
* Alert (this.name);
* }
*/
Looking at the code above, you might think that since the global function is the method of the Window object, the global variable is the property of the Window object (already described in the Javasript scope), then the global variable can be accessed through the This keyword in the global function.


The answer is yes, if you call the introduce function, you will know that I am laruence.


Event handler function


Perhaps the most reason for the confusion of this keyword is that the function (method) is used in event handling.


<input id= "name" type= "text" name= "name" value= "Laruence"/>
For example, we now need to display the value of the name input box when we click on the "Name" input box. Then, you can write the following code:


function Showvalue () {
alert (this.value);
}
document.getElementById (' name '). onclick = Showvalue;
The code above, running normally, but why? Not to say that the this pointer of a function always points to the function owner? Is it not that the owner of the global variable is a Window object?


Oh, if you can think of this problem, it means that you are seriously looking at my article, otherwise, I suggest you look from the beginning, otherwise read, you still confused ~


Well, yes, for the above code, Showvalue is defined in the global object, so it seems that the problem can only happen when the OnClick event is bound.


We know that in JS everything is an object, functions and methods are also objects of the property, but the function has executable internal properties. So, for the above code, the OnClick property of the input box DOM object with ID name is assigned to the onclick binding processor.


That is, we gave the function Showvalue Copy to the OnClick property of the Name Input box object. If we look at the onclick at this point:


function Showvalue () {
alert (this.value);
}
document.getElementById (' name '). onclick = Showvalue;
Alert (document.getElementById (' name '). onclick);
/**
* Output
* Function Showvalue () {
* Alert (This.value);
* }
*/
So, when the event is triggered, the OnClick method of the name input box is invoked, and this keyword naturally points to the name input box.


However, the confusing things come, such as the following wording:


function Showvalue () {
alert (this.value);
}
<input id= "name" type= "text" name= "name" value= "Laruence" onclick= "Showvalue ()"/>
is not functioning properly, what is this?


Well, because this time, it's not a assignment, it's a reference.


If we pay attention to both types of onclick, you will find that for the previous method, we used the following:


Dom.onclick = Showvalue; No invoke character
And for the method just now:


onclick = "Showvalue ()"//Has a caller
This can also reflect the difference between the two sides: for the former, is the assignment, and for the latter is a reference. If we view the OnClick property of the input box at this time, we get:


alert (Dom.onclick);
/**
* Output:
* Function onclick () {
* Showvalue ();
* }
*/
Do you see the difference? You know why, don't you?


Here, there is a very interesting example, you can try it under IE:



Change the point of this


So, since we already know why, how can we let this point to where we want to refer?


For the above event-handling functions, there are several ways to write:


Dom.onclick = Showvalue ();
Dom.onclick = function () {alert (this.value);}
<input onclick= "alert (this.value);"/>//think about how our quote was embedded in this sentence.
Dom.addeventlistener (DOM, Showvalue, false); FF only
For situations that are not event-handling functions, we can use apply, or call, to change the point of this keyword.


Like what:


var laruence = {
Name: ' Laruence ',
Age:26,
Position: ' Senior PHP Engineer ',
Company: ' Baidu.inc '
};

function introduce () {
alert (this.name);
}

Introduce.call (laruence);