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之嵌套函数使用方法