PPK: this keyword of JavaScript [translation]

Next, let's talk about how to use this in event handling, followed by other usage of this.
Yourself

Let's take a look at what this points to in the doSomething () function?

function doSomething() {  this.style.color = '#cc0000';}

This in JavaScript always points to the running function "self ". That is to say, it is a method that points to a function object. Define the doSomething () function on the page, which itself refers to the page. That is to say, it refers to the window object (Global Object) of JavaScript ). The onclick attribute itself belongs to the HTML element.

This "ownership" is the consequence of the JavaScript OO (Object-Oriented) feature. The page for associating objects with arrays contains more information.

------------ window --------------------------------------|                     / \      ||                      |      ||                     this     ||  ----------------            |      ||  | HTML element | <-- this     ----------------- ||  ----------------   |      | doSomething() | ||        |     |      ----------------- ||     --------------------             ||     | onclick property |             ||     --------------------             ||                            |----------------------------------------------------------

If doSomething () does not have any reserved relationship during runtime, the keyword "this" points to window, and this function will change the style. color of window. Window does not have objects such as style, so this function will cause JavaScript errors.

Copy)

Therefore, it is difficult to make good use of this. For example, in the above example used in a function, it should point to the HTML element "yourself ". In other words, there is a function copy pointing to the onclick attribute. Let's look at the registration of traditional events.

element.onclick = doSomething;

Because function copy all points to the onclick attribute (now the method is changed), this points to the HTML element and changes the color when the event is processed.

------------ window --------------------------------------|                            ||                            ||                            ||  ----------------                   ||  | HTML element | <-- this     ----------------- ||  ----------------   |      | doSomething() | ||        |     |      ----------------- ||     -----------------------     |      ||     |copy of doSomething()| <-- copy function  ||     -----------------------            ||                            |----------------------------------------------------------

This allows us to copy functions for multiple events. Each time this points to the correct HTML element:

------------ window --------------------------------------|                            ||                            ||                            ||  ----------------                   ||  | HTML element | <-- this     ----------------- ||  ----------------   |      | doSomething() | ||        |     |      ----------------- ||     -----------------------     |      ||     |copy of doSomething()| <-- copy function  ||     -----------------------     |      ||                      |      ||  -----------------------         |      ||  | another HTML element| <-- this    |      ||  -----------------------   |      |      ||        |        |      |      ||     -----------------------     |      ||     |copy of doSomething()| <-- copy function  ||     -----------------------            ||                            |----------------------------------------------------------

Each time a function is called, this points to the HTML element of the currently processed event (copy of "yourself" doSomething ).

Point to (referring)

What if I use in-row event registration?

<element onclick="doSomething()">

There is no copy function here, But it points to it. What is the difference? This onclick attribute does not contain the actual function, but is just a function call.

doSomething();

The above means: "execute it in doSomething ". In doSomething (), if this keyword points to the global window object again, the function returns an error message.

------------ window --------------------------------------|                     / \      ||                      |      ||                     this     ||  ----------------            |      ||  | HTML element | <-- this     ----------------- ||  ----------------   |      | doSomething() | ||        |     |      ----------------- ||     -----------------------     / \      ||     | go to doSomething() |     |      ||     | and execute it   | ---- reference to   ||     -----------------------    function    ||                            |----------------------------------------------------------

Different?

If you use this to access HTML elements to process events, you must be sure that it is actually written into the onclick attribute. The event processing that points to the HTML element is registered. If you do this:

element.onclick = doSomething;alert(element.onclick)

The result is:

function doSomething(){this.style.color = '#cc0000';}

You can see that the this keyword is in The onclick method. It points to HTML elements.

But if you do this:

<element onclick="doSomething()">alert(element.onclick)

The result is:

function onclick(){doSomething()}

Here we only point to the function doSomething (). The this keyword is not in The onclick method. It does not point to HTML elements.

Example-copy

In the following example, this is written to The onclick method:

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

Example-point

In the following example, this points to window:

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

Note the above attachEvent. Its disadvantage is that the Microsoft Event registration model creates a function pointing to this function and does not copy it. So sometimes it is impossible to figure out which HTML is currently processing the event.

Integration

When using in-row event registration, you can also send this to the function. So it can be used as follows:

<element onclick="doSomething(this)"> function doSomething(obj) {// this is present in the event handler and is sent to the function// obj now refers to the HTML element, so we can doobj.style.color = '#cc0000';}