在事件处理函数中的 this

配图源自 Freepik

在 JavaScript 中，this 是一个很重要的关键字。此前写过一篇文章：JavaScript中的 this 真没那么难理解。本文内容主要是，针对事件处理函数中如何使用 this 的几种方法及区别。

一、Owner

我们将在本文讨论的问题是：在函数 doSomething() 中 this 指向的是什么？

注意，本文通篇均在非严格模式下进行。

<script>
  function doSomething() {
    this.style.color = '#c00'
  }
</script>

在 JavaScript 中， this 总是指我们正在执行的函数的“owner”，或者更确切地说，是指函数作为其方法的对象。当我们在页面中定义我们函数 doSomething() 时，它的“owner”是页面，或者更确切地说，是 JavaScript 的 window 对象（或全局对象）。但是，onclick 属性归它所属的 HTML 元素所有。

这种“ownership”是 JavaScript 面向对象方法的结果。有关更多信息，请参阅作为关联数组的对象页面。

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

如果我们在没有任何准备的情况下执行 doSomething()，则 this 关键字指向 window 对象，该函数会尝试更改 window 对象的 style.color。由于 window 没有 style 对象，该函数会失败并产生 JavaScript 错误（TypeError）。

二、Copying

如果我们想充分利用 this，我们必须注意使用它的函数是由正确的 HTML 元素“拥有”的。换句话说，我们必须将函数复制到我们的 onclick 属性。传统的事件注册会处理它。

element.onclick = doSomething

该函数被完整地复制到 onclick 属性（现在变成了一个方法）。因此，如果执行事件处理程序，this 会指向 HTML 元素，并且它的 color 会发生变化。

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

当然是我们可以将函数复制到多个事件处理程序。每次 this 将指向正确的 HTML 元素：

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

因此，你可以最大程度地使用它。每次调用该函数时， this 指的是当前正在处理事件的 HTML 元素，即“拥有” doSomething() 副本的 HTML 元素。

三、Referring

但是，如果你使用内联事件注册：

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

你不要复制功能！相反，你指向它，差异至关重要。onclick 属性不包含实际的函数，而只是一个函数调用：

doSomething()

所以这相当于，前往 doSomething() 并执行它。当我们到达 doSomething() 时，this 关键字再次指向全局 window 对象，并且该函数返回错误消息（TypeError）。

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

四、The difference

如果你想使用 this 来访问正在处理事件的 HTML 元素，你必须确保 this 关键字实际上已写入 onclick 属性。只有在这种情况下，this 才指向事件处理程序注册到的 HTML 元素。因此，如果你这样处理：

element.onclick = doSomething
alert(element.onclick)

你将会得到：

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

如你所见，this 关键字存在于 onclick 方法中。因此 this 指向 HTML 元素。

但是，如果你这样处理：

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

你得到的是：

function onclick(event) {
  doSomething()
}

这仅仅是对函数 doSomething() 的引用。onclick 方法中不存在 this 关键字，因此 this 不指向 HTML 元素。

五、Examples - copying

以下情况 this 会写入 onclick 方法：

element.onclick = doSomething

element.addEventListener('click', doSomething, false)

element.onclick = function () { this.style.color = '#c00' }

<element onclick="this.style.color = '#c00'">doSomething...</element>

六、Examples - referring

以下情况 this 指向 window 对象：

element.onclick = function () { doSomething() }

element.attachEvent('onclick', doSomething)

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

请注意 attachEvent() 的存在。 Microsoft 事件注册模型的主要缺点是 attachEvent() 创建对函数的引用而不复制它。因此，有时无法知道当前是哪个 HTML 处理该事件。

七、Combination

使用内联事件注册时，你还可以将 this 发送到该函数，以便你仍然可以使用它：

<element onclick="doSomething(this)">doSomething...</element>

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 = '#c00'
}

八、TODO List

九、References

The this keyword

toFrankie / blog