[翻譯]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';
}