[翻译]PPK 谈 JavaScript 的 this 关键字

原文：JavaScript - The this keyword

在 JavaScript 中 this 是最强的关键字之一。这篇贴文就是要告诉你如何用好 this。

下面先讲如何在event handling(事件处理)中用它，再接着是讲 this 的其他用法。

所有者(Owner)

先来看看函数 doSomething() 里的 this 究竟指向(refer to)了什么？

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

JavaScript的 this 总是指向正执行的函数的所有者。或者是说，它是指向函数这个对象的一种手法。

在页面中定义了doSomething() 函数时，它的所有者是页面。确切的说是指 JavaScript 的 window 对象(全局对象)。

而onclick 属性归属 HTML 元素所有。

这种归属谁所有的权利是 JavaScript 的 OO(面向对象)特性的结果。在 把对象作关联数组 页面中有更多信息。

------------ window --------------------------------------
|                                          / /           |
|                                           |            |
|                                          this          |
|   ----------------                        |            |
|   | HTML 元素    | <-- this         -----------------  |
|   ----------------      |           | doSomething() |  |
|               |         |           -----------------  |
|          --------------------                          |
|          | onclick 属性     |                          |
|          --------------------                          |
|                                                        |
----------------------------------------------------------

这里在 doSomething() 执行时，关键字 this 指向 window(窗口) ，该函数将会改动 window 的 style.color。

而 window 没有 style 这个对象，所以该函数会引发 JavaScript 的错误。

拷贝(copying)

因此，想要用好 this 就请继续往下看。像前面的例子在函数中使用的这种情况，this 指向它归属谁所有的那个 HTML 元素。

也就是说，有个函数拷贝指向 onclick 属性。 我们来看看在传统事件注册中的情况。

element.onclick = doSomething;

函数是它整个的拷贝，指向 onclick 属性(现在变成了方法)。因此，事件处理被执行时，this 指向 HTML 元素并将改动 color。

------------ window --------------------------------------
|                                                        |
|                                                        |
|                                                        |
|   ----------------                                     |
|   | HTML 元素    | <-- this         -----------------  |
|   ----------------      |           | doSomething() |  |
|               |         |           -----------------  |
|          -----------------------          |            |
|          | doSomething() 的拷贝|  <-- 拷贝函数         |
|          -----------------------                       |
|                                                        |
----------------------------------------------------------

这样我们可以拷贝函数给多个事件处理。每次 this 将指向正确的 HTML 元素：

------------ window --------------------------------------
|                                                        |
|                                                        |
|                                                        |
|   ----------------                                     |
|   | HTML 元素    | <-- this         -----------------  |
|   ----------------      |           | doSomething() |  |
|               |         |           -----------------  |
|          -----------------------          |            |
|          | doSomething() 的拷贝|  <-- 拷贝函数         |
|          -----------------------          |            |
|                                           |            |
|   -----------------------                 |            |
|   | 另一个 HTML 元素    | <-- this        |            |
|   -----------------------     |           |            |
|               |               |           |            |
|          -----------------------          |            |
|          | doSomething() 的拷贝|  <-- 拷贝函数         |
|          -----------------------                       |
|                                                        |
----------------------------------------------------------

每次函数被调用，this 指向当前所处理的事件的那个 HTML 元素( doSomething() 的拷贝“所有”)。

指向(referring)

要是用 行内事件注册呢？

<element onclick="doSomething()">

这里没有拷贝函数，而是指向它，有什么不一样呢？ 这个 onclick 属性没有包含实际函数，而只是一个函数调用。

doSomething();

上面的意思是：“到 doSomething() 那里去执行它”。在doSomething()里面，this 关键字再次指向全局 window 对象，

那么函数会返回错误的消息。

------------ window --------------------------------------
|                                          / /           |
|                                           |            |
|                                          this          |
|   ----------------                        |            |
|   | HTML 元素    | <-- this         -----------------  |
|   ----------------      |           | doSomething() |  |
|               |         |           -----------------  |
|          -----------------------         / /           |
|          | 到 doSomething() 那 |          |            |
|          | 里去执行它          | ----    指向          |
|          -----------------------         函数          |
|                                                        |
----------------------------------------------------------

不一样？

如果是用 this 去访问 HTML 元素来处理事件的话，那么必须肯定它实际是写入了 onclick 属性中。

就算它指向 HTML 元素的事件处理是已注册。如果这么做：

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

得到的是

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

可以看到，this 关键字在 onclick 方法中。它指向 HTML 元素。

但是如果这么做：

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

得到的是

function onclick()
{
doSomething()
}

这里只是指向函数 doSomething()。this 关键字不在 onclick 方法中。它没有指向 HTML 元素。

例子-拷贝

在下面示例中，this 写入 onclick 方法中：

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

例子-指向

在下面示例中，this 指向 window：

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

要注意上面的 attachEvent。它的缺点是微软事件注册模型，它创建了到该函数的指向，而且没有拷贝它。

所以有时不可能弄清楚 HTML 当前的处理事件是哪个。

结合

使用行内事件注册时，也可以把 this 发送给函数。所以可以这么用：

<element onclick="doSomething(this)">
 
function doSomething(obj) {
// 在事件处理中把它发送给函数
// obj 指向 HTML 元素，所以可以这么做
obj.style.color = '#cc0000';
}