PPK talks about JavaScript's this keyword [Translation]_javascript skills

Let’s first talk about how to use it in event handling (event handling), and then talk about other uses of this.

Myself

Let’s first take a look at what exactly this in the function doSomething() points to (refer to)?

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

JavaScript's this always points to the function "itself" that is being run. That is, it is a method pointing to a function object. Define the doSomething() function in the page, itself refers to the page. In other words, it refers to the JavaScript window object (global object). The onclick attribute itself belongs to the HTML element.

This "ownership" is a consequence of the OO (object-oriented) nature of JavaScript. There is more information on the Making objects as associative arrays page.

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

If doSomething() runs without any reservation related to it, the keyword this points to window (window), and this function will change the style.color of window. And window does not have an object like style, so this function will trigger a JavaScript error.

Copying

Therefore, it is a bit difficult to use this well. As in the case of the above example when used in a function, it should point to the HTML element "itself". In other words, there is a copy of the function pointing to the onclick attribute. Let’s take a look at what happens in traditional event registration.

element.onclick = doSomething;

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

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

This allows us to give it function copies for multiple event handlers. Each time this will point 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 the function is called, this points to the HTML element ("itself" doSomething()'s copy) that currently handles the event.

Referring

What if we use inline event registration?

<element onclick="doSomething()">

There is no copy function here, but pointing to it. What is the difference? The onclick attribute contains no actual function, just a function call.

doSomething();

The above means: "Go to doSomething() and execute it". In doSomething(), the this keyword points to the global window object again, then the function will return an error message.

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

Is it different?

If you use this to access an HTML element to handle an event, you must make sure that it is actually written to the onclick attribute. And the event handler it points to the HTML element is even registered. If you do this:

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

What you get is

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

As you can see, this keyword is in the onclick method. It points to an HTML element.

But if you do this:

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

What you get is

function onclick()
{
	doSomething()
}

This just points to the function doSomething(). this keyword is not in onclick method. It does not point to an HTML element.

Example-Copy

In the following example, this is written in the onclick method:

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

Example - Point to

In the following example, this points to window:

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

Pay attention to the attachEvent above. The disadvantage is that the Microsoft event registration model creates a pointer to the function and does not copy it. So sometimes it's impossible to figure out which HTML event is currently being processed.

Combined

When using inline event registration, you can also send this to the function. So it can be used like this:

<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 do
	obj.style.color = '#cc0000';
}