詳解JavaScript中關于this指向的4種情況

更新時間：2019年04月18日 14:39:42 作者：linif002

這篇文章主要介紹了JavaScript中關于this指向的4種情況，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

對很多前端開發(fā)者來說，JavaScript語言的this指向是一個令人頭疼的問題。先看下面這道測試題，如果你能實現(xiàn)并解釋原因，那本文對你來說價值不大，可以直接略過。

**開篇測試題：**嘗試實現(xiàn)注釋部分的Javascript代碼，可在其他任何地方添加更多代碼（如不能實現(xiàn)，說明一下不能實現(xiàn)的原因）：

let Obj = function (msg) {
  this.msg = msg
  this.shout = function () {
   alert(this.msg)
  }
  this.waitAndShout = function () {
   // 隔5秒后執(zhí)行上面的shout方面
   setTimeout(function () {
    let self = this
    return function () {
     self.shout()
    }
   }.call(this), 5000)
  }
 }

題目的參考答案在文末，但我不建議你直接查看答案，而是先閱讀并思考文章的中的知識點。

一、在對象屬性中的this指向問題

對象的屬性是函數(shù)，那么函數(shù)中的this指向的是對象本身，即例子中的obj

 var obj = {
  x: 123,
  fn: function () {
   console.log(this) // {x: 123, fn: ƒ}
   console.log(this.x) // 123
  }
 }
 obj.fn()

對象的屬性是函數(shù)，函數(shù)內部還有函數(shù)，那么這個二級（及以上）函數(shù)的this指向的是window

var obj = {
  x: 456,
  fn: function () {
   console.log('fn', this) // {x: 456, fn: ƒ}
   var f1 = function () {
    console.log('fn.f1', this) // Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
    console.log(this.x) // undefined
    var f2 = function () {
     console.log('fn.f2', this) // Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
    }
    f2()
   }
   f1()
  }
 }
 obj.fn()

從上面的例子，我們可以總結出，對象屬性中，嵌套超過一級及以上的函數(shù)，this指向都是window

二、構造函數(shù)中的this指向問題

構造函數(shù)中的一級函數(shù)，this指向通過構造函數(shù)new出來的實例（例子中的person）

 var Person = function () {
  this.name = 'linlif'
  this.fn = function () {
   console.log('fn', this) // {name: "linlif", fn: ƒ}
  }
 }
 var person = new Person()
 person.fn()

構造函數(shù)中的二級(及以上)函數(shù)，this指向的是window

var Person = function () {
  this.name = 'linlif'
  this.fn = function () {
   console.log('fn', this) // {name: "linlif", fn: ƒ}
   var f2 = function () {
    console.log('f2', this) // Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
    var f3 = function () {
     console.log('f3', this) // Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
    }
    f3()
   }
   f2()
  }
 }
 var person = new Person()
 person.fn()

從上面的例子，我們可以總結出，構造函數(shù)中，嵌套超過一級及以上的函數(shù)，this指向的都是window

三、全局上下文環(huán)境中this指向問題

全局上下文環(huán)境，this指向瀏覽器的window對象，例如：

 // 全局的this
 console.log(this) // Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
 console.log(this === window) // true

 // 全局的普通函數(shù)
 var global = function () {
  console.log(this) // Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
 }
 global()

四、call()和apply()對this指向的影響

使用call()方法后，this指向call()方法的參數(shù)。使用apply()的結果和call()是一致的，這里不做贅述。關于call()和apply()用法的區(qū)別，請自行查詢相關資料。

// 改變調用對象為gObj
 var gObj = {
  name: 'gName'
 }
 var aaa = function () {
  console.log(this) // {name: "gName"}
  console.log(this.name) // gName
 }
 aaa.call(gObj)
 
 // 改變調用對象為window
 var name = 'global'
 var bbb = function () {
  console.log(this) // Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
  console.log(this.name) // global
 }
 bbb.call(this)

總結：這就是一些關于this的指向問題的個人理解了，如果發(fā)現(xiàn)不妥之處，歡迎在評論區(qū)指出，或者私信我。

彩蛋開篇測試題的參考答案，僅供參考?。ㄓ幸馑嫉牡胤剑侯}目中，函數(shù)名的第一個字母大寫，已經(jīng)暗示這是一個構造函數(shù)）

let Obj = function (msg) {
  this.msg = msg
  this.shout = function () {
   alert(this.msg)
  }
  this.waitAndShout = function () {
   // 隔5秒后執(zhí)行上面的shout方面
   setTimeout(function () {
    let self = this
    return function () {
     self.shout()
    }
   }.call(this), 5000)
  }
 }

 let obj = new Obj('msg')
 obj.waitAndShout()

以上所述是小編給大家介紹的JavaScript中關于this指向的4種情況詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: