当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 实例讲解JavaScript中的this指向错误解决方法

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

2019年07月29日  | 移动技术网IT编程  | 我要评论

看如下对象定义：

'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);
  }
}

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网