实例讲解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方法和技巧大全
Dec 27 Javascript
JavaScript 基础知识 被自己遗忘的
Oct 15 Javascript
修改jquery里的dialog对话框插件为框架页(iframe) 的方法
Sep 14 Javascript
jQuery中unbind()方法用法实例
Jan 19 Javascript
Javascript数据结构与算法之列表详解
Mar 12 Javascript
JavaScript实现的encode64加密算法实例分析
Apr 15 Javascript
jQuery解析XML 详解及方法总结
Sep 28 Javascript
ES6新特性之函数的扩展实例详解
Apr 01 Javascript
深入理解JavaScript继承的多种方式和优缺点
May 12 Javascript
vue安装和使用scss及sass与scss的区别详解
Oct 15 Javascript
Vue-input框checkbox强制刷新问题
Apr 18 Javascript
微信小程序如何实现精确的日期时间选择器
Jan 21 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面向对象学习笔记之一 基础概念
2012/10/06 PHP
Linux下创建nginx脚本-start、stop、reload…
2014/08/03 PHP
学习php中的正则表达式
2014/08/17 PHP
详解php伪造Referer请求反盗链资源
2019/01/24 PHP
laravel 之 Eloquent 模型修改器和序列化示例
2019/10/17 PHP
如何在PHP中使用AES加密算法加密数据
2020/06/24 PHP
JavaScript.The.Good.Parts阅读笔记(二)作用域&闭包&减缓全局空间污染
2010/11/16 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来
2013/01/23 Javascript
javascript页面加载完执行事件代码
2014/02/11 Javascript
浅析JS中document对象的一些重要属性
2014/03/06 Javascript
探析浏览器执行JavaScript脚本加载与代码执行顺序
2016/01/12 Javascript
使用jQuery实现Web页面换肤功能的要点解析
2016/05/12 Javascript
json定义及jquery操作json的方法
2016/09/29 Javascript
js实现可旋转的立方体模型
2016/10/16 Javascript
使用JS 插件qrcode.js生成二维码功能
2017/02/20 Javascript
基于jQuery实现的单行公告活动轮播效果
2017/08/23 jQuery
详解自定义ajax支持跨域组件封装
2018/02/08 Javascript
如何测量vue应用运行时的性能
2019/06/21 Javascript
vue 调用 RESTful风格接口操作
2020/08/11 Javascript
数据挖掘之Apriori算法详解和Python实现代码分享
2014/11/07 Python
Python中zfill()方法的使用教程
2015/05/20 Python
Python设计模式编程中Adapter适配器模式的使用实例
2016/03/02 Python
python分割列表(list)的方法示例
2017/05/07 Python
pycharm 将python文件打包为exe格式的方法
2019/01/16 Python
python GUI库图形界面开发之PyQt5布局控件QGridLayout详细使用方法与实例
2020/03/06 Python
英国花园家具中心:Garden Furniture Centre
2017/08/24 全球购物
trivago美国:全球最大的酒店价格比较网站
2018/01/18 全球购物
澳大利亚领先的美容护肤品零售商之一:SkincareStore
2018/01/22 全球购物
中国专业的音频分享平台:喜马拉雅
2019/05/24 全球购物
麦当劳辞职信范文
2014/01/18 职场文书
2014年乡镇人大工作总结
2014/11/25 职场文书
幼儿园班级工作总结2015
2015/05/25 职场文书
晚会开场白和结束语
2015/05/29 职场文书
七年级作文之英语老师
2019/10/28 职场文书
八年级作文之友谊
2019/12/02 职场文书
微软发布Windows 11今年最大更新22H2(附 ISO 镜像官方下载)
2022/09/23 数码科技