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 相关文章推荐
使用TextRange获取输入框中光标的位
Oct 14 Javascript
javascript 面向对象全新理练之继承与多态
Dec 03 Javascript
seajs1.3.0源码解析之module依赖有序加载
Nov 07 Javascript
jQuery控制DIV层实现由大到小,由远及近动画变化效果
Oct 09 Javascript
JS 清除字符串数组中,重复元素的实现方法
May 24 Javascript
JS中使用变量保存arguments对象的方法
Jun 03 Javascript
js判断所有表单项不为空则提交表单的实现方法
Sep 09 Javascript
jQuery代码实现实时获取时间
Jan 29 Javascript
js控制一个按钮是否可点击(可使用)disabled的实例
Feb 14 Javascript
详解小程序input框失焦事件在提交事件前的处理
May 05 Javascript
JS中间件设计模式的深入探讨与实例分析
Apr 11 Javascript
vue内置组件keep-alive事件动态缓存实例
Oct 30 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
PHP5.0正式发布 不完全兼容PHP4 新增多项功能
2006/10/09 PHP
php 自写函数代码 获取关键字 去超链接
2010/02/08 PHP
PHP mb_convert_encoding文字编码的转换函数介绍
2011/11/10 PHP
详解php魔术方法(Magic methods)的使用方法
2016/02/14 PHP
Laravel框架使用monolog_mysql实现将系统日志信息保存到mysql数据库的方法
2018/08/16 PHP
laravel unique验证、确认密码confirmed验证以及密码修改验证的方法
2019/10/16 PHP
基于jquery的划词搜索实现(备忘)
2010/09/14 Javascript
从jQuery.camelCase()学习string.replace() 函数学习
2011/09/13 Javascript
JavaScript 实现鼠标拖动元素实例代码
2014/02/24 Javascript
Javascript核心读书有感之表达式和运算符
2015/02/11 Javascript
js实现横向百叶窗效果网页切换动画效果的方法
2015/03/02 Javascript
jQuery实现鼠标划过添加和删除class的方法
2015/06/26 Javascript
JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码
2015/10/31 Javascript
JS实现简单的tab切换选项卡效果
2016/09/21 Javascript
微信小程序 选项卡的简单实例
2017/05/24 Javascript
Vue使用NPM方式搭建项目
2018/10/25 Javascript
了解javascript中let和var及const关键字的区别
2019/05/24 Javascript
JS使用cookie保存用户登录信息操作示例
2019/05/30 Javascript
如何实现js拖拽效果及原理解析
2020/05/08 Javascript
在vue中配置不同的代理同时访问不同的后台操作
2020/09/11 Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
2020/11/01 Javascript
[03:24]CDEC.Y赛前采访 努力备战2016国际邀请赛中国区预选赛
2016/06/25 DOTA
python函数形参用法实例分析
2015/08/04 Python
Python爬虫实例_城市公交网络站点数据的爬取方法
2018/01/10 Python
Flask之flask-script模块使用
2018/07/26 Python
对python中的 os.mkdir和os.mkdirs详解
2018/10/16 Python
Python实现点阵字体读取与转换的方法
2019/01/29 Python
Python中如何添加自定义模块
2020/06/09 Python
python实现企业微信定时发送文本消息的示例代码
2020/11/24 Python
CSS3的颜色渐变效果的示例代码
2017/09/29 HTML / CSS
美国最大的宠物用品零售商:PetSmart
2016/11/14 全球购物
高一英语教学反思
2014/01/22 职场文书
小学生评语大全
2014/04/18 职场文书
中学学校门卫岗位职责
2014/08/15 职场文书
2015年财务部工作总结
2015/04/10 职场文书
pandas 操作 Excel操作总结
2021/03/31 Python