"this" of JavaScript

goldbomb 2006-12-19

展開全文

this是JavaScript中功能最強(qiáng)大的關(guān)鍵字之一。不幸的是，如果你不知道它具體怎么工作，你將很難正確使用它。

    下面我來闡述如何在事件處理中來使用this，之后我會附加一些this相關(guān)的例子。

    Owner

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

function doSomething() {

this.style.color = ‘#cc0000‘;
}

在JavaScript中，this通常指向的是我們正在執(zhí)行的函數(shù)本身（譯者注：用owner代表this所指向的內(nèi)容），或者是，指向該函數(shù)所屬的對象。當(dāng)我們在頁面中定義了函數(shù)doSomething()的時候，它的owner是頁面，或者是JavaScript中的window對象（或 global對象）。對于一個onclick屬性，它為它所屬的HTML元素所擁有，this應(yīng)該指向該HTML元素。

這種“所有權(quán)”就是JavaScript中面向?qū)ο蟮囊环N方式。在Objects as associative arrays中可以查看一些更多的信息。

    如果我們在沒有任何更多準(zhǔn)備情況下執(zhí)行doSomething()，this關(guān)鍵字會指向window，并且該函數(shù)試圖改變window的 style.color。因為window并沒有style對象，這個函數(shù)將非常不幸的運(yùn)行失敗，并產(chǎn)生JavaScript錯誤。

    Copying

    因此如果我們想充分利用this，我們不得不注意使用this的函數(shù)應(yīng)該被正確的HTML元素所擁有。換句話說，我們應(yīng)該復(fù)制這個函數(shù)到我們的onclick屬性。Traditional event registration會關(guān)心它。

element.onclick = doSomething;

這個函數(shù)被完整復(fù)制到onclick屬性（現(xiàn)在成為了函數(shù)）。因此如果這個event handler被執(zhí)行，this將指向HTML元素，并且該元素的顏色得以改變。

這種方法使得我們能夠復(fù)制這個函數(shù)到多個event handler。每次this都將指向正確的HTML元素：

    這樣你就可以最大限度使用this。每當(dāng)執(zhí)行該函數(shù)，this所指向的HTML元素都正確響應(yīng)事件，這些HTML元素?fù)碛衐oSomething()的一個拷貝。

    Referring

    然而，如果你使用inline event registration(內(nèi)聯(lián)事件注冊)

你將不能拷貝該函數(shù)！反而這種差異是非常關(guān)鍵的。onclick屬性并不包含實際的函數(shù)，僅僅是一個函數(shù)調(diào)用。

doSomething();

因此，它將聲明“轉(zhuǎn)到doSomething()并且執(zhí)行它”。當(dāng)我們到達(dá)doSomething()，this關(guān)鍵字又重新指向了全局的window對象，函數(shù)返回錯誤信息。

The difference

如果你想使用this來指向HTML元素響應(yīng)的事件，你必須確保this關(guān)鍵字被寫在onclick屬性里。只有在這種情況下它才指向event handler所注冊的HTML元素。

element.onclick = doSomething;

alert(element.onclick)

你將得到

function doSomething() {

this.style.color = ‘#cc0000‘;

}

正如你所見，this關(guān)鍵字被展現(xiàn)在onclick函數(shù)中，因此它指向HTML元素。

但是如果執(zhí)行

alert(element.onclick)

你將得到

function onclick() {

doSomething()

}

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

    例子--拷貝

    下面的例子中，this被寫入onclick函數(shù)里：

element.onclick = doSomething

element.addEventListener(‘click‘, doSomething, false)

element.onclick = function() {this.style.color = ‘#cc0000‘;}

例子--引用

下述情況中，this指向window：

element.onclick = function() {doSomething()}

element.attachEvent(‘onclick‘, doSomething)

    注意attachEvent()的出現(xiàn)。Microsoft event registration model最主要的弊端是attachEvent()創(chuàng)建了一個指向函數(shù)的引用，而不是復(fù)制它。因此有時不可能知道哪個HTML正在處理該事件。

    組合使用

    當(dāng)使用內(nèi)聯(lián)事件注冊時，你可以將this發(fā)送到函數(shù)以至于可以正常使用：

function doSomething(obj) {

//this出現(xiàn)在event handler中并被發(fā)送到函數(shù)

//obj指向HTML元素，因此可以這樣：

obj.style.color = ‘#cc0000‘;

}

原文鏈接：http://www./js/this.html