[Translation] PPK talks about this keyword in Javascript

Document directory

• Example-copy
• Example-point
• Integration

Original: javascript-The this keyword

In JavaScript, this is one of the strongest keywords. This post tells you how to make good use of this.

The following describes how to configure the event handling
(Event processing) use it, followed by other usage of this.

Owner)

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 owner of the function being executed. Or, it is a method that points to the function object.

Defined in the page
When dosomething () is a function, its owner is a page. Specifically, it refers to the window object (Global Object) of JavaScript ).

While
The onclick attribute belongs to all HTML elements.

This ownership of all rights is the result of the Javascript Oo (Object-Oriented) feature. When you associate an object with an array
The page contains more information.

------------ Window --------------------------------------
| // |
|
| This |
| ---------------- |
| HTML element | <-- This ----------------- |
| ---------------- | Dosomething () |
| --------------- |
| ------------------ |
| Onclick attribute |
| ------------------ |
|
----------------------------------------------------------

Here, when dosomething () is executed, the keyword "this" points to window. This function will change the style. Color of window.

Window does not have the style object, so this function will cause JavaScript errors.

Copy)

Therefore, if you want to make good use of this, continue to look at it. As in the previous example used in a function, this points to the HTML element to which it belongs.

That is to say, there is a function copy pointing to the onclick attribute. Let's take a look at traditional event registration
.

element.onclick = doSomething;

The function is its entire copy, pointing to the onclick attribute (now the method is changed ). Therefore, when event processing is executed, this points to the HTML element and changes the color.

------------ Window --------------------------------------
|
|
|
| ---------------- |
| HTML element | <-- This ----------------- |
| ---------------- | Dosomething () |
| --------------- |
| ----------------------- |
| Copy of dosomething () | <-- Copy function |
| ----------------------- |
|
----------------------------------------------------------

In this way, we can copy functions to process 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 "all" of dosomething ").

Point to (referring)

If you use in-row event registration
What about it?

<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 (), this keyword points to the global window object again,

The function returns an error message.

------------ Window --------------------------------------
| // |
|
| This |
| ---------------- |
| HTML element | <-- This ----------------- |
| ---------------- | Dosomething () |
| --------------- |
| ----------------------- // |
| To dosomething () |
| Execute it in | ---- points 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.

Even if 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
It creates a point to the 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 ){
// Send it to the function during event processing
// OBJ points to the HTML element, so you can do this
OBJ. style. Color = '# cc0000 ';
}