[翻譯]

this是JavaScript中功能最強大的關鍵字之一。不幸的是，如果你不知道它具體怎麼工作，你將很難正確使用它。

下面我來闡述如何在[url=http://www.quirksmode.org/js/introevents.html]事件處理[/url]中來使用this，之後我會附加一些this相關的例子。

[b][size=18]Owner[/size][/b]

接下來文章中我們將要討論的問題是：在函數doSomething()中this所指的是什麼？

[code]function doSomething() {
this.style.color = '#cc0000';
}[/code]

在JavaScript中，this通常指向的是我們正在執行的函數本身（譯者注：用owner代表this所指向的內容），或者是，指向該函數所屬的對象。當我們在頁面中定義了函數doSomething()的時候，它的owner是頁面，或者是JavaScript中的window對象（或 global對象）。對於一個onclick屬性，它爲它所屬的HTML元素所擁有，this應該指向該HTML元素。

這種“所有權”就是JavaScript中面向對象的一種方式。在[url=http://www.quirksmode.org/js/associative.html]Objects as associative arrays[/url]中可以查看一些更多的信息。

[img]http://www.blogjava.net/images/blogjava_net/flyingis/this1.gif[/img]

如果我們在沒有任何更多準備情況下執行doSomething()，this關鍵字會指向window，並且該函數試圖改變window的 style.color。因爲window並沒有style對象，這個函數將非常不幸的運行失敗，併產生JavaScript錯誤。

[b][size=18]Copying[/size][/b]

因此如果我們想充分利用this，我們不得不注意使用this的函數應該被正確的HTML元素所擁有。換句話說，我們應該複製這個函數到我們的onclick屬性。[url=http://www.quirksmode.org/js/events_tradmod.html]Traditional event registration[/url]會關心它。

[code]element.onclick = doSomething;[/code]

這個函數被完整複製到onclick屬性（現在成爲了函數）。因此如果這個event handler被執行，this將指向HTML元素，並且該元素的顏色得以改變。

[img]http://www.blogjava.net/images/blogjava_net/flyingis/this2.gif[/img]

這種方法使得我們能夠複製這個函數到多個event handler。每次this都將指向正確的HTML元素：

[img]http://www.blogjava.net/images/blogjava_net/flyingis/this3.gif[/img]

這樣你就可以最大限度使用this。每當執行該函數，this所指向的HTML元素都正確響應事件，這些HTML元素擁有doSomething()的一個拷貝。

[b][size=18]Referring[/size][/b]

然而，如果你使用[url=http://www.quirksmode.org/js/events_early.html]inline event registration[/url](內聯事件註冊)

[code]<element οnclick="doSomething()">[/code]

你將不能拷貝該函數！反而這種差異是非常關鍵的。onclick屬性並不包含實際的函數，僅僅是一個函數調用。

[code]doSomething();[/code]

因此，它將聲明“轉到doSomething()並且執行它”。當我們到達doSomething()，this關鍵字又重新指向了全局的window對象，函數返回錯誤信息。

[img]http://www.blogjava.net/images/blogjava_net/flyingis/this4.gif[/img]

[b]The difference[/b]

如果你想使用this來指向HTML元素響應的事件，你必須確保this關鍵字被寫在onclick屬性裏。只有在這種情況下它才指向event handler所註冊的HTML元素。

[code]element.onclick = doSomething;
alert(element.onclick)[/code]

你將得到

[code]function doSomething() {
this.style.color = '#cc0000';
}[/code]

正如你所見，this關鍵字被展現在onclick函數中，因此它指向HTML元素。

但是如果執行

[code]<element οnclick="doSomething()">
alert(element.onclick)[/code]

你將得到

[code]function onclick() {
doSomething()
}[/code]

這僅僅是到doSomething()函數的一個引用。this關鍵字並沒有出現在onclick函數中，因此它不指向HTML元素。

[b]例子--拷貝[/b]

下面的例子中，this被寫入onclick函數裏：

[code]element.onclick = doSomething
element.addEventListener('click', doSomething, false)
element.onclick = function() {this.style.color = '#cc0000';}
<element οnclick="this.sytle.color = '#cc0000';">[/code]

[b]例子--引用[/b]

下述情況中，this指向window：

[code]element.onclick = function() {doSomething()}
element.attachEvent('onclick', doSomething)
<element οnclick="doSomething()">[/code]

注意attachEvent()的出現。[url=http://www.quirksmode.org/js/events_advanced.html]Microsoft event registration model[/url]最主要的弊端是attachEvent()創建了一個指向函數的引用，而不是複製它。因此有時不可能知道哪個HTML正在處理該事件。

[b]組合使用[/b]

當使用內聯事件註冊時，你可以將this發送到函數以至於可以正常使用：

[code]<element οnclick="doSomething(this)">
function doSomething(obj) {
//this出現在event handler中並被髮送到函數
//obj指向HTML元素，因此可以這樣：
obj.style.color = '#cc0000';
}[/code]

原文題目：The this keyword
原文鏈接：[url]http://www.quirksmode.org/js/this.html[/url]
譯文鏈接：[url]http://www.blogjava.net/flyingis/archive/2006/09/15/69888.html[/url]