JS中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） 3. (C)作為物件使用時this指向當前物件。形如：new doSomething();
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代碼

你將無法拷貝該函數！反而這種差異是非常關鍵的。 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';
}

以上是JS中this的用法的詳細內容。更多資訊請關注PHP中文網其他相關文章！