javascript this

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程式碼中(onclick=”doSomething()”>), 此時this指向 window物件 。
2） Traditional event registration 傳統事件註冊 （DHTML方式）.
形如 element.onclick = doSomething; 此時this指向 element物件
3） 作為引數傳遞可以指向element
3. (C)作為物件使用時this指向當前物件。形如：new doSomething();
4. (D)使用apply 或者call方法時，this指向所傳遞的物件。
形如：var bj={}; doSomething.apply(obj,new Array(”nothing”); //thisàobj
下面我來闡述如何在事件處理中來使用this，之後我會附加一些this相關的例子。
Owner
接下來文章中我們將要討論的問題是：在函式doSomething()中this所指的是什麼？
Javascript程式碼
function doSomething() {
this.style.color = '#cc0000';
}
function doSomething() {
this.style.color = '#cc0000';
}
在 JavaScript中，this通常指向的是我們正在執行的函式本身（譯者注：用owner代表this所指向的內容），或者是，指向該函式所屬的對 象。當我們在頁面中定義了函式doSomething()的時候，它的owner是頁面，或者是JavaScript中的window物件（或 global物件）。對於一個onclick屬性，它為它所屬的HTML元素所擁有，this應該指向該HTML元素。
這種“所有權”就是JavaScript中物件導向的一種方式。在Objects as associative arrays中可以檢視一些更多的資訊。
 
如 果我們在沒有任何更多準備情況下執行doSomething()，this關鍵字會指向window，並且該函式試圖改變window的 style.color。因為window並沒有style物件，這個函式將非常不幸的執行失敗，併產生JavaScript錯誤。
Copying
因此如果我們想充分利用this，我們不得不注意使用this的函式應該被正確的HTML元素所擁有。換句話說，我們應該複製這個函式到我們的onclick屬性。Traditional event registration會關心它。
Javascript程式碼
element.onclick = doSomething;
element.onclick = doSomething;
這個函式被完整複製到onclick屬性（現在成為了函式）。因此如果這個event handler被執行，this將指向HTML元素，並且該元素的顏色得以改變。
 
這種方法使得我們能夠複製這個函式到多個event handler。每次this都將指向正確的HTML元素：
 
這樣你就可以最大限度使用this。每當執行該函式，this所指向的HTML元素都正確響應事件，這些HTML元素擁有doSomething()的一個拷貝。
Referring
然而，如果你使用inline event registration(內聯事件註冊)
Javascript程式碼


你將不能拷貝該函式！反而這種差異是非常關鍵的。onclick屬性並不包含實際的函式，僅僅是一個函式呼叫。
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';
}

 

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/25897606/viewspace-704300/，如需轉載，請註明出處，否則將追究法律責任。