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

2019-11-21 00:40:35

字體：大中小

來源：轉載

供稿：網友

先看一段嵌套了兩層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()的調用來顯示me的name屬性，即：My name is: Jimbor。但瀏覽器的執行結果是：

復制代碼代碼如下:

My name is:

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

復制代碼代碼如下:

apply(this_obj, params_array)

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

復制代碼代碼如下:

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

再看瀏覽器執行結果：
My name is: Jimbor
類似的函數還有call()。區別是call()傳參的方式是一個接一個而不是打包成一個數組。
方法二：用that替換this
即我們可以在最外層的函數定義一個變量來指向this所指向的對象，一旦內部的函數需要調用this時，我們就用這個定義的變量。通常根據習慣，會將這個變量命名為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(); 

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

上一篇：javascript 嵌套的函數（作用域鏈）

下一篇：javascript之嵌套函數使用方法