js this指向

最新推荐文章于 2025-07-21 15:15:00 发布

转载最新推荐文章于 2025-07-21 15:15:00 发布 · 116 阅读

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/qq_33988065/article/details/68957806 https://blog.youkuaiyun.com/lan1977545649/article/details/83577080

js 专栏收录该内容

19 篇文章

订阅专栏

本文深入探讨了JavaScript中this关键字的指向规则，包括全局作用域、事件函数、对象方法、构造函数、箭头函数等场景下this的具体指向，以及如何在不同上下文中正确理解和应用。

一、全局作用域或者普通函数自执行中this指向全局对象window

//全局作用域
    console.log(this);//Window
//普通函数
   function fn(){
    console.log(this); //Window
}
fn(); //函数加括号调用叫函数自执行，函数自执行时，内部的this指向顶层对象/window

二、事件函数内部的this指向事件源：注意在事件函数中如果包含普通函数，普通函数自执行后，内部this还是指向window

//事件函数内部的this指向事件源
document.body.onclick = function(){
   this.style.height = "1000px";
   console.log(this); //body对象
   function fn(){
console.log(this); //Window
   }
   fn(); //函数加括号调用叫函数自执行，函数自执行时，内部的this指向顶层对象/window
};

三、对象方法调用时，this指向调用的对象

1. 全局作用域或者普通函数中 this 指向全局对象 window。

//直接打印
console.log(this) //window

//function声明函数
function bar () {console.log(this)}
bar() //window

//function声明函数赋给变量
var bar = function () {console.log(this)}
bar() //window

//自执行函数
(function () {console.log(this)})(); //window
————————————————
版权声明：本文为优快云博主「东都花神」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.youkuaiyun.com/qq_33988065/article/details/68957806

2. 方法调用中谁调用 this 指向谁

//对象方法调用
var person = {
run: function () {console.log(this)}
}
person.run() // person

//事件绑定
var btn = document.querySelector("button")
btn.onclick = function () {
console.log(this) // btn
}
//事件监听
var btn = document.querySelector("button")
btn.addEventListener('click', function () {
console.log(this) //btn
})

//jquery的ajax
$.ajax({
self: this,
type: "get",
url: url,
async: true,
success: function (res) {
console.log(this) // this指向传入$.ajxa()中的对象
console.log(self) // window
}
});
//这里说明以下，将代码简写为$.ajax（obj），this指向obj,在obj中this指向window，因为在在success方法中，独享obj调用自己，所以this指向obj
————————————————
版权声明：本文为优快云博主「东都花神」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.youkuaiyun.com/qq_33988065/article/details/68957806

3. 在构造函数或者构造函数原型对象中 this 指向构造函数的实例

//不使用new指向window
function Person(name) {
console.log(this) // window
this.name = name;
}
Person('inwe')
//使用new
function Person(name) {
this.name = name
console.log(this) //people
self = this
}
var people = new Person('iwen')
console.log(self === people) //true
//这里new改变了this指向，将this由window指向Person的实例对象people
————————————————
版权声明：本文为优快云博主「东都花神」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.youkuaiyun.com/qq_33988065/article/details/68957806

4. 箭头函数中指向外层作用域的 this

var obj = {
foo() {
console.log(this);
},
bar: () => {
console.log(this);
}
}

obj.foo() // {foo: ƒ, bar: ƒ}
obj.bar() // window
————————————————
版权声明：本文为优快云博主「东都花神」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.youkuaiyun.com/qq_33988065/article/details/68957806