用了很久JavaScript，對【this】的認(rèn)識(shí)只局限于以往的憑經(jīng)驗(yàn)而已，不過今天發(fā)現(xiàn)了好東西“ http://www.quirksmode.org/js/associative.html ”，詳細(xì)描述了如何使用【this】關(guān)鍵字，在這里我就簡短的說一下重點(diǎn)，如果有疑問可以直接參考原文。

在學(xué)習(xí)過有this的編程語言中，this一般都是指向當(dāng)前實(shí)例對象的，對于JavaScript來說，其實(shí)也是這樣。但有時(shí)候在使用【this】時(shí)，會(huì)感覺它的行為很奇怪，不能能達(dá)到預(yù)期的效果，這往往是因?yàn)闆]有正確的了解【this】本身所指向的真正的實(shí)例對象所引起的。

在JavaScript中，【this】總是指向執(zhí)行函數(shù)的調(diào)用者，或者可以說是指向擁有方法的對象。

function doSomething() { this.style.color = '#cc0000'; }

例子中，函數(shù)【doSomething】定義在頁面中，所以它指向的就應(yīng)該是當(dāng)前頁面，即全局對象【window】。但是，如果我們在頁面中某個(gè)元素的屬性內(nèi)部使用了【this】，那么【this】指向的內(nèi)容就是這個(gè)元素。如下面的例子，【this】指的就是元素【input】。

<input type="button" value="Do not touch me!" onclick="alert(this.value);" />

再看一個(gè)類定義的例子：

function CSDN() { this.url = "www.csdn.net"; this.author = "KNIGHTRCOM"; } CSDN.prototype.output = function() { alert(this.url + " - " + this.author); } new CSDN().output();

首先定義一個(gè)類【CSDN】，并為這個(gè)類添加一個(gè)【output】方法，output方法內(nèi)使用的【this】所指向的內(nèi)容，就是類【CSDN】的實(shí)例對象【new CSDN()】。也就是之前說的，【this】指向擁有方法【output】的實(shí)例對象【new CSDN()】。

接下來我們來學(xué)習(xí)一個(gè)重要的概念，拷貝與引用。

<mce:script type="text/javascript"><!-- element.onclick = doSomething; // --></mce:script> <element onclick="doSomething()">

我們比較一下上面兩種用法。第一種用法是將函數(shù)【doSomething】拷貝到【element】的【onclick】事件句柄中，這樣【doSomething】的內(nèi)容就成為元素【element】的一個(gè)方法，當(dāng)該方法被執(zhí)行時(shí)，【this】所指向的內(nèi)容即為方法的擁有者【element】。但對于第二種用法（內(nèi)聯(lián)方式）來說，實(shí)際上是一種變相的調(diào)用，當(dāng)【click】事件被觸發(fā)時(shí)，【doSomething】確實(shí)會(huì)被調(diào)用，但并非作為元素【element】的方法來調(diào)用，所以【this】也就不會(huì)指向【element】了。

從代碼上看，拷貝方法所執(zhí)行的代碼就是：

element.onclick = doSomething; alert(element.onclick) || // function doSomething() { this.style.color = '#cc0000'; }

而引用方式執(zhí)行的代碼是：

<element onclick="doSomething()"> alert(element.onclick) || // function onclick() { doSomething() }

從執(zhí)行的代碼中看，方法【doSomething】的擁有者并非當(dāng)前元素，所以【this】的指向自然也不是當(dāng)前元素了。

圖解：

在內(nèi)聯(lián)的引用方式下，可以通過使用【document.getElementById】或【event.target】來達(dá)到使用【this】的效果，但在使用【event.target】之前，最好查閱相關(guān)的文檔說明。

拷貝舉例：

element.onclick = doSomething element.addEventListener('click',doSomething,false) element.onclick = function () {this.style.color = '#cc0000';} <element onclick="this.style.color = '#cc0000';">

引用舉例：

element.onclick = function () {doSomething()} element.attachEvent('onclick',doSomething) <element onclick="doSomething()">

拷貝與引用的混合使用：

<element onclick="doSomething(this)"> function doSomething(obj) { // this is present in the event handler and is sent to the function // obj now refers to the HTML element, so we can do obj.style.color = '#cc0000'; }