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 (4ab857bcb500ec89779e0bdb125daee0), 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) 2dd672b09d651419972bf36d6897a144
f850ef7fdfa5fc526f8794325edf1b64
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
ebb33dbdce0067599b7e19b0bfb3b891
alert(element.onclick)
ebb33dbdce0067599b7e19b0bfb3b891
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';}
e51a0000e89462dfdb5a61f94f6bc2bb
element.onclick = doSomething
element.addEventListener('click', doSomething, false)
element.onclick = function() {this.style.color = '#cc0000';}
223b41ffa10c20bccd574b9a420408e4
Example--Quote
In the following situation, this points to window:
Javascript code
element.onclick = function() {doSomething()}
element.attachEvent('onclick', doSomething)
ebb33dbdce0067599b7e19b0bfb3b891
element.onclick = function() {doSomething()}
element.attachEvent('onclick', doSomething)
ebb33dbdce0067599b7e19b0bfb3b891
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
d46b418127a7f8656d10fc8c636ec4e4
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!