JavaScript this keyword deep parsing _javascript tips

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

Function

Copy Code code as follows:

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:

Copy Code code as follows:

var name = "I am laruence";
function introduce () {
alert (this.name);
}
alert (window.introduce);

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.

Copy Code code as follows:

<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:

Copy Code code as follows:

function Showvalue () {
alert (this.value);
}
document.getElementById (' name '). onclick = Showvalue;
Alert (document.getElementById (' name '). onclick);

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:

Copy Code code as follows:

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);

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:

Copy Code code as follows:

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

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

Introduce.call (laruence);