前言
本文内容主要是，针对事件处理函数中如何使用 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
- Introduction to Events
- Objects as associative arrays
- Traditional event registration model
- Early event handlers
- Advanced event registration models
