JavaScript中的this指向問題詳解
前言
相信我,只要記住本文的 7️⃣ 步口訣,就能徹底掌握 JS 中的 this 指向。
先念口訣:箭頭函數(shù)、new、bind、apply 和 call、歐比屆點(obj.)、直接調(diào)用、不在函數(shù)里。
按照口訣的順序,只要滿足前面某個場景,就可以確定 this 指向了。
接下來按照口訣順序?qū)λ鼈冞M行詳解,文中示例代碼都運行在 Chrome 的 Console 控制臺中。
文末有精心準備的練習題,用于檢驗學習成果,別忘了試試~
1. 箭頭函數(shù)
箭頭函數(shù)排在第一個是因為它的 this 不會被改變,所以只要當前函數(shù)是箭頭函數(shù),那么就不用再看其他規(guī)則了。
箭頭函數(shù)的 this 是在創(chuàng)建它時外層 this 的指向。這里的重點有兩個:
- 創(chuàng)建箭頭函數(shù)時,就已經(jīng)確定了它的 this 指向。
- 箭頭函數(shù)內(nèi)的 this 指向外層的 this。
所以要知道箭頭函數(shù)的 this 就得先知道外層 this 的指向,需要繼續(xù)在外層應(yīng)用七步口訣。
2. new
當使用 new 關(guān)鍵字調(diào)用函數(shù)時,函數(shù)中的 this 一定是 JS 創(chuàng)建的新對象。
讀者可能會有疑問,“如果使用 new 關(guān)鍵調(diào)用箭頭函數(shù),是不是箭頭函數(shù)的 this 就會被修改呢?”。
我們在控制臺試一下。
func = () => {} new func() // throw error
從控制臺中可以看出,箭頭函數(shù)不能當做構(gòu)造函數(shù),所以不能與 new 一起執(zhí)行。
3. bind
bind 是指 Function.prototype.bind() 。
多次 bind 時只認第一次 bind 的值
易錯點
function func() { console.log(this) } func.bind(1).bind(2)() // 1
箭頭函數(shù)中 this 不會被修改
bind 與 new
易錯點
function func() { console.log(this, this.__proto__ === func.prototype) } boundFunc = func.bind(1) new boundFunc() // Object true,口訣 2 優(yōu)先
4. apply 和 call
apply() 和 call() 的第一個參數(shù)都是 this,區(qū)別在于通過 apply 調(diào)用時實參是放到數(shù)組中的,而通過 call 調(diào)用時實參是逗號分隔的。
箭頭函數(shù)中 this 不會被修改
易錯點
func = () => { // 這里 this 指向取決于外層 this,參考口訣 7 「不在函數(shù)里」 console.log(this) } func.apply(1) // Window,口訣 1 優(yōu)先
bind 函數(shù)中 this 不會被修改
易錯點
function func() { console.log(this) } boundFunc = func.bind(1) boundFunc.apply(2) // 1,口訣 3 優(yōu)先
5. 歐比屆點(obj.)
function func() { console.log(this.x) } obj = { x: 1 } obj.func = func obj.func() // 1
這里就不用代碼例證箭頭函數(shù)和 bind 函數(shù)的優(yōu)先級更高了,有興趣可自行嘗試吧。
6. 直接調(diào)用
在函數(shù)不滿足前面的場景,被直接調(diào)用時,this 將指向全局對象。在瀏覽器環(huán)境中全局對象是 Window,在 Node.js 環(huán)境中是 Global。
先來個簡單的例子。
function func() { console.log(this) } func() // Window
來一個復(fù)雜的例子,外層的 outerFunc 就起個迷惑目的。
function outerFunc() { console.log(this) // { x: 1 } function func() { console.log(this) // Window } func() } outerFunc.bind({ x: 1 })()
7. 不在函數(shù)里
不在函數(shù)中的場景,可分為瀏覽器的 <script /> 標簽里,或 Node.js 的模塊文件里。
- 在 <script /> 標簽里,this 指向 Window。
- 在 Node.js 的模塊文件里,this 指向 Module 的默認導出對象,也就是 module.exports。
非嚴格模式
嚴格模式是在 ES5 提出的。在 ES5 規(guī)范之前,也就是非嚴格模式下,this 不能是 undefined 或 null。所以**在非嚴格模式下,通過上面七步口訣,如果得出 this 指向是 undefined 或 null,那么 this 會指向全局對象。**在瀏覽器環(huán)境中全局對象是 Window,在 Node.js 環(huán)境中是 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()
非嚴格模式下執(zhí)行結(jié)果為:
在嚴格模式下,執(zhí)行同樣的代碼進行對比。記住要一次性將所有代碼復(fù)制粘貼到控制臺中,才能運行在嚴格模式下(因為第一行 "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()
嚴格模式下執(zhí)行結(jié)果為:
七步口訣在嚴格模式下和非嚴格模式下都是完備的,只是在非嚴格模式下 null 或 undefined 會被轉(zhuǎn)換為全局對象。所以我沒有將這點列入口訣中。
做題復(fù)習
先背誦口訣再做題,“箭頭函數(shù)、new、bind、apply 和 call、歐比屆點(obj.)、直接調(diào)用、不在函數(shù)里”。
1. 下面代碼執(zhí)行后,func.count 值為多少?
function func(num) { this.count++ } func.count = 0 func(1)
答案
func.count 值為 0。
按照口訣,func() 調(diào)用時屬于第 6 類「直接調(diào)用」。在非嚴格模式下,this 指向全局對象。this 跟 func 一點關(guān)系都沒有,所以 func.count 保持不變。so easy。
2. 以下箭頭函數(shù)中 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
是不是很簡單,你學廢了嗎?
總結(jié)
到此這篇關(guān)于JavaScript中的this指向問題的文章就介紹到這了,更多相關(guān)js中this指向內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
webpack項目使用eslint建立代碼規(guī)范實現(xiàn)
這篇文章主要介紹了webpack項目使用eslint建立代碼規(guī)范實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-05-05JavaScript中定時控制Throttle、Debounce和Immediate詳解
大家可能都知道JavaScript遵循事件驅(qū)動的編程范例,這意味著一些行為可以激活一些響應(yīng),并且這些響應(yīng)僅在發(fā)生特定的行為時才被激活。這篇文章將給大家詳細介紹JavaScript中的定時控制Throttle、Debounce和Immediate,有需要的朋友們可以參考借鑒,下面來一起看看吧。2016-11-11JS面試題之如何判斷兩個數(shù)組的內(nèi)容是否相等
這篇文章主要為大家詳細介紹了JavaScript面試的常考題,即如何判斷兩個數(shù)組的內(nèi)容是否相等,文中的示例方法講解詳細,需要的小伙伴可以參考一下2023-10-10JavaScript位置與大?。?)之正確理解和運用與尺寸大小相關(guān)的DOM屬性
這篇文章主要介紹了JavaScript位置與大小(1)——正確理解和運用與尺寸大小相關(guān)的DOM屬性的相關(guān)資料,需要的朋友可以參考下2015-12-12