JavaScript 嵌套函数指向this对象错误的解决方法


Posted in Javascript onMarch 15, 2010

先看一段嵌套了两层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 相关文章推荐
js类型检查实现代码
Oct 29 Javascript
Knockoutjs的环境搭建教程
Nov 26 Javascript
seaJs的模块定义和模块加载浅析
Jun 06 Javascript
JavaScript中Window对象的属性及事件
Dec 25 Javascript
jquery实现具有收缩功能的垂直导航菜单
Feb 16 Javascript
setTimeout学习小结
Feb 08 Javascript
AngularJS ui-router (嵌套路由)实例
Mar 10 Javascript
Express之get,pos请求参数的获取
May 02 Javascript
基于js Canvas实现二次贝塞尔曲线
Dec 25 Javascript
JS为什么说async/await是generator的语法糖详解
Jul 11 Javascript
基于JQuery和DWR实现异步数据传递
Oct 16 jQuery
Ajax实现三级联动效果
Oct 05 Javascript
JQuery 常用操作代码
Mar 14 #Javascript
Jquery Ajax学习实例 向页面发出请求,返回XML格式数据
Mar 14 #Javascript
Jquery cookie操作代码
Mar 14 #Javascript
javascript 解决表单仍然提交即使监听处理函数返回false
Mar 14 #Javascript
jQuery第三课 修改元素属性及内容的代码
Mar 14 #Javascript
jQuery 第二课 操作包装集元素代码
Mar 14 #Javascript
jQuery入门第一课 jQuery选择符
Mar 14 #Javascript
You might like
PHP执行linux系统命令的常用函数使用说明
2010/04/27 PHP
详解PHP错误日志的获取方法
2015/07/20 PHP
微信公众号支付之坑:调用支付jsapi缺少参数 timeStamp等错误解决方法
2016/01/12 PHP
Codeigniter中集成smarty和adodb的方法
2016/03/04 PHP
让你的PHP,APACHE,NGINX支持大文件上传
2021/03/09 PHP
JS宝典学习笔记(下)
2007/01/10 Javascript
改版了网上的一个js操作userdata
2007/04/27 Javascript
jquery post方式传递多个参数值后台以数组的方式进行接收
2013/01/11 Javascript
基于jQuery实现的QQ表情插件
2015/08/25 Javascript
学习javascript的闭包,原型,和匿名函数之旅
2015/10/18 Javascript
jQuery实用技巧必备(上)
2015/11/02 Javascript
jQuery插件zTree实现获取一级节点数据的方法
2017/03/08 Javascript
vuex直接赋值的三种方法总结
2018/09/16 Javascript
django使用channels2.x实现实时通讯
2018/11/28 Javascript
js中Array对象的常用遍历方法详解
2019/01/17 Javascript
jquery实现的分页显示功能示例
2019/08/23 jQuery
微信小程序实现简单文字跑马灯
2020/05/26 Javascript
python读取word文档的方法
2015/05/09 Python
深入浅析python继承问题
2016/05/29 Python
python+PyQT实现系统桌面时钟
2020/06/16 Python
使用 Visual Studio Code(VSCode)搭建简单的Python+Django开发环境的方法步骤
2018/12/17 Python
python实现websocket的客户端压力测试
2019/06/25 Python
python+opencv像素的加减和加权操作的实现
2019/07/14 Python
Python实现变声器功能(萝莉音御姐音)
2019/12/05 Python
如何用 Python 制作 GitHub 消息助手
2021/02/20 Python
html5中audio支持音频格式的解决方法
2018/08/24 HTML / CSS
碧欧泉法国官网:Biotherm法国
2019/10/23 全球购物
手术室护士自我鉴定
2013/10/14 职场文书
面料业务员岗位职责
2013/12/26 职场文书
八一演出活动方案
2014/02/03 职场文书
办公室主任职责范本
2014/03/07 职场文书
医疗专业毕业生求职信
2014/08/28 职场文书
商务考察邀请函模板
2015/02/02 职场文书
本科毕业答辩开场白
2015/05/27 职场文书
OpenCV-Python实现人脸美白算法的实例
2021/06/11 Python
Dubbo+zookeeper搭配分布式服务的过程详解
2022/04/03 Java/Android