实例讲解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 相关文章推荐
javascript 特性检测并非浏览器检测
Jan 15 Javascript
JS连接SQL数据库与ACCESS数据库的方法实例
Nov 21 Javascript
angularjs的一些优化小技巧
Dec 06 Javascript
jQuery使用hide方法隐藏元素自身用法实例
Mar 30 Javascript
JS实现点击上移下移LI行数据的方法
Aug 05 Javascript
Jquery实现的简单轮播效果【附实例】
Apr 19 Javascript
jQuery实现别踩白块儿网页版小游戏
Jan 18 Javascript
微信小程序人脸识别功能代码实例
May 07 Javascript
Vue分页器实现原理详解
Jun 28 Javascript
layui监听select变化,以及设置radio选中的方法
Sep 24 Javascript
javascript利用键盘控制小方块的移动
Apr 20 Javascript
javascript读取本地文件和目录方法详解
Aug 06 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图片处理类(水印、等比缩放、固定高宽)分享
2015/06/19 PHP
PHP实现的mysql操作类【MySQL与MySQLi方式】
2017/10/07 PHP
学习从实践开始之jQuery插件开发 对话框插件开发
2012/04/26 Javascript
jquery全选checkBox功能实现代码(取消全选功能)
2013/12/10 Javascript
代码触发js事件(click、change)示例应用
2013/12/13 Javascript
jquery插件jquery倒计时插件分享
2013/12/27 Javascript
javascript中attribute和property的区别详解
2014/06/05 Javascript
jQuery实现新消息闪烁标题提示的方法
2015/03/11 Javascript
js实现表单多按钮提交action的处理方法
2015/10/24 Javascript
JS实现iframe自适应高度的方法(兼容IE与FireFox)
2016/06/24 Javascript
javascript实现遮罩层动态效果实例
2019/05/14 Javascript
layui+jquery支持IE8的表格分页方法
2019/09/28 jQuery
JavaScript canvas实现雪花随机动态飘落
2020/02/08 Javascript
Element的el-tree控件后台数据结构的生成以及方法的抽取
2020/03/05 Javascript
详解Python 模拟实现生产者消费者模式的实例
2017/08/10 Python
使用Numpy读取CSV文件,并进行行列删除的操作方法
2018/07/04 Python
用python脚本24小时刷浏览器的访问量方法
2018/12/07 Python
Python3调用百度AI识别图片中的文字功能示例【测试可用】
2019/03/13 Python
PyChon中关于Jekins的详细安装(推荐)
2020/12/28 Python
CSS3的常见transformation图形变化用法小结
2016/05/13 HTML / CSS
英国户外装备商店:Ultimate Outdoors
2019/05/07 全球购物
新西兰第一的行李箱网站:luggage.co.nz
2019/07/22 全球购物
TUMI香港官网:国际领先的行李箱、背囊品牌
2021/03/01 全球购物
Linux常见面试题
2016/10/04 面试题
求职信内容考虑哪几点
2013/10/05 职场文书
竞争上岗演讲稿
2014/01/05 职场文书
公司经理任命书
2014/06/05 职场文书
毕业生工作求职信
2014/06/30 职场文书
学生安全责任书范本
2014/07/24 职场文书
党的群众路线教育实践活动领导班子整改措施
2014/09/30 职场文书
年度考核登记表个人总结
2015/03/06 职场文书
话题作文之诚信
2019/11/28 职场文书
python 模块重载的五种方法
2021/04/24 Python
go:垃圾回收GC触发条件详解
2021/04/24 Golang
基于Python编写一个监控CPU的应用系统
2022/06/25 Python
ECharts transform数据转换和dataZoom在项目中使用
2022/12/24 Javascript