In-depth analysis of this keyword in Javascript_javascript skills

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

Function

Copy code The code is as follows:

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

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

As mentioned in my previous article (Javascript scope), for functions defined globally, the owner of the function is the current page, which is the window object.

This is why I put the function in quotes, because the function defined globally is actually a method of the window object.

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

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

Copy the code The code is as follows:

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

After reading the above code, you may think that since the global function is the method of the window object and the global variable is the attribute of the window object (already mentioned in Javasript scope), then in the global function Can global variables be accessed through the this keyword?

The answer is yes, if you call the introduce function, you will know me as Laruence.

Event handler function

Perhaps, most of the confusion about this keyword comes from using functions (methods) in event processing.

Copy code The code is as follows:

For example, we now need to display the value of the name input box when clicking on the "name" input box. Then, you can write the following code:

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

The above code , runs normally, but why? Doesn’t it mean that the this pointer of a function always points to the function owner? Doesn’t it mean that the owner of global variables is the window object?

Haha, if you can think of this question, it means you are reading my article seriously. Otherwise, I suggest you read it from the beginning, otherwise you will still be confused after reading it~

Well, 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.

We know that everything in JS is an object, and functions and methods are also properties of objects, except that functions have executable internal properties. Therefore, for the above code, when binding the processor to onclick, it actually assigns a value to the onclick attribute of the input box Dom object with the id of name.

In other words, we give the function showValue Copy to the onclick attribute of the name input box object. If we look at the onclick at this time:

Copy code The code is 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 will be called. At this time, the this keyword will naturally point to the name input box.

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

Copy the code The code is as follows:

function showValue() {
alert(this.value);
}

cannot run normally, why is this?

Well, Because at this time, it is not an assignment, but a reference.

If we pay attention to the two ways of writing onclick, you will find that for the previous method, we used:

dom.onclick = showvalue; //No caller

As for the method just now:

onclick = "showvalue()" //There is a caller

This can also reflect the difference between the two: for the former, it is assignment, while for the latter, it is reference. If we look at the onclick attribute of the input box at this time, we get:

alert(dom.onclick);

See the difference? You can understand why, right?

Speaking of this, there is a very interesting example. You can try it under IE:

Change the pointing of this

So, now that we know why, how can we make this point to where we want it to point?

For the above event processing function, we can write it in the following ways:

dom.onclick = showValue();
dom.onclick = function() { alert(this.value) ;}
//Think about our quote just now and how to embed 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 pointer of this keyword.

For example:

Copy code The code is as follows:

var laruence = {
name : 'laruence',
age : 26,
position : 'Senior PHP Engineer',
company : 'Baidu.inc'
};

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

introduce.call(laruence);