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程式碼中(4ab857bcb500ec89779e0bdb125daee0), 此時this指向window物件。
2) Traditional event registration 傳統事件註冊（DHTML方式）.
形如element.onclick = doSomething; 此時this指向element物件
3） 8865bf9ddf5a052d55a482328aee50bd
f850ef7fdfa5fc526f8794325edf1b64 你將無法拷貝該函數！反而這種差異是非常關鍵的。 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程式碼ebb33dbdce0067599b7e19b0bfb3b891
alert(element.onclick)
ebb33dbdce0067599b7e19b0bfb3b891
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';}
e51a0000e89462dfdb5a61f94f6bc2bb
element.onclick = doSomething
element.addEventListener('click', doSomething, false)
element.onclick = function() {this.style.color = '#cc0000';}
223b41ffa10c20bccd574b9a420408e4
範例--引用
下述情況中，this指向window：
Javascript程式碼
element.onclick = function() {doSomething()}
element.attachEvent('onclick', doSomething)
ebb33dbdce0067599b7e19b0bfb3b891
element.onclick = function() {doSomething()}
element.attachEvent('onclick', doSomething)
ebb33dbdce0067599b7e19b0bfb3b891
注意attachEvent()的出現。 Microsoft event registration model最主要的弊端是attachEvent()建立了一個指向函數的引用，而不是複製它。因此有時不可能知道哪個HTML正在處理該事件。
組合使用
當使用內聯事件註冊時，你可以將this發送到函數以至於可以正常使用：
Javascript代碼
d46b418127a7f8656d10fc8c636ec4e4
function doSomething(obj) {
//this出現在event handler中並被發送到函數
//obj指向HTML元素，因此可以這樣：
obj.style.color = '# cc0000';
}

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