實例講解JavaScript中的this指向錯誤解決方法（圖文教學）

JavaScript中this指向的處理是令大家普遍頭痛的問題,這裡我們舉一個實例講解JavaScript中的this指向錯誤解決方法,需要的朋友可以參考下

看如下物件定義：

'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實作Java中的Map物件功能的（詳細解答，附上程式碼）

JavaScript建構子及new運算子（重點，必讀）

#

以上是實例講解JavaScript中的this指向錯誤解決方法（圖文教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！