JavaScript 嵌套函数指向this对象错误的解决方法
更新时间：2010年03月15日 11:16:32 作者：
JavaScript对于全局函数内的this绑定为全局对象，而对于嵌套函数也采用了相同的解释。
先看一段嵌套了两层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();
很好用，不是吗？因为不会涉及到具体的对象指定，所以更推荐第二种方法。
相关文章
这篇文章主要给大家介绍了关于toString.call()通用的判断数据类型方法的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-08-08
xmlplus组件设计系列之分隔框（DividedBox)（8）
xmlplus 是一个JavaScript框架，用于快速开发前后端项目。这篇文章主要介绍了xmlplus布局类组件之分隔框，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
一般参数值不能超过16位。如果超出16都是用0替代，导致我们查询不到自己想要的结果，本文将介绍如何处理这种现象2012-12-12
这篇文章主要为大家介绍了如何使用浏览器扩展篡改网页中的JS文件实现解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
js遍历详解(forEach, map, for, for...in, for...of)
在本篇文章里小编给大家整理的是关于js中的各种遍历(forEach, map, for, for...in, for...of)相关知识点用法总结，需要的朋友们参考下。2019-08-08
这篇文章主要介绍了异步安全加载javascript文件的方法,实例分析了javascript实现文件异步加载的具体技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-07-07
本文给大家整理汇总了一些做前端经常需要用的到JavaScript代码片段，非常的全面，有需要的小伙伴可以参考下2016-09-09
这篇文章主要介绍了JS实现仿QQ面板的手风琴效果折叠菜单代码,涉及JavaScript基于鼠标事件动态操作页面元素样式的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-09-09
最近改了一个公司项目,新增加了一个获取用户手机号功能,里面用到了关于获取用户信息和用户手机号的功能,下面这篇文章主要给大家介绍了关于微信小程序获取用户手机号码的相关资料,需要的朋友可以参考下2022-07-07
本篇文章给大家整理了关于JS中DOM节点的相关知识点以及代码实例，有兴趣的朋友可以跟着学习下。2018-04-04
最新评论