JavaScript中的this关键字

译自：PPK-The this keyword

this是JavaScript最重要的关键字之一。本文将会介绍它是如何工作的。

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

所有者(Owner)

接下来我们要探讨的问题是：doSomething()函数中的this指向的是什么？

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

在JavaScript中，this通常指的是正执行的函数的所有者，或者是一个函数作为方法的对象。 当我们在页面中定义我们的函数doSomething()时，其所有者是这个页面，或者更确切地说，是JavaScript的窗口对象（或全局对象）。 而onclick属性由其所属的HTML元素所拥有。

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

如果我们执行doSomething()前没有做任何操作，那么this关键字指的是窗口。该函数尝试改变窗口的style.color。 由于窗口没有样式对象，因此函数可能会失败，并产生JavaScript错误。

拷贝(copying)

因此，如果想要正确且高效的使用this关键字，你要将包含this的函数绑定到相应的HTML元素标签上。

element.onclick = doSomething;

这里，将doSomethis()作为element的onclick属性。 当点击该HTML元素时，onclick事件处理程序将被执行，然后该HTML元素的颜色被改变。此时的this是指该HTML元素。

------------ 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 元素。

指向(referring)

要是用行内事件注册呢？

<element onclick="doSomething()">

你没有复制这个函数！ 相反，你只是引用了它。它们之间是有很大差异的。 这里，onclick属性不包含实际的函数，只是一个函数调用：

doSomething();

因此，它的意思是：“到 doSomething() 那里去执行它”。而在doSomething()里面，this 关键字再次指向全局 window 对象，那么函数会返回错误的消息。

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

差异之处(The Difference)

如果要使用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 = doSomething
element.addEventListener('click',doSomething,false)
element.onclick = function () {this.style.color = '#cc0000';}
<element onclick="this.style.color = '#cc0000';">

例子-引用

在下面的示例中，this指向的是window。

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

使用行内事件注册时，也可以把 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';
}