Shulou(Shulou.com)06/03 Report--

This article mainly explains the "detailed introduction of the this keyword in Javascript". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "the detailed introduction of the this keyword in Javascript".

Function

First, let's look at the "function":

Function introduce () {alert ("Hello, I am Laruence\ r\ n");}

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

As I mentioned in my previous article (Javascript scope), the function is defined globally and the owner of the function is the current page, that is, the window object.

That's why I put the function in quotation marks. Because the function defined globally is actually a method of the window object.

Therefore, we can either call directly through the function name or through window. Method name, where the this keyword in the method points to its owner: the window object.

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

Var name = "I am Laruence"; function introduce () {alert (this.name);} alert (window.introduce); / * output:* function introduce () {* alert (this.name); *} * /

After looking at the above code, you may think that since the global function is the method of the window object, and the global variable is the property of the window object (already mentioned in the Javasript scope), you can access the global variable through the this keyword in the global function, right?

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

Event handling function

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

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 above code works fine, but why? Isn't it said that the this pointer of a function always points to the owner of the function? Didn't you say that the owner of the global variable is the window object?

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

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 in Js, everything is an object, and functions and methods are object properties, but functions have executable internal properties. So, for the above code, when you bind the processor to onclick, you actually assign a value to the onclick property of the input box Dom object in which id is name.

That is, we give the function showValue Copy to the onclick property of the name input box object. If we look at the onclick at this time:

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 called, and the this keyword naturally points to the name input box.

However, confusing things come, such as the following:

Function showValue () {alert (this.value);} change the direction of this

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

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

Dom.onclick = showValue (); dom.onclick = function () {alert (this.value);}

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.