JavaScript 嵌套函數(shù)指向this對象錯誤的解決方法

更新時間：2010年03月15日 11:16:32 作者：

JavaScript對于全局函數(shù)內(nèi)的this綁定為全局對象，而對于嵌套函數(shù)也采用了相同的解釋。

先看一段嵌套了兩層function的JavaScript代碼：

 
var me = { 
name : 'Jimbor', 
blog : 'http://jmedia.cn/', 
sayMyName : function(){ 
var pre = 'My name is: '; 
function displayName(){ 
alert(pre + this.name); 
} 
displayName(); 
} 
} 
me.sayMyName(); 

從代碼上看，我們希望通過sayMyName()的調(diào)用來顯示me的name屬性，即：My name is: Jimbor。但瀏覽器的執(zhí)行結(jié)果是：

復制代碼代碼如下:

My name is:

是什么原因使name屬性沒有正確顯示呢？原來JavaScript對于全局函數(shù)內(nèi)的this綁定為全局對象，而對于嵌套函數(shù)也采用了相同的解釋。這個錯誤產(chǎn)生的后果是不能輕易使用嵌套函數(shù)來完成某些特殊的任務，因為這些函數(shù)對this所指向的對象解釋不同。
當然對于這個例子，我們完全可以不用嵌套的函數(shù)來完成相應的功能。但是對于某些應用可能會需要這種結(jié)構(gòu)。幸運的是，我們還是有辦法來糾正這個錯誤的。
方法一：用apply()函數(shù)

復制代碼代碼如下:

apply(this_obj, params_array)

apply()函數(shù)可以在調(diào)用某個函數(shù)時重寫this所指向的對象，它接受兩個參數(shù)，第一個this_obj即想要重寫this所指向的對象，params_array則是用來傳遞給調(diào)用函數(shù)的參數(shù)數(shù)組。我們把原來的代碼改寫為：

復制代碼代碼如下:

 
var me = { 
name : 'Jimbor', 
blog : 'http://jmedia.cn/', 
sayMyName : function(){ 
var pre = 'My name is: '; 
function displayName(){ 
alert(pre + this.name); 
} 
displayName.apply(me); 
} 
} 
me.sayMyName(); 

再看瀏覽器執(zhí)行結(jié)果：
My name is: Jimbor
類似的函數(shù)還有call()。區(qū)別是call()傳參的方式是一個接一個而不是打包成一個數(shù)組。
方法二：用that替換this
即我們可以在最外層的函數(shù)定義一個變量來指向this所指向的對象，一旦內(nèi)部的函數(shù)需要調(diào)用this時，我們就用這個定義的變量。通常根據(jù)習慣，會將這個變量命名為that。那么原來的代碼可以改成這樣：

復制代碼代碼如下:

 
var me = { 
name : 'Jimbor', 
blog : 'http://jmedia.cn/', 
sayMyName : function(){ 
var pre = 'My name is: '; 
var that = this; 
function displayName(){ 
alert(pre + that.name); 
} 
displayName(); 
} 
} 
me.sayMyName(); 

很好用，不是嗎？因為不會涉及到具體的對象指定，所以更推薦第二種方法。

您可能感興趣的文章: