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 相关文章推荐
jQuery.autocomplete 支持中文输入(firefox)修正方法
Mar 10 Javascript
JQuery给元素添加/删除节点比如select
Apr 02 Javascript
基于jQuery1.9版本如何判断浏览器版本类型
Jan 12 Javascript
一览画面点击复选框后获取多个id值的方法
May 30 Javascript
Angularjs的$http异步删除数据详解及实例
Jul 27 Javascript
es6系列教程_ Map详解以及常用api介绍
Sep 25 Javascript
js中apply和Math.max()函数的问题及区别介绍
Mar 27 Javascript
微信小程序scroll-view横向滑动嵌套for循环的示例代码
Sep 20 Javascript
vue-rx的初步使用教程
Sep 21 Javascript
node.js监听文件变化的实现方法
Apr 17 Javascript
Vue实现 点击显示再点击隐藏效果(点击页面空白区域也隐藏效果)
Jan 16 Javascript
JavaScript实现手风琴效果
Feb 18 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 empty() 检查一个变量是否为空
2011/11/10 PHP
thinkphp3.2中Lite文件替换框架入口文件或应用入口文件的方法
2015/05/21 PHP
PHP中仿制 ecshop验证码实例
2017/01/06 PHP
PHP文字转图片功能原理与实现方法分析
2017/08/31 PHP
PHP实现图的邻接矩阵表示及几种简单遍历算法分析
2017/11/24 PHP
php桥接模式应用案例分析
2019/10/23 PHP
JS实多级联动下拉菜单类,简单实现省市区联动菜单!
2007/05/03 Javascript
JQuery中each()的使用方法说明
2010/08/19 Javascript
javascript截取字符串(通过substring实现并支持中英文混合)
2013/06/24 Javascript
jQuery中$.fn的用法示例介绍
2013/11/05 Javascript
jQuery动态添加、删除元素的方法
2014/01/09 Javascript
js jquery ajax的几种用法总结(及优缺点介绍)
2014/01/28 Javascript
jquery实现的图片点击滚动效果
2014/04/29 Javascript
Node.js中HTTP模块与事件模块详解
2014/11/14 Javascript
jquery实现图片放大镜功能
2015/11/23 Javascript
Javascript技术栈中的四种依赖注入小结
2016/02/27 Javascript
[原创]Bootstrap 中下拉菜单修改成鼠标悬停直接显示
2016/04/14 Javascript
利用浮层使select不可选的实现方法
2016/12/03 Javascript
JS实现unicode和UTF-8之间的互相转换互转
2017/07/05 Javascript
Vue使用mixins实现压缩图片代码
2018/03/14 Javascript
jQuery插件simplePagination的使用方法示例
2020/04/28 jQuery
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
2021/02/20 Vue.js
python实现查找两个字符串中相同字符并输出的方法
2015/07/11 Python
Python实现Event回调机制的方法
2019/02/13 Python
Python GUI自动化实现绕过验证码登录
2020/01/10 Python
Python创建临时文件和文件夹
2020/08/05 Python
Java Unsafe类实现原理及测试代码
2020/09/15 Python
详解Python GUI编程之PyQt5入门到实战
2020/12/10 Python
英国时尚运动品牌的合集:The Sports Edit
2017/12/20 全球购物
女方回门宴答谢词
2014/01/14 职场文书
青年文明号创建承诺
2014/03/31 职场文书
2014教师党员个人自我评议
2014/09/20 职场文书
处级领导班子全部召开专题民主生活会情况汇报
2014/09/27 职场文书
节约用水广告语60条
2019/11/14 职场文书
Apache Hudi数据布局黑科技降低一半查询时间
2022/03/31 Servers
redis lua限流算法实现示例
2022/07/15 Redis