對(duì)很多前端開(kāi)發(fā)者來(lái)說(shuō)，JavaScript語(yǔ)言的this指向是一個(gè)令人頭疼的問(wèn)題。先看下面這道測(cè)試題，如果你能實(shí)現(xiàn)并解釋原因，那本文對(duì)你來(lái)說(shuō)價(jià)值不大，可以直接略過(guò)。
**開(kāi)篇測(cè)試題：**嘗試實(shí)現(xiàn)注釋部分的Javascript代碼，可在其他任何地方添加更多代碼（如不能實(shí)現(xiàn)，說(shuō)明一下不能實(shí)現(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) } }題目的參考答案在文末，但我不建議你直接查看答案，而是先閱讀并思考文章的中的知識(shí)點(diǎn)。
一、在對(duì)象屬性中的this指向問(wèn)題
對(duì)象的屬性是函數(shù)，那么函數(shù)中的this指向的是對(duì)象本身，即例子中的obj
var obj = { x: 123, fn: function () { console.log(this) // {x: 123, fn: ƒ} console.log(this.x) // 123 } } obj.fn()對(duì)象的屬性是函數(shù)，函數(shù)內(nèi)部還有函數(shù)，那么這個(gè)二級(jí)（及以上）函數(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()從上面的例子，我們可以總結(jié)出，對(duì)象屬性中，嵌套超過(guò)一級(jí)及以上的函數(shù)，this指向都是window
二、構(gòu)造函數(shù)中的this指向問(wèn)題
構(gòu)造函數(shù)中的一級(jí)函數(shù)，this指向通過(guò)構(gòu)造函數(shù)new出來(lái)的實(shí)例（例子中的person）
var Person = function () { this.name = 'linlif' this.fn = function () { console.log('fn', this) // {name: "linlif", fn: ƒ} } } var person = new Person() person.fn()構(gòu)造函數(shù)中的二級(jí)(及以上)函數(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()從上面的例子，我們可以總結(jié)出，構(gòu)造函數(shù)中，嵌套超過(guò)一級(jí)及以上的函數(shù)，this指向的都是window
三、全局上下文環(huán)境中this指向問(wèn)題
全局上下文環(huán)境，this指向?yàn)g覽器的window對(duì)象，例如：
// 全局的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()對(duì)this指向的影響
使用call()方法后，this指向call()方法的參數(shù)。使用apply()的結(jié)果和call()是一致的，這里不做贅述。關(guān)于call()和apply()用法的區(qū)別，請(qǐng)自行查詢相關(guān)資料。
// 改變調(diào)用對(duì)象為gObj var gObj = { name: 'gName' } var aaa = function () { console.log(this) // {name: "gName"} console.log(this.name) // gName } aaa.call(gObj) // 改變調(diào)用對(duì)象為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)總結(jié)：這就是一些關(guān)于this的指向問(wèn)題的個(gè)人理解了，如果發(fā)現(xiàn)不妥之處，歡迎在評(píng)論區(qū)指出，或者私信我。
彩蛋 開(kāi)篇測(cè)試題的參考答案，僅供參考！（有意思的地方：題目中，函數(shù)名的第一個(gè)字母大寫(xiě)，已經(jīng)暗示這是一個(gè)構(gòu)造函數(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中關(guān)于this指向的4種情況詳解整合，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)VeVb武林網(wǎng)網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
