JavaScript 嵌套函數中this的理解

嵌套的函數（範圍鏈）

當你進行函數的嵌套時，要注意實際上範圍鏈是發生變化的，這點可能看起來不太直觀。你可把下面的代碼置入firebug監視值的變化。

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(); // output: o1: 1<<o2.fun(); // output: o2: 2o1.fun.call(o2); // output: o1: 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();

這裡我們換了別的函數，這個函數與原先的函數幾乎相似但區別是內建函式的寫法。要注意的是內建函式運行時所在的範圍，和外部函數的範圍是不一樣的。Ext可讓你調用函數時指定函數的範圍，避免範圍的問題。

變數的聲明

初始設定變數時一定要加上“var”關鍵字，沒有的話這就是一個全域變數。譬如，在下面的例子中，會有一個變數寫在函數內部，然而你打算僅僅是聲明局部的變數，但實際也可能出現覆蓋全域變數的值的情形。在FIREBUG "DOM"的標籤頁中，你可通過檢測“window”看到所有的全域變數。如果你發現有“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;//這句的作用有兩種情況，建立全部變數x或覆蓋（overwrite）全部變數x};fn();alert(k+'-2');//8-2 (注意不是7-2)

與前面例子變化不大，另外注意的是函數內的k前面是沒有var關鍵字的，所以這裡不是聲明局部變數，而是將某個值再次分配到k這個全域變數中。另外要注意的是，alert方法執行期間，參數i是當前能找到的局部變數，它的值是6，但參數j在當前範圍找不到，就沿著範圍鏈（scope chain）向上尋找，一直找到全域變數的那個j為止。

在Ext中指定範圍

前面已提及，當調用函數時Ext能靈活處理範圍的問題。部分內容來自dj的文章。

調用函數時，你可以把this想象為每個函數內的一個特殊（躲起來的）參數。無論什麼時候，JavaScript都會把this放到function內部。它是基於一種非常簡單的思想：如果函數直接是某個對象的成員，那麼this的值就是這個對象。如果函數不是某個對象的成員那麼this的值便設為某種全域對象（常見有，瀏覽器中的window對象）。下面的內建函式可以清晰的看出這種思想。

一個函數，若是分配到某個變數的，即不屬於任何對象下的一員，那麼this的參數就變為windows對象。下面是一個例子，可直接粘貼到Firebug的console：

var obj = {toString:function(){ return 'obj的範圍內（範圍內）';}, //重寫toString函數，方便執行console.log(this)時的輸出func: function(){// 這裡的函數直接從屬與對象"object"console.log(this); var innerFunc = function(){//n這裡的函數不是特定對象的直接成員，只是另外一個函數的變數而已console.log(this); };innerFunc();}};obj.func(); // 輸出 "obj的範圍內（範圍內）"// 輸出 "Window的一些相關內容..."

預設下是這樣調用一個參數的-但你也可以人為地改變this參數，只是文法上稍微不同。將最後一行的"obj.func();" 改為：

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

從上面的例子中可以發現，call實際上是另外一個函數（方法）。call 屬於系統為obj.func內建的方法（根據JavaScript之特點可得知，函數是一種對象。）。

通過這樣改變this指向的範圍，我們可以繼續用一個例子來修正innerFunc中的this參數，——“不正確”的指向：

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

Ext的範圍配置

可以看到，沒有分配範圍的函數，它的this"指向的是瀏覽器的window對象（如事件控制代碼event handler等等），——除非我們改變this的指標。Ext的很多類中scope是一個配置項（configuration）能夠進行指標的綁定。相關的例子參考Ajax.request。

Ext的createDelegate函數

*除了內建的call/apply方法，Ext還為我們提供-- 輔助方法createDelegate。 該函數的準系統是綁定this指標但不立刻執行。傳入一個參數，createDelegate方法會保證函數是運行在這個參數的範圍中。如：

var obj = {toString:function(){ return 'obj的範圍內（範圍內）';}, //重寫toString函數，方便執行console.log(this)時的輸出func: function(){// 這裡的函數直接從屬與對象"object"console.log(this); var innerFunc = function(){//n這裡的函數不是特定對象的直接成員，只是另外一個函數的變數而已console.log(this); };innerFunc = innerFunc.createDelegate(this); // 這裡我們用委託的函數覆蓋了原函數。innerFunc(); // 按照一般的寫法調用函數}};obj.func(); // 輸出 "obj的範圍內（範圍內）"// 輸出 "obj的範圍內（範圍內）"

這是一個小小的例子，其原理是非常基本基礎的，希望能夠好好消化。儘管如此，在現實工作中，我們還是容易感到迷惑，但基本上，如果能按照上面的理論知識去分析來龍去脈，萬變還是不離其中的。

另外還有一樣東西，看看下面的例子：

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);

現在函數callback直接掛在obj上，因此this指標等於obj。

但是注意： 這樣做沒用的。為什嗎？因為你不知obj.callback最終執行時發生什麼情形。試想一下Ext.data.Store的load方法（仿造的實現）：

...load : function(config) {var o = {};o.callback = config.callback;   //進行載入 o.callback();}...

這個仿造的實現中,回呼函數的範圍是私人變數“o”。 因為通常你無法得知函數是如何被調用的，如果不聲明範圍，你很可能無法在回呼函數中使用this參數。

嵌套的函數（範圍鏈）

當你進行函數的嵌套時，要注意實際上範圍鏈是發生變化的，這點可能看起來不太直觀。你可把下面的代碼置入firebug監視值的變化。

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(); // output: o1: 1<<o2.fun(); // output: o2: 2o1.fun.call(o2); // output: o1: 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();

這裡我們換了別的函數，這個函數與原先的函數幾乎相似但區別是內建函式的寫法。要注意的是內建函式運行時所在的範圍，和外部函數的範圍是不一樣的。Ext可讓你調用函數時指定函數的範圍，避免範圍的問題。

變數的聲明

初始設定變數時一定要加上“var”關鍵字，沒有的話這就是一個全域變數。譬如，在下面的例子中，會有一個變數寫在函數內部，然而你打算僅僅是聲明局部的變數，但實際也可能出現覆蓋全域變數的值的情形。在FIREBUG "DOM"的標籤頁中，你可通過檢測“window”看到所有的全域變數。如果你發現有“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;//這句的作用有兩種情況，建立全部變數x或覆蓋（overwrite）全部變數x};fn();alert(k+'-2');//8-2 (注意不是7-2)

與前面例子變化不大，另外注意的是函數內的k前面是沒有var關鍵字的，所以這裡不是聲明局部變數，而是將某個值再次分配到k這個全域變數中。另外要注意的是，alert方法執行期間，參數i是當前能找到的局部變數，它的值是6，但參數j在當前範圍找不到，就沿著範圍鏈（scope chain）向上尋找，一直找到全域變數的那個j為止。

在Ext中指定範圍

前面已提及，當調用函數時Ext能靈活處理範圍的問題。部分內容來自dj的文章。

調用函數時，你可以把this想象為每個函數內的一個特殊（躲起來的）參數。無論什麼時候，JavaScript都會把this放到function內部。它是基於一種非常簡單的思想：如果函數直接是某個對象的成員，那麼this的值就是這個對象。如果函數不是某個對象的成員那麼this的值便設為某種全域對象（常見有，瀏覽器中的window對象）。下面的內建函式可以清晰的看出這種思想。

一個函數，若是分配到某個變數的，即不屬於任何對象下的一員，那麼this的參數就變為windows對象。下面是一個例子，可直接粘貼到Firebug的console：

var obj = {toString:function(){ return 'obj的範圍內（範圍內）';}, //重寫toString函數，方便執行console.log(this)時的輸出func: function(){// 這裡的函數直接從屬與對象"object"console.log(this); var innerFunc = function(){//n這裡的函數不是特定對象的直接成員，只是另外一個函數的變數而已console.log(this); };innerFunc();}};obj.func(); // 輸出 "obj的範圍內（範圍內）"// 輸出 "Window的一些相關內容..."

預設下是這樣調用一個參數的-但你也可以人為地改變this參數，只是文法上稍微不同。將最後一行的"obj.func();" 改為：

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

從上面的例子中可以發現，call實際上是另外一個函數（方法）。call 屬於系統為obj.func內建的方法（根據JavaScript之特點可得知，函數是一種對象。）。

通過這樣改變this指向的範圍，我們可以繼續用一個例子來修正innerFunc中的this參數，——“不正確”的指向：

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

Ext的範圍配置

可以看到，沒有分配範圍的函數，它的this"指向的是瀏覽器的window對象（如事件控制代碼event handler等等），——除非我們改變this的指標。Ext的很多類中scope是一個配置項（configuration）能夠進行指標的綁定。相關的例子參考Ajax.request。

Ext的createDelegate函數

*除了內建的call/apply方法，Ext還為我們提供-- 輔助方法createDelegate。 該函數的準系統是綁定this指標但不立刻執行。傳入一個參數，createDelegate方法會保證函數是運行在這個參數的範圍中。如：

var obj = {toString:function(){ return 'obj的範圍內（範圍內）';}, //重寫toString函數，方便執行console.log(this)時的輸出func: function(){// 這裡的函數直接從屬與對象"object"console.log(this); var innerFunc = function(){//n這裡的函數不是特定對象的直接成員，只是另外一個函數的變數而已console.log(this); };innerFunc = innerFunc.createDelegate(this); // 這裡我們用委託的函數覆蓋了原函數。innerFunc(); // 按照一般的寫法調用函數}};obj.func(); // 輸出 "obj的範圍內（範圍內）"// 輸出 "obj的範圍內（範圍內）"

這是一個小小的例子，其原理是非常基本基礎的，希望能夠好好消化。儘管如此，在現實工作中，我們還是容易感到迷惑，但基本上，如果能按照上面的理論知識去分析來龍去脈，萬變還是不離其中的。

另外還有一樣東西，看看下面的例子：

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);

現在函數callback直接掛在obj上，因此this指標等於obj。

但是注意： 這樣做沒用的。為什嗎？因為你不知obj.callback最終執行時發生什麼情形。試想一下Ext.data.Store的load方法（仿造的實現）：

...load : function(config) {var o = {};o.callback = config.callback;   //進行載入 o.callback();}...

這個仿造的實現中,回呼函數的範圍是私人變數“o”。 因為通常你無法得知函數是如何被調用的，如果不聲明範圍，你很可能無法在回呼函數中使用this參數。