JavaScript 嵌套函数中 this 指向错误的修正方案

JavaScript 嵌套函数 this 指向问题分析

首先分析一段包含两层嵌套函数的 JavaScript 代码示例。

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

从代码逻辑来看，我们期望通过调用 sayMyName() 来输出 me 对象的 name 属性，预期结果应为：My name is: Jimbor。然而，浏览器实际执行的结果显示为：

 
My name is:

导致 name 属性未能正确显示的原因在于，JavaScript 中全局函数内部的 this 默认绑定为全局对象，嵌套函数也遵循这一规则。这种差异导致嵌套函数无法直接访问外层函数的 this 指向，从而使得依赖 this 的特殊任务难以通过嵌套结构直接完成。

虽然本例可以通过简化结构避免嵌套，但在某些应用场景中嵌套函数是必要的。幸运的是，我们可以通过特定方法修正这一指向错误。

修正方案一：使用 apply 或 call 方法

解决方案一：使用 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);
} 
} } }
} 
} 
调用 me.sayMyName();

再次查看浏览器执行结果：

My name is: Jimbor

与 apply() 类似的还有 call() 方法。两者的主要区别在于参数传递方式：call() 接受逐个传递的参数，而 apply() 接受参数数组。

修正方案二：使用 that 变量捕获上下文

解决方案二：使用 that 变量替代 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);
} 
} } }
} 
} 
调用 me.sayMyName();

这种方法非常实用。由于它不依赖于具体的对象指定，而是通过闭包捕获上下文，因此通常更推荐采用第二种方法。