[譯]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 = doSomethingelement.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()">

要注意上面的 attachEvent。它的缺點是微軟事件註冊模型，它建立了到該函數的指向，而且沒有拷貝它。所以有時不可能弄清楚 HTML 當前的處理事件是哪個。

結合

使用行內事件註冊時，也可以把 this 發送給函數。所以可以這麼用：

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