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

2019-11-20 09:42:39

字体：大中小

来源：转载

供稿：网友

看如下对象定义：

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

上一篇：jQuery实现手机自定义弹出输入框

下一篇：BootStrap智能表单实战系列(十一)级联下拉的支持