实例讲解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 相关文章推荐
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
Aug 28 Javascript
如何获取网站icon有哪些可行的方法
Jun 05 Javascript
js读取json的两种常用方法示例介绍
Oct 19 Javascript
jQuery源码解读之removeAttr()方法分析
Feb 20 Javascript
javascript实现点击按钮让DIV层弹性移动的方法
Feb 24 Javascript
js实现随屏幕滚动的带缓冲效果的右下角广告代码
Sep 04 Javascript
AngularJS通过$sce输出html的方法
Sep 22 Javascript
BootStrap Fileinput的使用教程
Dec 30 Javascript
webpack3+React 的配置全解
Aug 21 Javascript
微信小程序页面生命周期详解
Jan 31 Javascript
关于微信小程序bug记录与解决方法
Aug 15 Javascript
Vue插件从封装到发布的完整步骤记录
Feb 28 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通过iconv将字符串从GBK转换为UTF8字符集
2011/07/18 PHP
PHP实现抓取Google IP并自动修改hosts文件
2015/02/12 PHP
JavaScript实现滚动栏效果的方法
2015/04/27 PHP
点击文章内容处弹出页面代码
2009/10/01 Javascript
JavaScript 面向对象之命名空间
2010/05/04 Javascript
学习并汇集javascript匿名函数
2010/11/25 Javascript
Ext JS添加子组件的误区探讨
2013/06/28 Javascript
jquery+ajax实现跨域请求的方法
2015/01/20 Javascript
JavaScript使用concat连接数组的方法
2015/04/06 Javascript
Javascript中的作用域和上下文深入理解
2015/07/03 Javascript
JavaScript数据结构链表知识详解
2016/11/21 Javascript
详解VUE的状态控制与延时加载刷新
2017/03/27 Javascript
JS使用cookie实现只出现一次的广告代码效果
2017/04/22 Javascript
js+html5实现半透明遮罩层弹框效果
2020/08/24 Javascript
详解升级react-router 4 踩坑指南
2017/08/14 Javascript
Angular移动端页面input无法输入的解决方法
2017/11/14 Javascript
Javascript中的作用域及块级作用域
2017/12/08 Javascript
node实现基于token的身份验证
2018/04/09 Javascript
Angular8 Http拦截器简单使用教程
2019/08/20 Javascript
在Windows8上的搭建Python和Django环境
2014/07/03 Python
Python创建模块及模块导入的方法
2015/05/27 Python
python中解析json格式文件的方法示例
2017/05/03 Python
python中使用xlrd读excel使用xlwt写excel的实例代码
2018/01/31 Python
python 字符串和整数的转换方法
2018/06/25 Python
python文件拆分与重组实例
2018/12/10 Python
python实现QQ空间自动点赞功能
2019/04/09 Python
Python爬虫防封ip的一些技巧
2020/08/06 Python
web字体加载方案优化小结
2019/11/29 HTML / CSS
巴西食品补充剂在线零售商:Músculos na Web
2017/08/07 全球购物
Nordgreen台湾官网:极简北欧设计手表
2019/08/21 全球购物
Craghoppers德国官网:户外和旅行服装
2020/02/14 全球购物
Lentiamo比利时:便宜的隐形眼镜
2020/02/14 全球购物
医师定期考核实施方案
2014/05/07 职场文书
食品安全宣传标语
2014/06/07 职场文书
2015年中秋节活动总结
2015/03/23 职场文书
2016年六一儿童节开幕词
2016/03/04 职场文书