深入理解Javascript中this的作用域
大家在使用Javascript的時(shí)候經(jīng)常被this這個(gè)家伙搞得暈頭轉(zhuǎn)向的。對(duì)大多數(shù)有OOP開發(fā)經(jīng)驗(yàn)的開發(fā)人員來說this是當(dāng)前作用域中引用普通元素的標(biāo)識(shí)符，但是在Javascript中它卻顯得古靈精怪的，因?yàn)樗皇枪潭ú蛔兊?，而是隨著它的執(zhí)行環(huán)境的改變而改變。在Javascript中this總是指向調(diào)用它所在方法的對(duì)象。
舉一個(gè)簡(jiǎn)單的例子：
function test(){
alert(this);
}
var obj=function(){
var name='testObj';
}
obj.objTest=test;
test();
obj.objTest();
把這段代碼放到HTML中運(yùn)行這個(gè)頁(yè)面，你會(huì)看到首先提示一個(gè)警告[object window]，然后第二個(gè)警告。
var obj=function(){
var name='testObj';
}
我們先定義了一個(gè)test()方法，并在方法內(nèi)部調(diào)用alert()方法將this顯示出來，然后定義了一個(gè)obj函數(shù)對(duì)象，并給它加了一個(gè)私有的字段name，同時(shí)給它加了一個(gè)靜態(tài)的方法objTest()，而這個(gè)函數(shù)則直接指向test()函數(shù)。
分別調(diào)用test()和obj.objTest()方法，第一次警告框提示的是Window對(duì)象，而第二次提示的是我們定義的obj這個(gè)函數(shù)的代碼。這說明了test函數(shù)在兩次執(zhí)行的時(shí)候this的值是不同的！
這就說明了當(dāng)調(diào)用函數(shù)的對(duì)象不同的時(shí)候，其內(nèi)部的this關(guān)鍵字指代的對(duì)象是不同的。這里需要值得注意的是Javascript是基于對(duì)象的語(yǔ)言，當(dāng)我們的變量或者函數(shù)定義在<script></script>標(biāo)簽的根下的時(shí)候其實(shí)相當(dāng)于給window對(duì)象加了相應(yīng)的屬性或方法，所以當(dāng)我們利用function test(){}代碼定義一個(gè)函數(shù)的時(shí)候，其實(shí)相當(dāng)于給window對(duì)象添加了一個(gè)新的函數(shù)，即window.test()函數(shù)。
我們可以做一個(gè)實(shí)驗(yàn)：
function test(){
alert(this);
}
alert(test===window.test);
警告框提示的將是true，這說明當(dāng)我們?cè)谡{(diào)用test()這個(gè)函數(shù)時(shí)相當(dāng)于調(diào)用的是window.test()。所以當(dāng)我們調(diào)用test()函數(shù)的時(shí)候調(diào)用這個(gè)函數(shù)的對(duì)象其實(shí)是window對(duì)象，this指代的是window對(duì)象，所以我們?cè)赼lert(this)的時(shí)候彈出的警告窗口內(nèi)容是[object Window]。我們將obj.objTest=test相當(dāng)于把obj.objTest()指向test(),所以當(dāng)我們調(diào)用obj.objTest()函數(shù)時(shí)相當(dāng)于在obj調(diào)用了test()這個(gè)函數(shù)，所以現(xiàn)在this指代的是obj對(duì)象，提示的就是obj這個(gè)Function也就是我們看到的代碼。
說到這應(yīng)該也解釋的差不多了，可能上面的例子太抽象，想象不出來它能在什么情況下用到，那我們現(xiàn)在就假設(shè)一個(gè)需求，做一個(gè)貼近實(shí)用一點(diǎn)的例子。
假設(shè)我們現(xiàn)在頁(yè)面中的所有超鏈接在點(diǎn)擊之后顏色要改為紅色，用Javascript實(shí)現(xiàn)。大體的思路應(yīng)該是獲取頁(yè)面中所有的<a>標(biāo)簽，然后遍歷所有的<a>標(biāo)簽，給每一個(gè)注冊(cè)一個(gè)click事件，事件觸發(fā)后我們將它的color值設(shè)為red。
示例代碼如下：
//改變顏色
function changeColor(){
this.style.color='#f00';
}
//初始化，給所有 a 標(biāo)簽注冊(cè)事件
function init(){
var customLinks=document.getElementsByTagName('a');
for(i in customLinks){
//你也可以使用事件偵聽器方式來注冊(cè)事件
//由于要兼容IE，F(xiàn)F等瀏覽器可能需要更多代碼，您可以自行編寫
customLinks[i].onclick=changeColor;
}
}
window.onload=init;
將這段代碼添加到HTML文檔中，并在文檔中添加一些超鏈接，當(dāng)超鏈接點(diǎn)擊后顏色會(huì)變成紅色，這里我們定義的changeColor()函數(shù)中this關(guān)鍵字在點(diǎn)擊超鏈接觸發(fā)函數(shù)的時(shí)候它指代的是當(dāng)前這個(gè)超鏈接。而如果你直接調(diào)用changeColor()函數(shù)瀏覽器會(huì)報(bào)錯(cuò)，提示Error: ‘this.style' is null or not an object或者undefined之類的錯(cuò)誤。
不知道說到這能不能讓正在看文章的你對(duì)Javascript中的this關(guān)鍵字有了一些自己的了解呢？或者你已經(jīng)不耐煩了？（:P）
其實(shí)要想真正對(duì)這個(gè)問題有更深入的理解那么必須對(duì)Javascript的作用域和作用域鏈有深入的理解。
作用域，顧名思義就是指某一屬性或方法具有訪問權(quán)限的代碼空間，簡(jiǎn)單的說也就是這個(gè)變量或方法它在代碼中的的適用范圍。在大多數(shù)的OOP中主要有public，private，protect三種作用域，對(duì)著三種作用域在這里就不詳細(xì)解釋了，如果有OOP的經(jīng)驗(yàn)應(yīng)該都有深入的了解。在這里我要說的是這三種作用域類型對(duì)Javascript來說幾乎是毫無(wú)意義的，因?yàn)镴avascript中只有一種公共作用域，在Javascript中作用域是在函數(shù)中進(jìn)行維護(hù)的。舉個(gè)例子：
var test1='globle variable';
function example(){
var test2='example variable';
alert(test1);
alert(test2);
}
example();
alert(test1);
alert(test2);
根據(jù)我們前面解釋的，這里的test1變量相當(dāng)于window的一個(gè)屬性，所以它會(huì)在整個(gè)window作用域內(nèi)起作用，而test2則在example()函數(shù)的內(nèi)部聲明，所以它的作用域也就維持在example()方法的內(nèi)部，如果在函數(shù)的外部調(diào)用test2瀏覽器會(huì)提示出錯(cuò)。而在example()內(nèi)部調(diào)用test1則沒問題。
根據(jù)這個(gè)我們?cè)倥e一個(gè)例子：
var test='globle variable';
function example(){
var test='example variable';
}
example();
alert(test);
這個(gè)例子運(yùn)行會(huì)是什么結(jié)果呢？對(duì)，警告框會(huì)提示“globle variable”，因?yàn)閑xample()函數(shù)內(nèi)部的test變量其作用域只維持在內(nèi)部，不會(huì)影響外部的test變量。如果我們將example()內(nèi)部test變量的var關(guān)鍵字去掉呢？你可以自己試試。
說到這就有牽扯出另外一個(gè)概念，那就是作用域鏈的概念。作用域鏈就是可以確定變量值的路徑。由上面一個(gè)例子可以看出，var關(guān)鍵字是用來維護(hù)作用域鏈的，如果變量使用了var關(guān)鍵字聲明那么他就可以看作為作用域鏈的終點(diǎn)。同樣函數(shù)的形參的定義也會(huì)起到類似的作用。
說到這你對(duì)this這個(gè)精靈古怪的家伙有了比較清晰的認(rèn)識(shí)了吧？根據(jù)它簡(jiǎn)單的一個(gè)詮釋，this總是指向調(diào)用它所在函數(shù)的對(duì)象，根據(jù)作用域和作用域鏈，我們會(huì)很清晰的確定this的真面目。臨末尾再來一個(gè)開始那個(gè)例子的簡(jiǎn)單變化：
function test(){
alert(this);
}
var obj=function(){
var name='testObj';
}
obj.objTest=test;
obj.objTest2=function(){
test();
}
test();
obj.objTest();
obj.objTest2();
你猜會(huì)提示什么內(nèi)容呢？你可以運(yùn)行一下試試(:P);
既然this是根據(jù)調(diào)用其所在函數(shù)的對(duì)象的改變而改變的，那我們可不可以強(qiáng)制改變它的調(diào)用對(duì)象呢？答案是肯定的，以后的文章會(huì)介紹一下這部分內(nèi)容，以及Javascript中不同類型的數(shù)據(jù)成員的實(shí)現(xiàn)方式，閉包等概念。
本人在學(xué)習(xí)過程中的一些經(jīng)驗(yàn)和心得體會(huì)，寫出來一是與大家分享另外也能檢視自己的不足，如寫的有問題還請(qǐng)批評(píng)指教，甚為感謝！
相關(guān)文章
微信小程序購(gòu)物商城系統(tǒng)開發(fā)系列-工具篇的介紹
這篇文章主要介紹了微信小程序購(gòu)物商城系統(tǒng)開發(fā)系列-工具篇的介紹,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2016-11-11
這篇文章主要介紹了JavaScript對(duì)象之深度克隆介紹,本文詳細(xì)的講解了什么是對(duì)象深度克隆,并給出了示例代碼,需要的朋友可以參考下2014-12-12
本文主要介紹了js實(shí)現(xiàn)一鍵復(fù)制功能的方法，具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-03-03
js鼠標(biāo)點(diǎn)擊圖片實(shí)現(xiàn)隨機(jī)變換圖片的方法
這篇文章主要介紹了js鼠標(biāo)點(diǎn)擊圖片實(shí)現(xiàn)隨機(jī)變換圖片的方法,涉及鼠標(biāo)事件與隨機(jī)函數(shù)的使用技巧,需要的朋友可以參考下2015-02-02
簡(jiǎn)單實(shí)用的HTML到UBB轉(zhuǎn)換腳本工具實(shí)現(xiàn)說明
你也許是位樂于分享的技術(shù)人員，盡管你算不上什么技術(shù)高手，但是你都希望把自己所知道的通過博客與網(wǎng)友分享。為了讓更多人知道你的經(jīng)驗(yàn)，你可能會(huì)努力把博文發(fā)布到專業(yè)論壇。2009-11-11
uniapp自定義頁(yè)面跳轉(zhuǎn)loading的實(shí)現(xiàn)代碼
有些頁(yè)面加載起來比較慢,為了加強(qiáng)用戶體驗(yàn)效果,所以一般都會(huì)做一個(gè)頁(yè)面加載等待的提示,頁(yè)面加載完成后消失,下面這篇文章主要給大家介紹了關(guān)于uniapp自定義頁(yè)面跳轉(zhuǎn)loading的實(shí)現(xiàn)代碼,需要的朋友可以參考下2023-06-06
在JS中，對(duì)于對(duì)象類型的變量的引用是通過類似C之類的“指針”的方式來操作的，及如果多個(gè)變量引用同一個(gè)對(duì)象，則任意一個(gè)變量對(duì)對(duì)象的操作都會(huì)影響到其它的變量。2010-03-03
JavaScript中數(shù)組reduce()方法使用詳情
這篇文章主要介紹了JavaScript中數(shù)組reduce()方法使用詳情，reduce()對(duì)數(shù)組中的每個(gè)元素進(jìn)行累加，返回一個(gè)新的值，可以傳入初始值，更多相關(guān)內(nèi)容需要的小伙伴可以參考一下下面文章介紹2022-09-09
微信內(nèi)置瀏覽器屏蔽了下載鏈接，如果用戶是用微信內(nèi)置瀏覽器打開的，則提示用戶換一個(gè)瀏覽器打開頁(yè)面，那么該如何判斷用戶是否是用微信瀏覽器呢2014-06-06
JavaScript?中的?parseInt()?函數(shù)詳解
parseInt函數(shù)將其第一個(gè)參數(shù)轉(zhuǎn)換為一個(gè)字符串，對(duì)該字符串進(jìn)行解析，然后返回一個(gè)整數(shù)或?NaN，這篇文章主要介紹了JavaScript?的?parseInt()?函數(shù),需要的朋友可以參考下2023-05-05