this是JavaScript中功能最強大的關鍵字之一。不幸的是,如果你不知道它具體如何運作,你將很難正確使用它。
this是物件導向語言中的重要概念,在JAVA,C#等大型語言中,this固定指向執行時的目前物件。但在javascript中,由於 javascript的動態性(解釋執行,當然也有簡單的預編譯過程),this的指向在執行時才確定。這個特性在帶給我們迷惑的同時也帶來了程式設計上的 自由和靈活,結合apply(call)方法,可以讓JS變得異常強大。
2.變化的this
在JavaScript中,this通常指向的是我們正在執行的函數本身,或是指向該函數所屬的物件(執行時間)。當我們在頁面中定義了函數 doSomething()的時候,它的owner是頁面,或是JavaScript中的window物件(或 global物件)。對於一個onclick屬性,它為它所屬的HTML元素所擁有,this應該指向該HTML元素。
2.1在幾個常見場景中this的變化
函數範例
function doSomething () { alert(this.navigator); //appCodeName this.value = "I am from the Object constructor"; this.style.backgroundColor = "# 000000"; }
1. (A)作為普通函數直接呼叫時,this指向window對象.
2. (B)作為控件事件觸發時
1) inline event registration 內聯事件註冊.將事件直接寫在HTML程式碼中(
2) Traditional event registration 傳統事件註冊(DHTML方式).
形如element.onclick = doSomething; 此時this指向element物件
3)
4. (D)使用apply 或call方法時,this指向所傳遞的物件。
形如:var obj={}; doSomething.apply(obj,new Array(”nothing”); //thisàobj
下面我來闡述如何在事件處理中來使用this,之後我會附加一些this相關的範例。 ? #cc0000'; }
在JavaScript中,this通常指向的是我們正在執行的函數本身(譯者註:用owner代表this所指向的內容),或者是,指向該函數所屬的對象。應該指向該HTML元素。沒有任何更多準備情況下執行doSomething(),this關鍵字會指向window,並且該函數試圖改變window的style.color。 。 registration會關心它。 handler被執行,this將指向HTML元素,並且該元素的顏色得以改變。
這個方法使得我們能夠複製這個函數到多個event handler。每次this都將指向正確的HTML元素:
這樣你就可以最大限度地使用this。每當執行函數,this所指向的HTML元素都會正確回應事件,這些HTML元素擁有doSomething()的一個拷貝。
Referring
然而,如果你使用inline event registration(內聯事件註冊)
Javascript代碼
Javascript程式碼
doSomething();
doSomething();
因此,它將聲明「轉到doSomething()並且執行它」。當我們到達doSomething(),this關鍵字又重新指向了全局的window對象,函數返回
錯誤訊息
。
The difference
如果你想使用this來指向HTML元素回應的事件,你必須確保this關鍵字被寫在onclick屬性裡。只有在這種情況下它才指向event handler所註冊的HTML元素。
Javascript程式碼element.onclick = doSomething;
alert(element.onclick)
element.onclick = doSomething;
alert(element.onclick)
你將得到
Javascript程式碼
function doSomething() {
this.style.color = '#cc0000';
}
function doSomething() {
this.style.color = '#cc0000';
} 如你所見,this關鍵字被展現在onclick函數中,因此它指向HTML元素。 但是如果執行
Javascript程式碼
alert(element.onclick)
alert(element.onclick)
你將得到
Javascript程式碼
function onclick() {
doSomething()
}
function onclick() {
doSomething()
}
這只是到doSomething()函數的一個引用。 this關鍵字並沒有出現在onclick函數中,因此它不指向HTML元素。
範例--拷貝
下面的範例中,this被寫入onclick函數裡:
Javascript程式碼
element.onclick = doSomething
element.addEventListener('click', doSomething, false )
element.onclick = function() {this.style.color = '#cc0000';}
element.onclick = doSomething
element.addEventListener('click', doSomething, false)
element.onclick = function() {this.style.color = '#cc0000';}
範例--引用
下述情況中,this指向window:
Javascript程式碼
element.onclick = function() {doSomething()}
element.attachEvent('onclick', doSomething)
element.onclick = function() {doSomething()}
element.attachEvent('onclick', doSomething)
注意attachEvent()的出現。 Microsoft event registration model最主要的弊端是attachEvent()建立了一個指向函數的引用,而不是複製它。因此有時不可能知道哪個HTML正在處理該事件。
組合使用
當使用內聯事件註冊時,你可以將this發送到函數以至於可以正常使用:
Javascript代碼
function doSomething(obj) {
//this出現在event handler中並被發送到函數
//obj指向HTML元素,因此可以這樣:
obj.style.color = '# cc0000';
}
以上是JS中this的用法的詳細內容。更多資訊請關注PHP中文網其他相關文章!