咖啡Java

站在巨人的肩上
Flying in the world of Java

posts - 114, comments - 196, trackbacks - 0, articles - 0

聚合

"this" of JavaScript你理解有多少？

Posted on 2006-11-27 16:48 Jaunt 閱讀(246) 評論(0) 編輯收藏所屬分類: JavaScript

譯者：Flyingis
編輯：Jaunt
原載：http://www.aygfsteel.com/flyingis/archive/2006/09/15/69888.html

this是JavaScript中功能最強大的關鍵字之一。

Owner

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

function ?doSomething()? {

?? this .style.color? = ?'#cc0000';
}

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

這種“所有權”就是JavaScript中面向對象的一種方式。?

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

Copying
??
因此如果我們想充分利用this，我們不得不注意使用this的函數應該被正確的HTML元素所擁有。換句話說，我們應該復制這個函數到我們的onclick屬性。

element.onclick? = ?doSomething;

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

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

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

Referring

然而，如果你使用inline event registration(內聯事件注冊)

<element?onclick="doSomething()">

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

doSomething();

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

The difference

如果你想使用this來指向HTML元素響應的事件，你必須確保this關鍵字被寫在onclick屬性里。只有在這種情況下它才指向event handler所注冊的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元素。

新用戶注冊刷新評論列表


只有注冊用戶登錄后才能發表評論。




網站導航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關文章: Javascript 如何實現對象的拖動？對google個性主頁的拖拽效果的js的完整注釋判斷Checkbox和Radio的一種方法 JavaScript，等比例縮放圖片的函數 setInterval全面的介紹(轉) 用javascript進行拖拽 [下載]JavaScript權威指南(第五版) 發現一個有用的js事件onpropertychange JS中的setTimeout和setInterval的區別 javascript小技巧（收藏）