this是面向?qū)ο笳Z言中的一個(gè)重要概念，在JAVA,C#等大型語言中，this固定指向運(yùn)行時(shí)的當(dāng)前對(duì)象。但是在javascript中，由于 javascript的動(dòng)態(tài)性（解釋執(zhí)行，當(dāng)然也有簡單的預(yù)編譯過程），this的指向在運(yùn)行時(shí)才確定。這個(gè)特性在給我們帶來迷惑的同時(shí)也帶來了編程上的 自由和靈活，結(jié)合apply(call)方法，可以使JS變得異常強(qiáng)大。
2.變化的this
在JavaScript中，this通常指向的是我們正在執(zhí)行的函數(shù)本身，或者是指向該函數(shù)所屬的對(duì)象（運(yùn)行時(shí)）。當(dāng)我們?cè)陧撁嬷卸x了函數(shù) doSomething()的時(shí)候，它的owner是頁面，或者是JavaScript中的window對(duì)象（或 global對(duì)象）。對(duì)于一個(gè)onclick屬性，它為它所屬的HTML元素所擁有，this應(yīng)該指向該HTML元素。
2.1在幾種常見場景中this的變化
函數(shù)示例
function doSomething ()
{
alert(this.navigator); //appCodeName
this.value = "I am from the Object constructor";
this.style.backgroundColor = "# 000000";
}
1. (A)作為普通函數(shù)直接調(diào)用時(shí)，this指向window對(duì)象.
2. (B)作為控件事件觸發(fā)時(shí)
1） inline event registration 內(nèi)聯(lián)事件注冊(cè) .將事件直接寫在HTML代碼中(<element
onclick=”doSomething()”>), 此時(shí)this指向 window對(duì)象 。
2） Traditional event registration 傳統(tǒng)事件注冊(cè) （DHTML方式）.
形如 element.onclick = doSomething; 此時(shí)this指向 element對(duì)象
3） <element onclick=”doSomething(this)”>作為參數(shù)傳遞可以指向element
3. (C)作為對(duì)象使用時(shí)this指向當(dāng)前對(duì)象。形如：new doSomething();
4. (D)使用apply 或者call方法時(shí)，this指向所傳遞的對(duì)象。
形如：var obj={}; doSomething.apply(obj,new Array(”nothing”); //thisàobj

下面我來闡述如何在事件處理中來使用this，之后我會(huì)附加一些this相關(guān)的例子。
Owner
接下來文章中我們將要討論的問題是：在函數(shù)doSomething()中this所指的是什么？
Javascript代碼
function doSomething() {
this.style.color = '#cc0000';
}
function doSomething() {
this.style.color = '#cc0000';
}
在JavaScript中，this通常指向的是我們正在執(zhí)行的函數(shù)本身（譯者注：用owner代表this所指向的內(nèi)容），或者是，指向該函數(shù)所屬的對(duì)象。當(dāng)我們?cè)陧撁嬷卸x了函數(shù)doSomething()的時(shí)候，它的owner是頁面，或者是JavaScript中的window對(duì)象（或 global對(duì)象）。對(duì)于一個(gè)onclick屬性，它為它所屬的HTML元素所擁有，this應(yīng)該指向該HTML元素。
這種“所有權(quán)”就是JavaScript中面向?qū)ο蟮囊环N方式。在Objects as associative arrays中可以查看一些更多的信息。
 
如果我們?cè)跊]有任何更多準(zhǔn)備情況下執(zhí)行doSomething()，this關(guān)鍵字會(huì)指向window，并且該函數(shù)試圖改變window的 style.color。因?yàn)閣indow并沒有style對(duì)象，這個(gè)函數(shù)將非常不幸的運(yùn)行失敗，并產(chǎn)生JavaScript錯(cuò)誤。
Copying
因此如果我們想充分利用this，我們不得不注意使用this的函數(shù)應(yīng)該被正確的HTML元素所擁有。換句話說，我們應(yīng)該復(fù)制這個(gè)函數(shù)到我們的onclick屬性。Traditional event registration會(huì)關(guān)心它。
Javascript代碼
element.onclick = doSomething;
element.onclick = doSomething;
這個(gè)函數(shù)被完整復(fù)制到onclick屬性（現(xiàn)在成為了函數(shù)）。因此如果這個(gè)event handler被執(zhí)行，this將指向HTML元素，并且該元素的顏色得以改變。
 
這種方法使得我們能夠復(fù)制這個(gè)函數(shù)到多個(gè)event handler。每次this都將指向正確的HTML元素：
 
這樣你就可以最大限度使用this。每當(dāng)執(zhí)行該函數(shù)，this所指向的HTML元素都正確響應(yīng)事件，這些HTML元素?fù)碛衐oSomething()的一個(gè)拷貝。
Referring
然而，如果你使用inline event registration(內(nèi)聯(lián)事件注冊(cè))
Javascript代碼
<element onclick="doSomething()">
<element onclick="doSomething()">
你將不能拷貝該函數(shù)！反而這種差異是非常關(guān)鍵的。onclick屬性并不包含實(shí)際的函數(shù)，僅僅是一個(gè)函數(shù)調(diào)用。
Javascript代碼
doSomething();
doSomething();
因此，它將聲明“轉(zhuǎn)到doSomething()并且執(zhí)行它”。當(dāng)我們到達(dá)doSomething()，this關(guān)鍵字又重新指向了全局的window對(duì)象，函數(shù)返回錯(cuò)誤信息。
 
The difference
如果你想使用this來指向HTML元素響應(yīng)的事件，你必須確保this關(guān)鍵字被寫在onclick屬性里。只有在這種情況下它才指向event handler所注冊(cè)的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關(guān)鍵字被展現(xiàn)在onclick函數(shù)中，因此它指向HTML元素。
但是如果執(zhí)行
Javascript代碼
<element onclick="doSomething()">
alert(element.onclick)
<element onclick="doSomething()">
alert(element.onclick)
你將得到
Javascript代碼
function onclick() {
doSomething()
}
function onclick() {
doSomething()
}
這僅僅是到doSomething()函數(shù)的一個(gè)引用。this關(guān)鍵字并沒有出現(xiàn)在onclick函數(shù)中，因此它不指向HTML元素。
例子--拷貝
下面的例子中，this被寫入onclick函數(shù)里：
Javascript代碼
element.onclick = doSomething
element.addEventListener('click', doSomething, false)
element.onclick = function() {this.style.color = '#cc0000';}
<element onclick="this.sytle.color = '#cc0000';">
element.onclick = doSomething
element.addEventListener('click', doSomething, false)
element.onclick = function() {this.style.color = '#cc0000';}
<element onclick="this.sytle.color = '#cc0000';">
例子--引用
下述情況中，this指向window：
Javascript代碼
element.onclick = function() {doSomething()}
element.attachEvent('onclick', doSomething)
<element onclick="doSomething()">
element.onclick = function() {doSomething()}
element.attachEvent('onclick', doSomething)
<element onclick="doSomething()">
注意attachEvent()的出現(xiàn)。Microsoft event registration model最主要的弊端是attachEvent()創(chuàng)建了一個(gè)指向函數(shù)的引用，而不是復(fù)制它。因此有時(shí)不可能知道哪個(gè)HTML正在處理該事件。
組合使用
當(dāng)使用內(nèi)聯(lián)事件注冊(cè)時(shí)，你可以將this發(fā)送到函數(shù)以至于可以正常使用：
Javascript代碼
<element onclick="doSomething(this)">
function doSomething(obj) {
//this出現(xiàn)在event handler中并被發(fā)送到函數(shù)
//obj指向HTML元素，因此可以這樣：
obj.style.color = '#cc0000';
}

最新評(píng)論