实例讲解JavaScript中的this指向错误解决方法（图文教程）-js教程-PHP中文网

实例讲解JavaScript中的this指向错误解决方法（图文教程）

亚连

发布： 2018-05-21 09:48:23

原创

1964人浏览过

javascript中this指向的处理是令大家普遍头疼的问题,这里我们举一个实例讲解javascript中的this指向错误解决方法,需要的朋友可以参考下

看如下对象定义：

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

登录后复制

立即学习“Java免费学习笔记（深入）”；

法语写作助手

法语助手旗下的AI智能写作平台，支持语法、拼写自动纠错，一键改写、润色你的法语作文。

查看详情

这样能正常调用

jane.display();

登录后复制

立即学习“Java免费学习笔记（深入）”；

下面的调用会出错：

var func = jane.display;
func()

登录后复制

立即学习“Java免费学习笔记（深入）”；

TypeError: Cannot read property 'name' of undefined

登录后复制

立即学习“Java免费学习笔记（深入）”；

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

var func2 = jane.display.bind(jane);
func2()

登录后复制

立即学习“Java免费学习笔记（深入）”；

'Penson named Jane'

登录后复制

立即学习“Java免费学习笔记（深入）”；

所有函数都有其特殊的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);
    });
  }
}

登录后复制

立即学习“Java免费学习笔记（深入）”；

调用sayHiToFriends会产生一个错误：

jane.sayHiToFriends()

登录后复制

立即学习“Java免费学习笔记（深入）”；

TypeError: Cannot read property 'name' of undefined

登录后复制

立即学习“Java免费学习笔记（深入）”；

解决方案一：将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);
    });
  }
}

登录后复制

立即学习“Java免费学习笔记（深入）”；

解决方案二：利用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);
  }
}

登录后复制

立即学习“Java免费学习笔记（深入）”；

上面是我整理给大家的，希望今后会对大家有帮助。

JavaScript创建对象的七种方式（总结，必读）

javascript实现Java中的Map对象功能的（详细解答，附上代码）

JavaScript构造函数及new运算符（重点，必读）

立即学习“Java免费学习笔记（深入）”；

以上就是实例讲解JavaScript中的this指向错误解决方法（图文教程）的详细内容，更多请关注php中文网其它相关文章！