一文講解js中this指向問題（附程式碼）

之前的文章《》中，給大家介紹瞭如何用CSS實現地球和月亮的公轉。下面本篇文章給大家瞭解js中this指向問題，有一定的參考價值，有需要的朋友可以參考一下，希望對你們有所助。

JS中this指向問題

相信我，只要記住本文的7步口訣，就能徹底掌握 JS 中的this指向。

先念口訣：箭頭函數、new、bind、apply 和 call、歐比屆點（obj.）、直接呼叫、不在函數裡。

按照口訣的順序，只要滿足前面某個場景，就可以確定this指向了。

接下來按照口訣順序對它們進行詳解，文中範例程式碼都執行在Chrome的Console控制檯中。

文末有精心準備的練習題，用於檢驗學習成果，別忘了試試~

1. 箭頭函數

箭頭函數排在第一個是因為它的this不會被改變，所以只要當前函數是箭頭函數，那麼就不用再看其他規則了。

箭頭函數的this是在建立它時外層this的指向。這裡的重點有兩個：

1、建立箭頭函數時，就已經確定了它的this指向。

2、箭頭函數內的this指向外層的this。

所以要知道箭頭函數的this就得先知道外層this的指向，需要繼續在外層應用七步口訣。

2. new

當使用 new 關鍵字呼叫函數時，函數中的 this 一定是 JS 建立的新物件。

讀者可能會有疑問，「如果使用new關鍵呼叫箭頭函數，是不是箭頭函數的this就會被修改呢？」。

我們在控制檯試一下。

func = () => {} 
new func() // throw error

從控制檯中可以看出，箭頭函數不能當做建構函式，所以不能與new一起執行。

3. bind

bind 是指 Function.prototype.bind() 詳細地址：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

多次 bind 時只認第一次 bind 的值

易錯點

function func() {
  console.log(this)
}

func.bind(1).bind(2)() // 1

箭頭函數中 this 不會被修改

func = () => {
  // 這裡 this 指向取決於外層 this，參考口訣 7 「不在函數裡」
  console.log(this)
}

func.bind(1)() // Window，口訣 1 優先

bind 與 new

易錯點

function func() {
  console.log(this, this.__proto__ === func.prototype)
}

boundFunc = func.bind(1)
new boundFunc() // Object true，口訣 2 優先

4. apply 和 call

apply()和 call()的第一個引數都是this，區別在於通過apply呼叫時實參是放到陣列中的，而通過call呼叫時實參是逗號分隔的。

箭頭函數中 this 不會被修改

易錯點

func = () => {
  // 這裡 this 指向取決於外層 this，參考口訣 7 「不在函數裡」
  console.log(this)
}

func.apply(1) // Window，口訣 1 優先

bind 函數中 this 不會被修改

易錯點

function func() {
  console.log(this)
}

boundFunc = func.bind(1)
boundFunc.apply(2) // 1，口訣 3 優先

5. 歐比屆點（obj.）

function func() {
  console.log(this.x)
}

obj = { x: 1 }
obj.func = func
obj.func() // 1

這裡就不用程式碼例證箭頭函數和 bind 函數的優先順序更高了，有興趣可自行嘗試吧。

6. 直接呼叫

在函數不滿足前面的場景，被直接呼叫時，this將指向全域性物件。在瀏覽器環境中全域性物件是Window，在Node.js環境中是Global。

先來個簡單的例子。

function func() {
  console.log(this)
}

func() // Window

來一個複雜的例子，外層的outerFunc就起個迷惑目的。

function outerFunc() {
  console.log(this) // { x: 1 }

  function func() {
    console.log(this) // Window
  }

  func()
}

outerFunc.bind({ x: 1 })()

7. 不在函數裡

不在函數中的場景，可分為瀏覽器的<script />標籤裡，或Node.js的模組檔案裡。

1、在<script />標籤裡，this指向Window。

2、在Node.js的模組檔案裡，this指向Module的預設匯出物件，也就是module.exports。

非嚴格模式

嚴格模式是在ES5提出的。在ES5規範之前，也就是非嚴格模式下，this不能是undefined或null。所以**在非嚴格模式下，通過上面七步口訣，如果得出this指向是undefined或null，那麼this會指向全域性物件。**在瀏覽器環境中全域性物件是Window，在Node.js環境中是Global。

例如下面的程式碼，在非嚴格模式下，this都指向全域性物件。

function a() {
  console.log("function a:", this)
  ;(() => {
    console.log("arrow function: ", this)
  })()
}

a()

a.bind(null)()

a.bind(undefined)()

a.bind().bind(2)()

a.apply()

非嚴格模式下執行結果為：

在嚴格模式下，執行同樣的程式碼進行對比。記住要一次性將所有程式碼複製貼上到控制檯中，才能執行在嚴格模式下（因為第一行 "use strict" 才會對後面的程式碼生效）。

"use strict"

function a() {
  console.log("function a:", this)
  ;(() => {
    console.log("arrow function: ", this)
  })()
}

a()

a.bind(null)()

a.bind(undefined)()

a.bind().bind(2)()

a.apply()

嚴格模式下執行結果為：

七步口訣在嚴格模式下和非嚴格模式下都是完備的，只是在非嚴格模式下null或undefined會被轉換為全域性物件。所以我沒有將這點列入口訣中。

做題複習

先背誦口訣再做題，「箭頭函數、new、bind、apply和call、歐比屆點（obj.）、直接呼叫、不在函數裡」。

1. 下面程式碼執行後，func.count 值為多少？

function func(num) {
  this.count++
}

func.count = 0
func(1)

答案

func.count值為 0。

按照口訣，func()呼叫時屬於第 6 類「直接呼叫」。在非嚴格模式下，this指向全域性物件。this跟func 一點關係都沒有，所以 func.count保持不變so easy。

2. 以下箭頭函數中 this 指向誰呢？

obj = {
  func() {
    const arrowFunc = () => {
      console.log(this._name)
    }

    return arrowFunc
  },

  _name: "obj",
}

obj.func()()

func = obj.func
func()()

obj.func.bind({ _name: "newObj" })()()

obj.func.bind()()()

obj.func.bind({ _name: "bindObj" }).apply({ _name: "applyObj" })()

答案

// obj
// undefined
// newObj
// undefined
// bindObj

是不是很簡單，你學廢了嗎？

推薦學習：

以上就是一文講解js中this指向問題（附程式碼）的詳細內容，更多請關注TW511.COM其它相關文章！