实例讲解JavaScript中的this指向错误解决方法


Posted in Javascript onJune 13, 2016

看如下对象定义:

'use strict'
var jane = {
  name : ‘Jane',
  display : function(){
    retrun 'Person named ' + this.name;
  }
};

这样能正常调用

jane.display();

下面的调用会出错:

var func = jane.display;
func()
TypeError: Cannot read property 'name' of undefined

因为,this指向已经改变,正确的方式如下:

var func2 = jane.display.bind(jane);
func2()
'Penson named Jane'

所有函数都有其特殊的this变量,如下面的forEach

var jane = {
  name : 'Jane',
  friends: ['Tarzan', 'Cheeta'],
  sayHiToFriends: function(){
    'use strict';
    this.friends.forEach(function(friend) {
      // 'this' is undefined here
      console.log(this.name + ' says hi to '+ friend);
    });
  }
}

调用sayHiToFriends会产生一个错误:

jane.sayHiToFriends()
TypeError: Cannot read property 'name' of undefined

解决方案一:将this保存在不同的变量中

var jane = {
  name : 'Jane',
  friends: ['Tarzan', 'Cheeta'],
  sayHiToFriends: function(){
    'use strict';
    var that = this;
    this.friends.forEach(function(friend) {
      console.log(that.name + ' says hi to '+ friend);
    });
  }
}

解决方案二:利用forEach的第二个参数,它可以给this指定一个值

var jane = {
  name : 'Jane',
  friends: ['Tarzan', 'Cheeta'],
  sayHiToFriends: function(){
    'use strict';
    this.friends.forEach(function(friend) {
      console.log(this.name + ' says hi to '+ friend);
    }, this);
  }
}
Javascript 相关文章推荐
js Html结构转字符串形式显示代码
Nov 15 Javascript
javascript-简单的日历实现及Date对象语法介绍(附图)
May 30 Javascript
javascript中interval与setTimeOut的区别示例介绍
Mar 14 Javascript
JS中使用Array函数shift和pop创建可忽略参数的例子
May 28 Javascript
JS实现超简单的鼠标拖动效果
Nov 02 Javascript
Bootstrap3制作图片轮播效果
May 12 Javascript
JS HTML图片显示Canvas 压缩功能
Jul 21 Javascript
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
Feb 14 Javascript
判断iOS、Android以及PC端的示例代码
Nov 15 Javascript
深入理解js A*寻路算法原理与具体实现过程
Dec 13 Javascript
如何使用CSS3和JQuery easing 插件制作绚丽菜单
Jun 18 jQuery
JavaScript事件委托实现原理及优点进行
Aug 29 Javascript
BootStrap智能表单实战系列(十一)级联下拉的支持
Jun 13 #Javascript
BootStrap 智能表单实战系列(十)自动完成组件的支持
Jun 13 #Javascript
BootStrap智能表单实战系列(九)表单图片上传的支持
Jun 13 #Javascript
浅谈JavaScript对象的创建方式
Jun 13 #Javascript
BootStrap智能表单实战系列(八)表单配置json详解
Jun 13 #Javascript
BootStrap智能表单实战系列(七)验证的支持
Jun 13 #Javascript
BootStrap智能表单实战系列(六)表单编辑页面的数据绑定
Jun 13 #Javascript
You might like
php制作unicode解码工具(unicode编码转换器)代码分享
2013/12/24 PHP
PHP7中I/O模型内核剖析详解
2019/04/14 PHP
document对象execCommand的command参数介绍
2006/08/01 Javascript
用 javascript 实现的点击复制代码
2007/03/24 Javascript
javascript import css实例代码
2008/07/18 Javascript
什么是JavaScript
2009/08/13 Javascript
jQuery下通过replace字符串替换实现大小图片切换
2012/05/22 Javascript
深入探讨javascript中的数据类型
2015/03/04 Javascript
基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
2016/06/12 Javascript
AngularJs 最新验证手机号码的实例,成功测试通过
2017/11/26 Javascript
jquery ajax加载数据前台渲染方式 不用for遍历的方法
2018/08/09 jQuery
jQuery模拟html下拉多选框的原生实现方法示例
2019/05/30 jQuery
JS设置自定义快捷键并实现图片上下左右移动
2019/10/17 Javascript
Openlayers绘制聚合标注
2020/09/28 Javascript
[01:51]2014DOTA2西雅图邀请赛 MVP 外卡赛black场间采访
2014/07/09 DOTA
[01:02:02]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第二局
2016/02/25 DOTA
Python 3中print函数的使用方法总结
2017/08/08 Python
python操作MySQL 模拟简单银行转账操作
2017/09/27 Python
Python通过paramiko远程下载Linux服务器上的文件实例
2018/12/27 Python
Python字符串、列表、元组、字典、集合的补充实例详解
2019/12/20 Python
python解析xml文件方式(解析、更新、写入)
2020/03/05 Python
Python文件操作基础流程解析
2020/03/19 Python
Pyqt5 关于流式布局和滚动条的综合使用示例代码
2020/03/24 Python
利用CSS3实现文字折纸效果实例代码
2018/07/10 HTML / CSS
html2canvas把div保存图片高清图的方法示例
2018/03/05 HTML / CSS
*p++ 自增p 还是p所指向的变量
2016/07/16 面试题
儿子婚宴答谢词
2014/01/09 职场文书
周年庆典邀请函范文
2014/01/23 职场文书
求职信模板怎么做
2014/01/26 职场文书
一年级数学教学反思
2014/02/01 职场文书
超市重阳节活动方案
2014/02/10 职场文书
党的群众路线教育实践活动实施方案
2014/10/31 职场文书
北京导游词
2015/02/12 职场文书
白银帝国观后感
2015/06/17 职场文书
交通安全教育心得体会
2016/01/15 职场文书
Pandas自定义选项option设置
2021/07/25 Python