首頁 > web前端 > js教程 > 主體

深入理解Javascript中this的作用域_javascript技巧

WBOY
發布: 2016-05-16 16:39:48
原創
1039 人瀏覽過

大家在使用Javascript的時候常常被this這傢伙搞得暈頭轉向的。對大多數有OOP開發經驗的開發人員來說this是當前作用域中引用普通元素的標識符,但是在Javascript中它卻顯得古靈精怪的,因為它不是固定不變的,而是隨著它的執行環境的改變而改變。在Javascript中this總是指向呼叫它所在方法的物件。

舉一個簡單的例子:

複製程式碼 程式碼如下:

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()方法,並在方法內部呼叫alert()方法將this顯示出來,然後定義了一個obj函數對象,並給它加了一個私有的字段name,同時給它加了一個靜態的方法objTest(),而這個函數則直接指向test()函數。

分別呼叫test()和obj.objTest()方法,第一次警告框提示的是Window對象,而第二次提示的是我們定義的obj這個函數的程式碼。這說明了test函數在兩次執行的時候this的值是不同的!

這就說明了當呼叫函數的物件不同的時候,其內部的this關鍵字指涉的物件是不同的。這裡需要值得注意的是Javascript是基於物件的語言,當我們的變數或函數定義在<script></script>標籤的根下的時候其實相當於給window物件加了對應的屬性或方法,所以當我們利用function test(){}程式碼定義一個函數的時候,其實相當於為window物件增加了一個新的函數,也就是window.test()函數。

我們可以做個實驗:

複製程式碼 程式碼如下:

function test(){
alert(this);
}
alert(test===window.test);

警告框提示的將是true,這表示當我們在呼叫test()這個函數時相當於呼叫的是window.test()。所以當我們呼叫test()函數的時候呼叫這個函數的對像其實是window對象,this指涉的是window對象,所以我們在alert(this)的時候彈出的警告視窗內容是[object Window]。我們將obj.objTest=test相當於把obj.objTest()指向test(),所以當我們呼叫obj.objTest()函數時相當於在obj呼叫了test()這個函數,所以現在this指代的是obj對象,提示的就是obj這個Function也就是我們看到的程式碼。

說到這應該也解釋的差不多了,可能上面的例子太抽象,想像不出來它能在什麼情況下用到,那我們現在就假設一個需求,做一個貼近實用一點的例子。

假設我們現在頁面中的所有超連結在點擊之後顏色要改為紅色,用Javascript實作。大體的想法應該是取得頁面中所有的標籤,然後遍歷所有的標籤,給每一個註冊一個click事件,事件觸發後我們將它的color值設為red。

範例程式碼如下:

複製程式碼 程式碼如下:

//改顏色
function changeColor(){
this.style.color='#f00';
}
//初始化,給所有 a 標籤註冊事件
function init(){
var customLinks=document.getElementsByTagName('a');
for(i in customLinks){
//你也可以使用事件偵聽器方式來註冊事件
//由於要相容IE,FF等瀏覽器可能需要更多程式碼,您可以自行編寫
customLinks[i].onclick=changeColor;
}
}
window.onload=init;

將這段程式碼加入HTML文件中,並在文件中加入一些超鏈接,當超連結點擊後顏色會變成紅色,這裡我們定義的changeColor()函數中this關鍵字在點擊超連結觸發函數的時候它指涉的是當前這個超連結。而如果你直接呼叫changeColor()函數瀏覽器會報錯,提示Error: ‘this.style' is null or not an object或undefined之類的錯誤。

不知道說到這能不能讓正在看文章的你對Javascript中的this關鍵字有了一些自己的了解呢?還是你已經不耐煩了? (:P)

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

作用域,顧名思義就是指某一屬性或方法具有存取權限的程式碼空間,簡單的說也就是這個變數或方法它在程式碼中的適用範圍。在大多數的OOP中主要有public,private,protect三種作用域,對著三種作用域在這裡就不詳細解釋了,如果有OOP的經驗應該都有深入的了解。這裡我要說的是這三種作用域類型對Javascript來說幾乎是毫無意義的,因為Javascript中只有一種公共作用域,在Javascript中作用域是在函數中進行維護的。舉例:

複製程式碼 程式碼如下:

var test1='globle variable';
function example(){
var test2='example variable';
alert(test1);
alert(test2);
}
example();
alert(test1);
alert(test2);

根據我們前面解釋的,這裡的test1變數相當於window的一個屬性,所以它會在整個window作用域內起作用,而test2則在example()函數的內部聲明,所以它的作用域也就維持在example()方法的內部,如果在函數的外部呼叫test2瀏覽器會提示出錯。而在example()內部呼叫test1則沒問題。

根據這個我們再舉一個例子:

複製程式碼 程式碼如下:

var test='globle variable';
function example(){
var test='example variable';
}
example();
alert(test);

這個範例運行會是什麼結果呢?對,警告框會提示“globle variable”,因為example()函數內部的test變數其作用域只維持在內部,不會影響外部的test變數。如果我們將example()內部test變數的var關鍵字去掉呢?你可以自己試試看。

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

說到這你對this這個精靈古怪的傢伙有了比較清晰的認識了吧?根據它簡單的一個詮釋,this總是指向調用它所在函數的對象,根據作用域和作用域鏈,我們會很清晰的確定this的真面目。臨末再來一個開始那個例子的簡單變化:

複製程式碼 程式碼如下:

function test(){
alert(this);
}
var obj=function(){
var name='testObj';
}
obj.objTest=test;
obj.objTest2=function(){
test();
}
test();
obj.objTest();
obj.objTest2();

你猜會提示什麼內容呢?你可以運行一下試試(:P);

既然this是根據呼叫其所在函數的物件的改變而改變的,那我們可不可以強制改變它的呼叫物件呢?答案是肯定的,以後的文章會介紹一下這部分內容,以及Javascript中不同類型的資料成員的實作方式,閉包等概念。

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

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板