實(shí)例講解JavaScript中的this指向錯(cuò)誤解決方法

更新時(shí)間：2016年06月13日 16:52:46 作者：zhoutk

JavaScript中this指向的處理是令大家普遍頭疼的問(wèn)題,這里我們舉一個(gè)實(shí)例講解JavaScript中的this指向錯(cuò)誤解決方法,需要的朋友可以參考下

看如下對(duì)象定義：

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

這樣能正常調(diào)用

jane.display();

下面的調(diào)用會(huì)出錯(cuò)：

var func = jane.display;
func()

TypeError: Cannot read property 'name' of undefined

因?yàn)?，this指向已經(jīng)改變，正確的方式如下：

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

'Penson named Jane'

所有函數(shù)都有其特殊的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);
    });
  }
}

調(diào)用sayHiToFriends會(huì)產(chǎn)生一個(gè)錯(cuò)誤：

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的第二個(gè)參數(shù)，它可以給this指定一個(gè)值

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

您可能感興趣的文章:

相關(guān)文章

SUN的《AJAX與J2EE》全文譯了
SUN的《AJAX與J2EE》全文譯了...
2007-02-02
詳解JavaScript中的變量命名規(guī)范
程序員三大難題：變量命名、緩存失效、循環(huán)邊界。這篇文章主要為大家介紹了JavaScript中的變量命名規(guī)范，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2022-12-12
JavaScript靜態(tài)類型檢查工具FLOW簡(jiǎn)介
這篇文章主要介紹了JavaScript靜態(tài)類型檢查工具FLOW簡(jiǎn)介,需要的朋友可以參考下
2015-01-01
javascript中join方法實(shí)例講解
在本篇內(nèi)容里小編給大家分享了關(guān)于javascript中join方法實(shí)例內(nèi)容，需要的朋友們學(xué)習(xí)參考下。
2019-02-02
Javascript淺談之this
這篇文章主要介紹了Javascript中的this，有需要的朋友可以參考一下
2013-12-12
對(duì)javascript基本對(duì)象的屬性以及方法的實(shí)例介紹
對(duì)javascript基本對(duì)象的屬性以及方法的實(shí)例介紹...
2007-01-01
jquery應(yīng)該如何來(lái)設(shè)置改變按鈕input的onclick事件
要?jiǎng)討B(tài)改變這個(gè)上一頁(yè)按鈕中onclick的函數(shù).我自己是嘗試了很多種方法，都沒(méi)有做出來(lái)，下面列舉的幾個(gè)都是失敗的例子,需要的朋友可以參考下
2012-12-12
詳細(xì)談?wù)刯avascript的對(duì)象
對(duì)象是一種復(fù)合值，它將很多值（原始值或其他對(duì)象）聚合在一起，可通過(guò)屬性名訪問(wèn)這些值。而屬性名可以是包含空字符串在內(nèi)的任意字符串。JavaScript對(duì)象也可以稱作一種數(shù)據(jù)結(jié)構(gòu)
2016-07-07
javascript列表框操作函數(shù)集合匯總
這篇文章主要是對(duì)javascript列表框操作函數(shù)進(jìn)行了詳細(xì)的匯總介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2013-11-11
JS中for循序中延遲加載動(dòng)態(tài)效果的具體實(shí)現(xiàn)
今天在做一個(gè)前端的效果的時(shí)候碰到一個(gè)棘手的問(wèn)題，就是實(shí)現(xiàn)一個(gè)動(dòng)態(tài)的圓柱效果，廢話不多少，直接上代碼
2013-08-08