JavaScript 嵌套函数指向this对象错误的解决方法
更新时间：2010年03月15日 11:16:32 作者：
JavaScript对于全局函数内的this绑定为全局对象，而对于嵌套函数也采用了相同的解释。
（福利推荐：【腾讯云】服务器最新限时优惠活动，云服务器1核2G仅99元/年、2核4G仅768元/3年，立即抢购>>>：9i0i.cn/qcloud）
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
先看一段嵌套了两层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();
很好用，不是吗？因为不会涉及到具体的对象指定，所以更推荐第二种方法。
复制代码 代码如下:
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();
很好用，不是吗？因为不会涉及到具体的对象指定，所以更推荐第二种方法。
相关文章
DOM就是Html页面的模型，将每个标签都做为一个对象，JavaScript通过调用DOM中的属性、方法就可以对网页中的文本框、层等元素进行编程控制。比如通过操作文本框的DOM对象，就可以读取文本框中的值、设置文本框中的值。2015-07-07
这篇文章主要介绍了JavaScript设计模式中的桥接和中介者模式，桥接设计模式是一种偏向于组合的设计模式，而非继承的设计模式，实现的细节从一个模块推送给另一个具有单独模块的对象，而中介者设计模式是指通过一个中介者对象封装一系列的对象交互2022-06-06
小程序：授权、登录、session_key、unionId的详解
这篇文章主要介绍了小程序：授权、登录、session_key、unionId的详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
js图片上传中file、bolb、base64图片之间的相互转化
这篇文章主要介绍了js图片上传中file、bolb、base64图片之间的相互转化,blob转file,blob转base64,base64转file,使用canvas压缩图片,需要的朋友可以参考下2022-05-05
JSON与String互转的实现方法(Javascript)
下面小编就为大家带来一篇JSON与String互转的实现方法(Javascript) 。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，祝大家游戏愉快哦2016-09-09
比较简单的一个符合web标准的JS调用flash方法...2007-11-11
这篇文章主要为大家详细介绍了js仿淘宝和百度文库的评分功能的相关代码和实现思路,具有一定的参考价值，需要的朋友可以参考下2016-05-05
JavaScript navigator.userAgent获取浏览器信息案例讲解
这篇文章主要介绍了JavaScript navigator.userAgent获取浏览器信息案例讲解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-08-08
这篇文章主要介绍了js使用递归解析xml,需要的朋友可以参考下2014-12-12
原生javascript实现分享到朋友圈功能 支持ios和android
本文主要介绍网上一个牛人写的js可以实现在UC浏览器和QQ浏览器中调用浏览器内置的分享组件进行分享。2016-05-05
最新评论