用了很久JavaScript，對【this】的認識只局限于以往的憑經驗而已，不過今天發現了好東西“ http://www.quirksmode.org/js/associative.html ”，詳細描述了如何使用【this】關鍵字，在這里我就簡短的說一下重點，如果有疑問可以直接參考原文。

在學習過有this的編程語言中，this一般都是指向當前實例對象的，對于JavaScript來說，其實也是這樣。但有時候在使用【this】時，會感覺它的行為很奇怪，不能能達到預期的效果，這往往是因為沒有正確的了解【this】本身所指向的真正的實例對象所引起的。

在JavaScript中，【this】總是指向執行函數的調用者，或者可以說是指向擁有方法的對象。

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

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

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

再看一個類定義的例子：

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

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

接下來我們來學習一個重要的概念，拷貝與引用。

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

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

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

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

而引用方式執行的代碼是：

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

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

圖解：

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

拷貝舉例：

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'; }