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的tab切换 js原理
Apr 01 Javascript
JavaScript中的关键字"VAR"使用详解 分享
Jul 31 Javascript
JQuery EasyUI 日期控件如何控制日期选择区间
May 05 Javascript
js与jquery实时监听输入框值的oninput与onpropertychange方法
Feb 05 Javascript
Javascript实现获取及设置光标位置的方法
Jul 21 Javascript
BootStrap select2 动态改变值的方法
Feb 10 Javascript
js如何编写简单的ajax方法库
Aug 02 Javascript
Koa2微信公众号开发之本地开发调试环境搭建
May 16 Javascript
element ui table(表格)实现点击一行展开功能
Dec 04 Javascript
vue组件中watch props根据v-if动态判断并挂载DOM的问题
May 12 Javascript
JS把字符串格式的时间转换成几秒前、几分钟前、几小时前、几天前等格式
Jul 10 Javascript
vue的$http的get请求要加上params操作
Nov 12 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 杂谈《重构-改善既有代码的设计》之五 简化函数调用
2012/05/07 PHP
PHP去掉从word直接粘贴过来的没有用格式的函数
2012/10/29 PHP
php生成zip压缩文件的方法详解
2013/06/09 PHP
PHP反射类ReflectionClass和ReflectionObject的使用方法
2013/11/13 PHP
JQuery 学习笔记 选择器之四
2009/07/23 Javascript
javascript &&和||运算法的另类使用技巧
2009/11/28 Javascript
JavaScript 格式字符串的应用
2010/03/29 Javascript
可编辑下拉框的2种实现方式
2014/06/13 Javascript
动态生成的DOM不会触发onclick事件的原因及解决方法
2016/08/06 Javascript
基于js对象,操作属性、方法详解
2016/08/11 Javascript
移动端js触摸事件详解
2016/09/18 Javascript
JavaScript中in和hasOwnProperty区别详解
2017/08/04 Javascript
浅谈在vue中使用mint-ui swipe遇到的问题
2018/09/27 Javascript
JS实现点击下拉列表文本框中出现对应的网址,点击跳转按钮实现跳转
2019/11/25 Javascript
JS运算符简单用法示例
2020/01/19 Javascript
vue学习笔记之slot插槽用法实例分析
2020/02/29 Javascript
零基础写python爬虫之爬虫的定义及URL构成
2014/11/04 Python
一个基于flask的web应用诞生(1)
2017/04/11 Python
python中判断文件编码的chardet(实例讲解)
2017/12/21 Python
python3爬取淘宝信息代码分析
2018/02/10 Python
python中plot实现即时数据动态显示方法
2018/06/22 Python
django用户登录和注销的实现方法
2018/07/16 Python
Python 多线程,threading模块,创建子线程的两种方式示例
2019/09/29 Python
python爬虫scrapy基于CrawlSpider类的全站数据爬取示例解析
2021/02/20 Python
socket.io 和canvas 实现的共享画板功能
2019/05/22 HTML / CSS
涉外文秘个人求职的自我评价
2013/10/07 职场文书
求职推荐信
2013/10/28 职场文书
追悼会子女答谢词
2014/01/28 职场文书
网上商城创业计划书范文
2014/01/31 职场文书
高级工程师英文求职信
2014/03/19 职场文书
公务员检讨书
2014/11/01 职场文书
交通事故死亡赔偿协议书
2014/12/03 职场文书
2015学习委员工作总结范文
2015/04/03 职场文书
公司年夜饭通知
2015/04/25 职场文书
关于车尾的标语大全
2015/08/11 职场文书
golang 实用库gotable的具体使用
2021/07/01 Golang