大家在使用Javascript的時候經(jīng)常被this這個家伙搞得暈頭轉(zhuǎn)向的。對大多數(shù)有OOP開發(fā)經(jīng)驗的開發(fā)人員來說this是當前作用域中引用普通元素的標識符，但是在Javascript中它卻顯得古靈精怪的，因為它不是固定不變的，而是隨著它的執(zhí)行環(huán)境的改變而改變。在Javascript中this總是指向調(diào)用它所在方法的對象。

舉一個簡單的例子：

代碼如下:

function test(){

alert(this);

}

var obj=function(){

var name='testObj';

}

obj.objTest=test;

test();

obj.objTest();

把這段代碼放到HTML中運行這個頁面，你會看到首先提示一個警告[object window]，然后第二個警告。

代碼如下:

var obj=function(){

var name='testObj';

}

我們先定義了一個test()方法，并在方法內(nèi)部調(diào)用alert()方法將this顯示出來，然后定義了一個obj函數(shù)對象，并給它加了一個私有的字段name，同時給它加了一個靜態(tài)的方法objTest()，而這個函數(shù)則直接指向test()函數(shù)。

分別調(diào)用test()和obj.objTest()方法，第一次警告框提示的是Window對象，而第二次提示的是我們定義的obj這個函數(shù)的代碼。這說明了test函數(shù)在兩次執(zhí)行的時候this的值是不同的！

這就說明了當調(diào)用函數(shù)的對象不同的時候，其內(nèi)部的this關(guān)鍵字指代的對象是不同的。這里需要值得注意的是Javascript是基于對象的語言，當我們的變量或者函數(shù)定義在<script></script>標簽的根下的時候其實相當于給window對象加了相應(yīng)的屬性或方法，所以當我們利用function test(){}代碼定義一個函數(shù)的時候，其實相當于給window對象添加了一個新的函數(shù)，即window.test()函數(shù)。

我們可以做一個實驗：

代碼如下:

function test(){

alert(this);

}

alert(test===window.test);

警告框提示的將是true，這說明當我們在調(diào)用test()這個函數(shù)時相當于調(diào)用的是window.test()。所以當我們調(diào)用test()函數(shù)的時候調(diào)用這個函數(shù)的對象其實是window對象，this指代的是window對象，所以我們在alert(this)的時候彈出的警告窗口內(nèi)容是[object Window]。我們將obj.objTest=test相當于把obj.objTest()指向test(),所以當我們調(diào)用obj.objTest()函數(shù)時相當于在obj調(diào)用了test()這個函數(shù)，所以現(xiàn)在this指代的是obj對象，提示的就是obj這個Function也就是我們看到的代碼。

說到這應(yīng)該也解釋的差不多了，可能上面的例子太抽象，想象不出來它能在什么情況下用到，那我們現(xiàn)在就假設(shè)一個需求，做一個貼近實用一點的例子。

假設(shè)我們現(xiàn)在頁面中的所有超鏈接在點擊之后顏色要改為紅色，用Javascript實現(xiàn)。大體的思路應(yīng)該是獲取頁面中所有的<a>標簽，然后遍歷所有的<a>標簽，給每一個注冊一個click事件，事件觸發(fā)后我們將它的color值設(shè)為red。

示例代碼如下：

代碼如下:

//改變顏色

function changeColor(){

this.style.color='#f00';

}

//初始化，給所有 a 標簽注冊事件

function init(){

var customLinks=document.getElementsByTagName('a');

for(i in customLinks){

//你也可以使用事件偵聽器方式來注冊事件

//由于要兼容IE，F(xiàn)F等瀏覽器可能需要更多代碼，您可以自行編寫

customLinks[i].onclick=changeColor;

}

}

window.onload=init;

將這段代碼添加到HTML文檔中，并在文檔中添加一些超鏈接，當超鏈接點擊后顏色會變成紅色，這里我們定義的changeColor()函數(shù)中this關(guān)鍵字在點擊超鏈接觸發(fā)函數(shù)的時候它指代的是當前這個超鏈接。而如果你直接調(diào)用changeColor()函數(shù)瀏覽器會報錯，提示Error: ‘this.style' is null or not an object或者undefined之類的錯誤。

不知道說到這能不能讓正在看文章的你對Javascript中的this關(guān)鍵字有了一些自己的了解呢？或者你已經(jīng)不耐煩了？（:P）

其實要想真正對這個問題有更深入的理解那么必須對Javascript的作用域和作用域鏈有深入的理解。

作用域，顧名思義就是指某一屬性或方法具有訪問權(quán)限的代碼空間，簡單的說也就是這個變量或方法它在代碼中的的適用范圍。在大多數(shù)的OOP中主要有public，private，protect三種作用域，對著三種作用域在這里就不詳細解釋了，如果有OOP的經(jīng)驗應(yīng)該都有深入的了解。在這里我要說的是這三種作用域類型對Javascript來說幾乎是毫無意義的，因為Javascript中只有一種公共作用域，在Javascript中作用域是在函數(shù)中進行維護的。舉個例子：

代碼如下:

var test1='globle variable';

function example(){

var test2='example variable';

alert(test1);

alert(test2);

}

example();

alert(test1);

alert(test2);

根據(jù)我們前面解釋的，這里的test1變量相當于window的一個屬性，所以它會在整個window作用域內(nèi)起作用，而test2則在example()函數(shù)的內(nèi)部聲明，所以它的作用域也就維持在example()方法的內(nèi)部，如果在函數(shù)的外部調(diào)用test2瀏覽器會提示出錯。而在example()內(nèi)部調(diào)用test1則沒問題。

根據(jù)這個我們再舉一個例子：

代碼如下:

var test='globle variable';

function example(){

var test='example variable';

}

example();

alert(test);

這個例子運行會是什么結(jié)果呢？對，警告框會提示“globle variable”，因為example()函數(shù)內(nèi)部的test變量其作用域只維持在內(nèi)部，不會影響外部的test變量。如果我們將example()內(nèi)部test變量的var關(guān)鍵字去掉呢？你可以自己試試。

說到這就有牽扯出另外一個概念，那就是作用域鏈的概念。作用域鏈就是可以確定變量值的路徑。由上面一個例子可以看出，var關(guān)鍵字是用來維護作用域鏈的，如果變量使用了var關(guān)鍵字聲明那么他就可以看作為作用域鏈的終點。同樣函數(shù)的形參的定義也會起到類似的作用。

說到這你對this這個精靈古怪的家伙有了比較清晰的認識了吧？根據(jù)它簡單的一個詮釋，this總是指向調(diào)用它所在函數(shù)的對象，根據(jù)作用域和作用域鏈，我們會很清晰的確定this的真面目。臨末尾再來一個開始那個例子的簡單變化：

代碼如下:

function test(){

alert(this);

}

var obj=function(){

var name='testObj';

}

obj.objTest=test;

obj.objTest2=function(){

test();

}

test();

obj.objTest();

obj.objTest2();

你猜會提示什么內(nèi)容呢？你可以運行一下試試(:P);

既然this是根據(jù)調(diào)用其所在函數(shù)的對象的改變而改變的，那我們可不可以強制改變它的調(diào)用對象呢？答案是肯定的，以后的文章會介紹一下這部分內(nèi)容，以及Javascript中不同類型的數(shù)據(jù)成員的實現(xiàn)方式，閉包等概念。

本人在學習過程中的一些經(jīng)驗和心得體會，寫出來一是與大家分享另外也能檢視自己的不足，如寫的有問題還請批評指教，甚為感謝！

更多信息請查看IT技術(shù)專欄