快捷導(dǎo)航

javascript 嵌套的函數(shù)（作用域鏈）

更新時(shí)間：2010年03月15日 11:23:27 作者：

當(dāng)你進(jìn)行函數(shù)的嵌套時(shí)，要注意實(shí)際上作用域鏈?zhǔn)前l(fā)生變化的，這點(diǎn)可能看起來不太直觀。你可把下面的代碼置入firebug監(jiān)視值的變化。

嵌套的函數(shù)（作用域鏈）
當(dāng)你進(jìn)行函數(shù)的嵌套時(shí)，要注意實(shí)際上作用域鏈?zhǔn)前l(fā)生變化的，這點(diǎn)可能看起來不太直觀。你可把下面的代碼置入firebug監(jiān)視值的變化。

復(fù)制代碼代碼如下:

 
var testvar = 'window屬性'; 
var o1 = {testvar:'1', fun:function(){alert('o1: '+this.testvar+'<<');}}; 
var o2 = {testvar:'2', fun:function(){alert('o2: '+this.testvar);}}; 
o1.fun();'1' 
o2.fun();'2' 
o1.fun.call(o2);'2' 

這是本文的首個(gè)例子。

復(fù)制代碼代碼如下:

 
var testvar = 'window屬性'; 
var o3 = { 
testvar:'3', 
testvar2:'3**', 
fun:function(){ 
alert('o3: '+this.testvar);//'obj3' 
var inner = function(){ 
alert('o3-inner: '+this.testvar);//'window屬性' 
alert('o3-inner: '+this.testvar2);//undefined（未定義） 
}; 
inner(); 
} 
}; 
o3.fun(); 

這里我們換了別的函數(shù)，這個(gè)函數(shù)與原先的函數(shù)幾乎相似但區(qū)別是內(nèi)部函數(shù)的寫法。要注意的是內(nèi)部函數(shù)運(yùn)行時(shí)所在的作用域，和外部函數(shù)的作用域是不一樣的。Ext可讓你調(diào)用函數(shù)時(shí)指定函數(shù)的作用域，避免作用域的問題。
變量的聲明
初始化變量時(shí)一定要加上“var”關(guān)鍵字，沒有的話這就是一個(gè)全局變量。譬如，在下面的例子中，會(huì)有一個(gè)變量寫在函數(shù)內(nèi)部，然而你打算僅僅是聲明局部的變量，但實(shí)際也可能出現(xiàn)覆蓋全局變量的值的情形。在FIREBUG "DOM"的標(biāo)簽頁中，你可通過檢測“window”看到所有的全局變量。如果你發(fā)現(xiàn)有“k”或“x”變量那證明你把這個(gè)變量分配在一個(gè)不合適的作用域里面。見下例：

復(fù)制代碼代碼如下:

 
var i = 4; 
var j = 5; 
var k = 7; 
var fn = function(){ 
var i = 6; 
k = 8;//注意前面沒有var 所以這句話的意思的把8賦予到變量k中去！ 
alert(i);//6 
alert(j);//5 
alert(k+'-1');//8-1 
x = 1;//這句的作用有兩種情況，創(chuàng)建全部變量x或覆蓋（overwrite）全部變量x 
}; 
fn(); 
alert(k+'-2');//8-2 (注意不是7-2) 

與前面例子變化不大，另外注意的是函數(shù)內(nèi)的k前面是沒有var關(guān)鍵字的，所以這里不是聲明局部變量，而是將某個(gè)值再次分配到k這個(gè)全局變量中。另外要注意的是，alert方法執(zhí)行期間，參數(shù)i是當(dāng)前能找到的局部變量，它的值是6，但參數(shù)j在當(dāng)前作用域找不到，就沿著作用域鏈（scope chain）向上查找，一直找到全局變量的那個(gè)j為止。
在Ext中指定作用域
前面已提及，當(dāng)調(diào)用函數(shù)時(shí)Ext能靈活處理作用域的問題。部分內(nèi)容來自dj的帖子。
調(diào)用函數(shù)時(shí)，你可以把this想象為每個(gè)函數(shù)內(nèi)的一個(gè)特殊（躲起來的）參數(shù)。無論什么時(shí)候，JavaScript都會(huì)把this放到function內(nèi)部。它是基于一種非常簡單的思想：如果函數(shù)直接是某個(gè)對象的成員，那么this的值就是這個(gè)對象。如果函數(shù)不是某個(gè)對象的成員那么this的值便設(shè)為某種全局對象（常見有，瀏覽器中的window對象）。下面的內(nèi)部函數(shù)可以清晰的看出這種思想。
一個(gè)函數(shù)，若是分配到某個(gè)變量的，即不屬于任何對象下的一員，那么this的參數(shù)就變?yōu)閣indows對象。下面是一個(gè)例子，可直接粘貼到Firebug的console：

復(fù)制代碼代碼如下:

 
var obj = { 
    toString:function(){ return 'obj的范圍內(nèi)（作用域內(nèi)）';}, //重寫toString函數(shù)，方便執(zhí)行console.log(this)時(shí)的輸出 
    func: function(){ 
        // 這里的函數(shù)直接從屬與對象"object" 
        console.log(this); 
        var innerFunc = function(){ 
            //n這里的函數(shù)不是特定對象的直接成員，只是另外一個(gè)函數(shù)的變量而已 
            console.log(this); 
        }; 
        innerFunc(); 
    } 
}; 
obj.func(); 
// 輸出 "obj的范圍內(nèi)（作用域內(nèi)）" 
// 輸出 "Window的一些相關(guān)內(nèi)容..." 

缺省下是這樣調(diào)用一個(gè)參數(shù)的-但你也可以人為地改變this參數(shù)，只是語法上稍微不同。將最后一行的"obj.func();" 改為：

復(fù)制代碼代碼如下:

 
obj.func.call(window); 
// 輸出 "Window的一些相關(guān)內(nèi)容..." 
// 輸出 "Window的一些相關(guān)內(nèi)容..." 

從上面的例子中可以發(fā)現(xiàn)，call實(shí)際上是另外一個(gè)函數(shù)（方法）。call 屬于系統(tǒng)為obj.func內(nèi)建的方法（根據(jù)JavaScript之特點(diǎn)可得知，函數(shù)是一種對象。）。
通過這樣改變this指向的作用域，我們可以繼續(xù)用一個(gè)例子來修正innerFunc中的this參數(shù)，——“不正確”的指向：

復(fù)制代碼代碼如下:

 
var obj = { 
    toString:function(){ return 'obj的范圍內(nèi)（作用域內(nèi)）';}, //重寫toString函數(shù)，方便執(zhí)行console.log(this)時(shí)的輸出 
    func: function(){ 
        // 這里的函數(shù)直接從屬與對象"object" 
        console.log(this); 
        var innerFunc = function(){ 
            //n這里的函數(shù)不是特定對象的直接成員，只是另外一個(gè)函數(shù)的變量而已 
            console.log(this); 
        }; 
        innerFunc.call(this); 
    } 
}; 
obj.func(); 
// 輸出 "obj的范圍內(nèi)（作用域內(nèi)）" 
// 輸出 "obj的范圍內(nèi)（作用域內(nèi)）" 

Ext的作用域配置
可以看到，沒有分配作用域的函數(shù)，它的this"指向的是瀏覽器的window對象（如事件句柄event handler等等），——除非我們改變this的指針。Ext的很多類中 scope是一個(gè)配置項(xiàng)（configuration）能夠進(jìn)行指針的綁定。相關(guān)的例子參考Ajax.request。
Ext的createDelegate函數(shù)
*除了內(nèi)建的call/apply方法，Ext還為我們提供-- 輔助方法createDelegate。該函數(shù)的基本功能是綁定this指針但不立刻執(zhí)行。傳入一個(gè)參數(shù)，createDelegate方法會(huì)保證函數(shù)是運(yùn)行在這個(gè)參數(shù)的作用域中。如：

復(fù)制代碼代碼如下:

 
var obj = { 
    toString:function(){ return 'obj的范圍內(nèi)（作用域內(nèi)）';}, //重寫toString函數(shù)，方便執(zhí)行console.log(this)時(shí)的輸出 
    func: function(){ 
        // 這里的函數(shù)直接從屬與對象"object" 
        console.log(this); 
        var innerFunc = function(){ 
            //n這里的函數(shù)不是特定對象的直接成員，只是另外一個(gè)函數(shù)的變量而已 
            console.log(this); 
        }; 
        innerFunc = innerFunc.createDelegate(this); // 這里我們用委托的函數(shù)覆蓋了原函數(shù)。 
        innerFunc(); // 按照一般的寫法調(diào)用函數(shù) 
    } 
}; 
obj.func(); 
// 輸出 "obj的范圍內(nèi)（作用域內(nèi)）" 
// 輸出 "obj的范圍內(nèi)（作用域內(nèi)）" 

這是一個(gè)小小的例子，其原理是非?；净A(chǔ)的，希望能夠好好消化。盡管如此，在現(xiàn)實(shí)工作中，我們還是容易感到迷惑，但基本上，如果能按照上面的理論知識去分析來龍去脈，萬變還是不離其中的。
另外還有一樣?xùn)|西，看看下面的例子：

復(fù)制代碼代碼如下:

 
varsDs.load({callback: function(records){ 
col_length = varsDs.getCount();//這里的varDs離開了作用域？ 
//col_length = this.getCount();//這個(gè)this等于store嗎？ 
for (var x = 0; x < col_length; x++) 
{ 
colarray[x] = varsDs.getAt(x).get('hex'); 
} 
}});不過可以寫得更清晰： 
var obj = { 
callback: function(records){ 
col_length = varsDs.getCount();//這里的varDs離開了作用域？ 
//col_length = this.getCount();//這個(gè)this等于store嗎？ 
// ... 
} 
}; 

varsDs.load(obj);現(xiàn)在函數(shù)callback直接掛在obj上，因此this指針等于obj。
但是注意：這樣做沒用的。為什么？因?yàn)槟悴恢猳bj.callback最終執(zhí)行時(shí)發(fā)生什么情形。試想一下Ext.data.Store的load方法（仿造的實(shí)現(xiàn)）：

復(fù)制代碼代碼如下:

 
... 
    load : function(config) { 
        var o = {}; 
        o.callback = config.callback; 
         //進(jìn)行加載 
        o.callback(); 
    } 
... 

這個(gè)仿造的實(shí)現(xiàn)中,回調(diào)函數(shù)的作用域是私有變量“o”。因?yàn)橥ǔＤ銦o法得知函數(shù)是如何被調(diào)用的，如果不聲明作用域，你很可能無法在回調(diào)函數(shù)中使用this參數(shù)。

您可能感興趣的文章: