溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
對很多前端開發者來說，JavaScript語言的this指向是一個令人頭疼的問題。先看下面這道測試題，如果你能實現并解釋原因，那本文對你來說價值不大，可以直接略過。
**開篇測試題：**嘗試實現注釋部分的Javascript代碼，可在其他任何地方添加更多代碼（如不能實現，說明一下不能實現的原因）：
let Obj = function (msg) {
this.msg = msg
this.shout = function () {
alert(this.msg)
}
this.waitAndShout = function () {
// 隔5秒后執行上面的shout方面
setTimeout(function () {
let self = this
return function () {
self.shout()
}
}.call(this), 5000)
}
}
題目的參考答案在文末，但我不建議你直接查看答案，而是先閱讀并思考文章的中的知識點。
一、在對象屬性中的this指向問題
對象的屬性是函數，那么函數中的this指向的是對象本身，即例子中的obj
var obj = {
x: 123,
fn: function () {
console.log(this) // {x: 123, fn: ƒ}
console.log(this.x) // 123
}
}
obj.fn()
對象的屬性是函數，函數內部還有函數，那么這個二級（及以上）函數的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()
從上面的例子，我們可以總結出，對象屬性中，嵌套超過一級及以上的函數，this指向都是window
二、構造函數中的this指向問題
構造函數中的一級函數，this指向通過構造函數new出來的實例（例子中的person）
var Person = function () {
this.name = 'linlif'
this.fn = function () {
console.log('fn', this) // {name: "linlif", fn: ƒ}
}
}
var person = new Person()
person.fn()
構造函數中的二級(及以上)函數，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()
從上面的例子，我們可以總結出，構造函數中，嵌套超過一級及以上的函數，this指向的都是window
三、全局上下文環境中this指向問題
全局上下文環境，this指向瀏覽器的window對象，例如：
// 全局的this
console.log(this) // Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
console.log(this === window) // true
// 全局的普通函數
var global = function () {
console.log(this) // Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
}
global()
四、call()和apply()對this指向的影響
使用call()方法后，this指向call()方法的參數。使用apply()的結果和call()是一致的，這里不做贅述。關于call()和apply()用法的區別，請自行查詢相關資料。
// 改變調用對象為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的指向問題的個人理解了，如果發現不妥之處，歡迎在評論區指出，或者私信我。
彩蛋 開篇測試題的參考答案，僅供參考！（有意思的地方：題目中，函數名的第一個字母大寫，已經暗示這是一個構造函數）
let Obj = function (msg) {
this.msg = msg
this.shout = function () {
alert(this.msg)
}
this.waitAndShout = function () {
// 隔5秒后執行上面的shout方面
setTimeout(function () {
let self = this
return function () {
self.shout()
}
}.call(this), 5000)
}
}
let obj = new Obj('msg')
obj.waitAndShout()
以上所述是小編給大家介紹的JavaScript中關于this指向的4種情況詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
