原文：JavaScript - The this keyword

在 JavaScript 中 this 是最強的關(guān)鍵字之一。這篇貼文就是要告訴你如何用好 this。

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

自己本身

先來看看函數(shù) doSomething() 里的 this 到底是指向(refer to)了什么？

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

JavaScript的 this 總是指向所運行的函數(shù)“自己本身”。也就是說，它是一種指向函數(shù)對象的方法。在頁面中定義 doSomething() 函數(shù)，自己本身是指頁面。也就是說，是指 JavaScript 的 window 對象(全局對象)。而 onclick 屬性它自己本身是屬 HTML 元素所有。

這個“所有權(quán)”是 JavaScript 的 OO(面向?qū)ο?特性的后果。在 把對象作關(guān)聯(lián)數(shù)組 頁面中有更多信息。

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

如果 doSomething() 運行時沒有任何與之預(yù)留相關(guān)的話，關(guān)鍵字 this 指向 window(窗口) ，該函數(shù)將會改動 window 的 style.color。而 window 沒有 style 這個對象，所以該函數(shù)會引發(fā) JavaScript 的錯誤。

拷貝(copying)

因此，用好 this 有些難度。像在函數(shù)中使用的上面例子的這種情況，它應(yīng)該指向 HTML 元素“自己本身”。換個說法是，有個函數(shù)拷貝指向 onclick 屬性。 我們來看看在傳統(tǒng)事件注冊中的情況。

element.onclick = doSomething;

函數(shù)是它整個的拷貝，指向 onclick 屬性(現(xiàn)在變成了方法)。因此，事件處理被執(zhí)行時，this 指向 HTML 元素并將改動 color。

------------ window --------------------------------------
|                                                        |
|                                                        |
|                                                        |
|   ----------------                                     |
|   | HTML 元素    | <-- this         -----------------  |
|   ----------------      |           | doSomething() |  |
|               |         |           -----------------  |
|          -----------------------          |            |
|          | doSomething() 的拷貝|  <-- 拷貝函數(shù)         |
|          -----------------------                       |
|                                                        |
----------------------------------------------------------

這樣我們可以拷貝函數(shù)給多個事件處理。每次 this 將指向正確的 HTML 元素：

------------ window --------------------------------------
|                                                        |
|                                                        |
|                                                        |
|   ----------------                                     |
|   | HTML 元素    | <-- this         -----------------  |
|   ----------------      |           | doSomething() |  |
|               |         |           -----------------  |
|          -----------------------          |            |
|          | doSomething() 的拷貝|  <-- 拷貝函數(shù)         |
|          -----------------------          |            |
|                                           |            |
|   -----------------------                 |            |
|   | 另一個 HTML 元素    | <-- this        |            |
|   -----------------------     |           |            |
|               |               |           |            |
|          -----------------------          |            |
|          | doSomething() 的拷貝|  <-- 拷貝函數(shù)         |
|          -----------------------                       |
|                                                        |
----------------------------------------------------------

每次函數(shù)被調(diào)用，this 指向當前所處理的事件的那個 HTML 元素(“自己本身” doSomething() 的拷貝)。

指向(referring)

要是用 行內(nèi)事件注冊呢？

<element onclick="doSomething()">

這里沒有拷貝函數(shù)，而是指向它，有什么不一樣呢？ 這個 onclick 屬性沒有包含實際函數(shù)，而只是一個函數(shù)調(diào)用。

doSomething();

上面的意思是：“到 doSomething() 那里去執(zhí)行它”。在doSomething()里面，this 關(guān)鍵字再次指向全局 window 對象，那么函數(shù)會返回錯誤的消息。

------------ window --------------------------------------
|                                          / \           |
|                                           |            |
|                                          this          |
|   ----------------                        |            |
|   | HTML 元素    | <-- this         -----------------  |
|   ----------------      |           | doSomething() |  |
|               |         |           -----------------  |
|          -----------------------         / \           |
|          | 到 doSomething() 那 |          |            |
|          | 里去執(zhí)行它          | ----    指向          |
|          -----------------------         函數(shù)          |
|                                                        |
----------------------------------------------------------

不一樣？

如果是用 this 去訪問 HTML 元素來處理事件的話，那么必須肯定它實際是寫入了 onclick 屬性中。就算它指向 HTML 元素的事件處理是已注冊。如果這么做：

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

得到的是

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

可以看到，this 關(guān)鍵字在 onclick 方法中。它指向 HTML 元素。

但是如果這么做：

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

得到的是

function onclick()
{
	doSomething()
}

這里只是指向函數(shù) doSomething()。this 關(guān)鍵字不在 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。它的缺點是微軟事件注冊模型，它創(chuàng)建了到該函數(shù)的指向，而且沒有拷貝它。所以有時不可能弄清楚 HTML 當前的處理事件是哪個。

結(jié)合

使用行內(nèi)事件注冊時，也可以把 this 發(fā)送給函數(shù)。所以可以這么用：

<element onclick="doSomething(this)">
 
function doSomething(obj) {
	// 在事件處理中把它發(fā)送給函數(shù)
	// obj 指向 HTML 元素，所以可以這么做
	obj.style.color = '#cc0000';
}

• javascript