How to use this in JS

This is one of the most powerful keywords in JavaScript. Unfortunately, if you don't know exactly how it works, you'll have a hard time using it correctly.

This is an important concept in Object-oriented languages. In large languages ​​such as JAVA and C#, this fixedly points to the current object at runtime. But in javascript, due to the dynamic nature of javascript (interpretation and execution, of course, there is also a simple pre-compilation process), the point of this is determined only at runtime. This feature not only brings confusion to us, but also brings freedom and flexibility in programming. Combined with the apply (call) method, it can make JS extremely powerful.
2. Changed this
In JavaScript, this usually points to the function itself that we are executing, or to the object to which the function belongs (runtime). When we define the function doSomething() in the page, its owner is the page, or the window object (or global object) in JavaScript. For an onclick attribute, it is owned by the HTML element to which it belongs, and this should point to the HTML element.
2.1 Changes to this in several common scenarios
Function examples

function doSomething () 
{ 
alert(this.navigator); //appCodeName 
this.value = "I am from the Object constructor"; 
this.style.backgroundColor = "# 000000"; 
}

1. (A) When called directly as a normal function, this points to the window object.
2. (B) When triggered as a control event
1) inline event registration. Register the event directly. Written in HTML code (onclick=”doSomething()”>), at this time this points to the window object.
2) Traditional event registration Traditional event registration (DHTML method).
Form like element.onclick = doSomething; At this time this points to the element object
3) 3. (C) When used as an object, this points to the current object. The form is: new doSomething();
4. (D) When using the apply or call method, this points to the passed object.
Form: var obj={}; doSomething.apply(obj,new Array(”nothing”); //thisàobj

Let me explain how to handle eventsUse this in, I will attach some examples related to this later
Owner
The question we will discuss in the next article is: what does this refer to in the function doSomething(). ?
Javascript code
function doSomething() {
this.style.color = '#cc0000';
}
function doSomething() {
this.style.color = ' #cc0000';
}
In JavaScript, this usually points to the function itself that we are executing (Translator's Note: Use owner to represent what this points to), or to the object to which the function belongs. . When we define the function doSomething() in the page, its owner is the page, or the window object (or global object) in JavaScript. For an onclick attribute, it is owned by the HTML element to which it belongs. It should point to the HTML element.
This kind of "ownership" is a way of object-oriented in JavaScript. You can see some more information in Objects as associative arrays
##If we are in. If doSomething() is executed without any further preparation, the this keyword will point to window, and the function attempts to change the window's style.color. Since window does not have a style object, this function will unfortunately fail and generate a JavaScript error. .
Copying
So if we want to make full use of this, we have to pay attention that the function using this should be owned by the correct HTML element. In other words, we should copy this function to our onclick event attribute. registration will care about it.
Javascript code
element.onclick = doSomething;
element.onclick = doSomething;
This function is completely copied to the onclick attribute (now it becomes a function). The handler is executed, this will point to the HTML element, and the color of the element is changed.

This method allows us to copy this function to multiple event handlers. This will point to the correct HTML element every time:

This way you can maximize the use of this. Whenever this function is executed, the HTML elements pointed to by this respond to the event correctly, and these HTML elements have a copy of doSomething().
Referring
However, if you use inline event registration (inline event registration)
Javascript code


You will not be able to copy this function! On the contrary, this difference is very critical. The onclick attribute does not contain an actual function, just a function call.
Javascript code
doSomething();
doSomething();
So, it will state "go to doSomething() and execute it". When we reach doSomething(), the this keyword points to the global window object again, and the function returns
error message.
The difference
If you want to use this to point to the event that the HTML element responds to, you must ensure that the this keyword is written in the onclick attribute. Only in this case does it point to the HTML element registered by the event handler.
Javascript code
element.onclick = doSomething;
alert(element.onclick)
element.onclick = doSomething;
alert(element.onclick)
You will get
Javascript code
function doSomething() {
this.style.color = '#cc0000';
}
function doSomething() {
this.style.color = '#cc0000';
}
As you can see, the this keyword is displayed in the onclick function, so it points to the HTML element.
But if
Javascript code is executed

alert(element.onclick)

alert(element.onclick)
You will get
Javascript code
function onclick() {
doSomething()
}
function onclick() {
doSomething()
}
This is just a reference to the doSomething() function. The this keyword does not appear in the onclick function, so it does not point to the HTML element.
Example--Copy
In the following example, this is written into the onclick function:
Javascript code
element.onclick = doSomething
element.addEventListener('click', doSomething, false )
element.onclick = function() {this.style.color = '#cc0000';}

element.onclick = doSomething
element.addEventListener('click', doSomething, false)
element.onclick = function() {this.style.color = '#cc0000';}

Example--Quote
In the following situation, this points to window:
Javascript code
element.onclick = function() {doSomething()}
element.attachEvent('onclick', doSomething)

element.onclick = function() {doSomething()}
element.attachEvent('onclick', doSomething)

Pay attention to the appearance of attachEvent(). The main drawback of the Microsoft event registration model is that attachEvent() creates a reference to the function instead of copying it. So sometimes it's impossible to know which HTML is handling the event.
Combined use
When using inline event registration, you can send this to the function so that it can be used normally:
Javascript code

function doSomething(obj) {
//This appears in the event handler and is sent to the function
//obj points to the HTML element, so it can be like this:
obj.style.color = '# cc0000';
}

The above is the detailed content of How to use this in JS. For more information, please follow other related articles on the PHP Chinese website!