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 相关文章推荐
Prototype使用指南之array.js
Jan 10 Javascript
IE event.srcElement和FF event.target 功能比较
Mar 01 Javascript
js获取某月的最后一天日期的简单实例
Jun 22 Javascript
AngularJS入门教程(二):AngularJS模板
Dec 06 Javascript
JS实现在页面随时自定义背景颜色的方法
Feb 27 Javascript
JavaScript的instanceof运算符学习教程
Jun 08 Javascript
jQuery基于toggle实现click触发DIV的显示与隐藏问题分析
Jun 12 Javascript
JavaScript trim 实现去除字符串首尾指定字符的简单方法
Dec 27 Javascript
微信小程序 自动登陆PHP源码实例(源码下载)
May 08 Javascript
Bootstrap3.3.7导航栏下拉菜单鼠标滑过展开效果
Oct 31 Javascript
详解Vue.js项目API、Router配置拆分实践
Mar 16 Javascript
微信小程序websocket实现聊天功能
Mar 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
解析阿里云ubuntu12.04环境下配置Apache+PHP+PHPmyadmin+MYsql
2013/06/26 PHP
Yii框架弹出窗口组件CJuiDialog用法分析
2017/01/07 PHP
javascript调试说明
2010/06/07 Javascript
js的写法基础分析
2011/01/17 Javascript
关于html+ashx开发中几个问题的解决方法
2011/07/18 Javascript
Ajax执行顺序流程及回调问题分析
2012/12/10 Javascript
java和javascript获取word文档的书签位置对比
2014/06/19 Javascript
jQuery新的事件绑定机制on()示例应用
2014/07/18 Javascript
AngularJS 使用$sce控制代码安全检查
2016/01/05 Javascript
js密码强度实时检测代码
2016/03/02 Javascript
javascript作用域、作用域链(菜鸟必看)
2016/06/16 Javascript
ES6入门教程之Class和Module详解
2017/05/17 Javascript
JS实现带阴历的日历功能详解
2019/01/24 Javascript
JS判断两个数组或对象是否相同的方法示例
2019/02/28 Javascript
微信小程序如何调用json数据接口并解析
2019/06/29 Javascript
VUE 解决mode为history页面为空白的问题
2019/11/01 Javascript
Vue父子组件传值的一些坑
2020/09/16 Javascript
[02:51]2014DOTA2 TI小组赛总结中国军团全部进军钥匙球馆
2014/07/15 DOTA
Python警察与小偷的实现之一客户端与服务端通信实例
2014/10/09 Python
使用python3.5仿微软记事本notepad
2016/06/15 Python
python学习教程之Numpy和Pandas的使用
2017/09/11 Python
解决python使用open打开文件中文乱码的问题
2017/12/29 Python
python:print格式化输出到文件的实例
2018/05/14 Python
python3写的简单本地文件上传服务器实例
2018/06/04 Python
python按比例随机切分数据的实现
2019/07/11 Python
python实现中文文本分句的例子
2019/07/15 Python
Python3 无重复字符的最长子串的实现
2019/10/08 Python
python scrapy重复执行实现代码详解
2019/12/28 Python
PyCharm 2020 激活到 2100 年的教程
2020/03/25 Python
在python中list作函数形参,防止被实参修改的实现方法
2020/06/05 Python
python3.9和pycharm的安装教程并创建简单项目的步骤
2021/02/03 Python
Under Armour安德玛荷兰官网:美国高端运动科技品牌
2019/07/10 全球购物
JSF面试题:Jsf中的核心类用那些?有什么作用?LiftCycle六大生命周期是什么?
2014/07/17 面试题
父亲追悼会答谢词
2014/01/17 职场文书
Django项目配置Memcached和Redis, 缓存选择哪个更有优势
2021/04/06 Python
如何用vue实现网页截图你知道吗
2021/11/17 Vue.js