javascript 嵌套的函數(shù)（作用域鏈）
更新時間：2010年03月15日 11:23:27 作者：
當你進行函數(shù)的嵌套時，要注意實際上作用域鏈是發(fā)生變化的，這點可能看起來不太直觀。你可把下面的代碼置入firebug監(jiān)視值的變化。
嵌套的函數(shù)（作用域鏈）
當你進行函數(shù)的嵌套時，要注意實際上作用域鏈是發(fā)生變化的，這點可能看起來不太直觀。你可把下面的代碼置入firebug監(jiān)視值的變化。
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'
這是本文的首個例子。
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ù)，這個函數(shù)與原先的函數(shù)幾乎相似但區(qū)別是內(nèi)部函數(shù)的寫法。要注意的是內(nèi)部函數(shù)運行時所在的作用域，和外部函數(shù)的作用域是不一樣的。Ext可讓你調(diào)用函數(shù)時指定函數(shù)的作用域，避免作用域的問題。
變量的聲明
初始化變量時一定要加上“var”關鍵字，沒有的話這就是一個全局變量。譬如，在下面的例子中，會有一個變量寫在函數(shù)內(nèi)部，然而你打算僅僅是聲明局部的變量，但實際也可能出現(xiàn)覆蓋全局變量的值的情形。在FIREBUG "DOM"的標簽頁中，你可通過檢測“window”看到所有的全局變量。如果你發(fā)現(xiàn)有“k”或“x”變量那證明你把這個變量分配在一個不合適的作用域里面。見下例：
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關鍵字的，所以這里不是聲明局部變量，而是將某個值再次分配到k這個全局變量中。另外要注意的是，alert方法執(zhí)行期間，參數(shù)i是當前能找到的局部變量，它的值是6，但參數(shù)j在當前作用域找不到，就沿著作用域鏈（scope chain）向上查找，一直找到全局變量的那個j為止。
在Ext中指定作用域
前面已提及，當調(diào)用函數(shù)時Ext能靈活處理作用域的問題。部分內(nèi)容來自dj的帖子。
調(diào)用函數(shù)時，你可以把this想象為每個函數(shù)內(nèi)的一個特殊（躲起來的）參數(shù)。無論什么時候，JavaScript都會把this放到function內(nèi)部。它是基于一種非常簡單的思想：如果函數(shù)直接是某個對象的成員，那么this的值就是這個對象。如果函數(shù)不是某個對象的成員那么this的值便設為某種全局對象（常見有，瀏覽器中的window對象）。下面的內(nèi)部函數(shù)可以清晰的看出這種思想。
一個函數(shù)，若是分配到某個變量的，即不屬于任何對象下的一員，那么this的參數(shù)就變?yōu)閣indows對象。下面是一個例子，可直接粘貼到Firebug的console：
var obj = {
toString:function(){ return 'obj的范圍內(nèi)（作用域內(nèi)）';}, //重寫toString函數(shù)，方便執(zhí)行console.log(this)時的輸出
func: function(){
// 這里的函數(shù)直接從屬與對象"object"
console.log(this);
var innerFunc = function(){
//n這里的函數(shù)不是特定對象的直接成員，只是另外一個函數(shù)的變量而已
console.log(this);
};
innerFunc();
}
};
obj.func();
// 輸出 "obj的范圍內(nèi)（作用域內(nèi)）"
// 輸出 "Window的一些相關內(nèi)容..."
缺省下是這樣調(diào)用一個參數(shù)的-但你也可以人為地改變this參數(shù)，只是語法上稍微不同。將最后一行的"obj.func();" 改為：
obj.func.call(window);
// 輸出 "Window的一些相關內(nèi)容..."
// 輸出 "Window的一些相關內(nèi)容..."
從上面的例子中可以發(fā)現(xiàn)，call實際上是另外一個函數(shù)（方法）。call 屬于系統(tǒng)為obj.func內(nèi)建的方法（根據(jù)JavaScript之特點可得知，函數(shù)是一種對象。）。
通過這樣改變this指向的作用域，我們可以繼續(xù)用一個例子來修正innerFunc中的this參數(shù)，——“不正確”的指向：
var obj = {
toString:function(){ return 'obj的范圍內(nèi)（作用域內(nèi)）';}, //重寫toString函數(shù)，方便執(zhí)行console.log(this)時的輸出
func: function(){
// 這里的函數(shù)直接從屬與對象"object"
console.log(this);
var innerFunc = function(){
//n這里的函數(shù)不是特定對象的直接成員，只是另外一個函數(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是一個配置項（configuration）能夠進行指針的綁定。相關的例子參考Ajax.request。
Ext的createDelegate函數(shù)
*除了內(nèi)建的call/apply方法，Ext還為我們提供-- 輔助方法createDelegate。 該函數(shù)的基本功能是綁定this指針但不立刻執(zhí)行。傳入一個參數(shù)，createDelegate方法會保證函數(shù)是運行在這個參數(shù)的作用域中。如：
var obj = {
toString:function(){ return 'obj的范圍內(nèi)（作用域內(nèi)）';}, //重寫toString函數(shù)，方便執(zhí)行console.log(this)時的輸出
func: function(){
// 這里的函數(shù)直接從屬與對象"object"
console.log(this);
var innerFunc = function(){
//n這里的函數(shù)不是特定對象的直接成員，只是另外一個函數(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)）"
這是一個小小的例子，其原理是非常基本基礎的，希望能夠好好消化。盡管如此，在現(xiàn)實工作中，我們還是容易感到迷惑，但基本上，如果能按照上面的理論知識去分析來龍去脈，萬變還是不離其中的。
另外還有一樣東西，看看下面的例子：
varsDs.load({callback: function(records){
col_length = varsDs.getCount();//這里的varDs離開了作用域？
//col_length = this.getCount();//這個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();//這個this等于store嗎？
// ...
}
};
varsDs.load(obj);現(xiàn)在函數(shù)callback直接掛在obj上，因此this指針等于obj。
但是注意： 這樣做沒用的。為什么？因為你不知obj.callback最終執(zhí)行時發(fā)生什么情形。試想一下Ext.data.Store的load方法（仿造的實現(xiàn)）：
...
load : function(config) {
var o = {};
o.callback = config.callback;
//進行加載
o.callback();
}
...
這個仿造的實現(xiàn)中,回調(diào)函數(shù)的作用域是私有變量“o”。 因為通常你無法得知函數(shù)是如何被調(diào)用的，如果不聲明作用域，你很可能無法在回調(diào)函數(shù)中使用this參數(shù)。
當你進行函數(shù)的嵌套時，要注意實際上作用域鏈是發(fā)生變化的，這點可能看起來不太直觀。你可把下面的代碼置入firebug監(jiān)視值的變化。
復制代碼 代碼如下:
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'
這是本文的首個例子。
復制代碼 代碼如下:
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ù)，這個函數(shù)與原先的函數(shù)幾乎相似但區(qū)別是內(nèi)部函數(shù)的寫法。要注意的是內(nèi)部函數(shù)運行時所在的作用域，和外部函數(shù)的作用域是不一樣的。Ext可讓你調(diào)用函數(shù)時指定函數(shù)的作用域，避免作用域的問題。
變量的聲明
初始化變量時一定要加上“var”關鍵字，沒有的話這就是一個全局變量。譬如，在下面的例子中，會有一個變量寫在函數(shù)內(nèi)部，然而你打算僅僅是聲明局部的變量，但實際也可能出現(xiàn)覆蓋全局變量的值的情形。在FIREBUG "DOM"的標簽頁中，你可通過檢測“window”看到所有的全局變量。如果你發(fā)現(xiàn)有“k”或“x”變量那證明你把這個變量分配在一個不合適的作用域里面。見下例：
復制代碼 代碼如下:
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關鍵字的，所以這里不是聲明局部變量，而是將某個值再次分配到k這個全局變量中。另外要注意的是，alert方法執(zhí)行期間，參數(shù)i是當前能找到的局部變量，它的值是6，但參數(shù)j在當前作用域找不到，就沿著作用域鏈（scope chain）向上查找，一直找到全局變量的那個j為止。
在Ext中指定作用域
前面已提及，當調(diào)用函數(shù)時Ext能靈活處理作用域的問題。部分內(nèi)容來自dj的帖子。
調(diào)用函數(shù)時，你可以把this想象為每個函數(shù)內(nèi)的一個特殊（躲起來的）參數(shù)。無論什么時候，JavaScript都會把this放到function內(nèi)部。它是基于一種非常簡單的思想：如果函數(shù)直接是某個對象的成員，那么this的值就是這個對象。如果函數(shù)不是某個對象的成員那么this的值便設為某種全局對象（常見有，瀏覽器中的window對象）。下面的內(nèi)部函數(shù)可以清晰的看出這種思想。
一個函數(shù)，若是分配到某個變量的，即不屬于任何對象下的一員，那么this的參數(shù)就變?yōu)閣indows對象。下面是一個例子，可直接粘貼到Firebug的console：
復制代碼 代碼如下:
var obj = {
toString:function(){ return 'obj的范圍內(nèi)（作用域內(nèi)）';}, //重寫toString函數(shù)，方便執(zhí)行console.log(this)時的輸出
func: function(){
// 這里的函數(shù)直接從屬與對象"object"
console.log(this);
var innerFunc = function(){
//n這里的函數(shù)不是特定對象的直接成員，只是另外一個函數(shù)的變量而已
console.log(this);
};
innerFunc();
}
};
obj.func();
// 輸出 "obj的范圍內(nèi)（作用域內(nèi)）"
// 輸出 "Window的一些相關內(nèi)容..."
缺省下是這樣調(diào)用一個參數(shù)的-但你也可以人為地改變this參數(shù)，只是語法上稍微不同。將最后一行的"obj.func();" 改為：
復制代碼 代碼如下:
obj.func.call(window);
// 輸出 "Window的一些相關內(nèi)容..."
// 輸出 "Window的一些相關內(nèi)容..."
從上面的例子中可以發(fā)現(xiàn)，call實際上是另外一個函數(shù)（方法）。call 屬于系統(tǒng)為obj.func內(nèi)建的方法（根據(jù)JavaScript之特點可得知，函數(shù)是一種對象。）。
通過這樣改變this指向的作用域，我們可以繼續(xù)用一個例子來修正innerFunc中的this參數(shù)，——“不正確”的指向：
復制代碼 代碼如下:
var obj = {
toString:function(){ return 'obj的范圍內(nèi)（作用域內(nèi)）';}, //重寫toString函數(shù)，方便執(zhí)行console.log(this)時的輸出
func: function(){
// 這里的函數(shù)直接從屬與對象"object"
console.log(this);
var innerFunc = function(){
//n這里的函數(shù)不是特定對象的直接成員，只是另外一個函數(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是一個配置項（configuration）能夠進行指針的綁定。相關的例子參考Ajax.request。
Ext的createDelegate函數(shù)
*除了內(nèi)建的call/apply方法，Ext還為我們提供-- 輔助方法createDelegate。 該函數(shù)的基本功能是綁定this指針但不立刻執(zhí)行。傳入一個參數(shù)，createDelegate方法會保證函數(shù)是運行在這個參數(shù)的作用域中。如：
復制代碼 代碼如下:
var obj = {
toString:function(){ return 'obj的范圍內(nèi)（作用域內(nèi)）';}, //重寫toString函數(shù)，方便執(zhí)行console.log(this)時的輸出
func: function(){
// 這里的函數(shù)直接從屬與對象"object"
console.log(this);
var innerFunc = function(){
//n這里的函數(shù)不是特定對象的直接成員，只是另外一個函數(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)）"
這是一個小小的例子，其原理是非常基本基礎的，希望能夠好好消化。盡管如此，在現(xiàn)實工作中，我們還是容易感到迷惑，但基本上，如果能按照上面的理論知識去分析來龍去脈，萬變還是不離其中的。
另外還有一樣東西，看看下面的例子：
復制代碼 代碼如下:
varsDs.load({callback: function(records){
col_length = varsDs.getCount();//這里的varDs離開了作用域？
//col_length = this.getCount();//這個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();//這個this等于store嗎？
// ...
}
};
varsDs.load(obj);現(xiàn)在函數(shù)callback直接掛在obj上，因此this指針等于obj。
但是注意： 這樣做沒用的。為什么？因為你不知obj.callback最終執(zhí)行時發(fā)生什么情形。試想一下Ext.data.Store的load方法（仿造的實現(xiàn)）：
復制代碼 代碼如下:
...
load : function(config) {
var o = {};
o.callback = config.callback;
//進行加載
o.callback();
}
...
這個仿造的實現(xiàn)中,回調(diào)函數(shù)的作用域是私有變量“o”。 因為通常你無法得知函數(shù)是如何被調(diào)用的，如果不聲明作用域，你很可能無法在回調(diào)函數(shù)中使用this參數(shù)。
相關文章
這篇文章主要為大家詳細介紹了JavaScript編寫貪吃蛇游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-07-07
使用Modello編寫JavaScript類...2006-12-12
如何實現(xiàn)表格中行點擊時的漸擴效果！...2007-01-01
Bootstrap時間選擇器datetimepicker和daterangepicker使用實例解析
這篇文章主要為大家詳細解析了Bootstrap時間選擇器datetimepicker和daterangepicker使用實例,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
本文給大家分享form表單按回車自動提交表單的方法，在前端開發(fā)中經(jīng)常會遇到，今天小編給大家介紹具體實現(xiàn)方法，感興趣的朋友一起看看2016-11-11
下面小編就為大家?guī)硪黄赾anvas粒子系統(tǒng)的構建詳解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
這個網(wǎng)站風格切換除了帶記憶功能外，還可設定保持時間，比如5天-180天，過了時間就自動恢復到默認樣式表。2008-10-10
JavaScript中Array的filter函數(shù)詳解
這篇文章主要介紹了JavaScript中Array的filter函數(shù)詳解,filter?為數(shù)組中的每個元素調(diào)用一次callback函數(shù),W更多具體內(nèi)容，需要的朋友可以參考一下2022-07-07
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)滴滴導航tab切換效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-07-07
這篇文章主要為大家分享了一些精彩的JavaScript代碼片段，大家喜歡的收藏一下2017-01-01