亚洲Av一级在线播放_ "this" of JavaScript

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

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

    Owner

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

function doSomething() {

this.style.color = ‘#cc0000‘;

}

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

這種“所有權”就是JavaScript中面向對象的一種方式。在Objects as associative arrays中可以查看一些更多的信息。

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

    Copying

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

element.onclick = doSomething;

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

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

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

    Referring

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

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

doSomething();

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

The difference

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

element.onclick = doSomething;

alert(element.onclick)

你將得到

function doSomething() {

this.style.color = ‘#cc0000‘;

}

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

但是如果執行

alert(element.onclick)

你將得到

function onclick() {

doSomething()

}

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

    例子--拷貝

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

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()的出現。Microsoft event registration model最主要的弊端是attachEvent()創(chuàng )建了一個(gè)指向函數的引用，而不是復制它。因此有時(shí)不可能知道哪個(gè)HTML正在處理該事件。

    組合使用

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

function doSomething(obj) {

//this出現在event handler中并被發(fā)送到函數

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

obj.style.color = ‘#cc0000‘;

}

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

本站僅提供存儲服務(wù)，所有內容均由用戶(hù)發(fā)布，如發(fā)現有害或侵權內容，請點(diǎn)擊舉報。

欧美性猛交XXXX免费看蜜桃,成人网18免费韩国,亚洲国产成人精品区综合,欧美日韩一区二区三区高清不卡,亚洲综合一区二区精品久久