Javascript this keyword in depth analysis

First, let me throw out a verdict: "in Javascript, This keyword always points to the owner of the function (method)."

function

function introduce() {
     alert("Hello, I am Laruencern");
}

For this function, who does the this keyword point to?

As I explained in the previous article (Javascript scope), a function is defined globally, and the owner of the function is the current page, which is the window object.

That's why I put the function in quotes, because a function defined globally is just a method of the window object.

So we can call it directly from the function name, or from the window. method name, where the this keyword in the method points to its owner: window object.

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

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

Looking at the code above, you might think that since global functions are methods of the window object and global variables are properties of the window object (described in the Javasript scope), you can use this keyword to access global variables in global functions.

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

Event handler

Perhaps most of the confusion with this keyword comes from using functions (methods) for event handling.

<input id="name" type="text" name="name" value="Laruence" /> For example, we need to click now." name "When you type in the box, it displays name The input field value . Then, write the following code: 
function showValue() {
     alert(this.value);
}
document.getElementById('name').onclick = showValue;

The above code works fine, but why? Doesn't this pointer to a function always point to the function owner? I mean the owner of a global variable is a window object?

Ha ha, if you can think of this problem, that shows you are seriously reading my article, otherwise, I suggest you start from the beginning, otherwise read, you are still confused ~

Yes, for the above code, showValue is defined in the global object, so it seems that the problem can only occur when the onclick event is bound.

As we know, everything in JS is an object, and functions and methods are properties of objects, except that functions have executable internal properties. So, for the above code, when you bind the onclick handler to the onclick, you are actually assigning the onclick property of the input box Dom object with id name.

That is, we give the function showValue Copy to the onclick property of the name input field 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);

So, when the event fires, the onclick method of the name field is called, and the this keyword naturally points to the name field.

But here's the puzzle:

function showValue() {
     alert(this.value);
}
<input id="name" type="text" name="name" value="Laruence" onclick="showValue()"/>

It doesn't work. Why is that?

Well, because at this point, it's not an assignment, it's a reference.

If we notice the two ways of writing onclick, you will see that for the previous method, we used:

The dom. The onclick = showvalue; // has no callers

For the method just described:

Onclick = "showvalue()" // has a caller

This also reflects the difference in profile: for the former, it is an assignment, while for the latter it is a reference. If we look at the onclick property of the input field at this time, we get:

Alert (dom. Onclick);

See the difference? Does that make sense?

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

< Img SRC = "XXX" onerror = "alert (1); () function hi {alert (2); } "/ >

Change the point of this

So, now that we know why, how do we get this to point where we want to point?

For the above event handler, we can write it as follows:

The dom. The onclick = showValue ();
Dom. Onclick = function() {alert(this.value); }
< Input onclick = "alert (this value);" / > // think about how we inserted this sentence in our quote.
Dom. AddEventListener (dom, showValue, false); / / ff only

For situations that are not event handlers, we can use apply, or call, to change the direction of this keyword.

Such as:

var laruence = {
    name : 'laruence',
    age : 26,
    position : 'Senior PHP Engineer',
    company : 'Baidu.inc'
};
function introduce() {
    alert(this.name);
}
introduce.call(laruence);