本文详细解析JavaScript中this指向的四种核心场景：对象属性函数、构造函数内部、全局上下文以及通过call和apply方法改变this指向。重点说明嵌套函数中this默认指向window的机制，并结合代码示例阐述不同上下文下的绑定规则，帮助开发者准确理解this行为。
对于许多前端开发人员而言，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指向问题
当对象的属性是一个函数时，该函数内部的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指向问题
在构造函数的一级函数中，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指向问题
在全局上下文环境中，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()和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指向的四种情况详解，希望对大家有所帮助。如果大家有任何疑问，请随时留言，小编会及时回复。在此也非常感谢大家对本站网站的支持！