在 JavaScript 中 this 常常指向方法调用的对象,但有些时候并不是这样的,本文将详细解读在不同的情况下 this 的指向。
一、指向 window:
在全局中使用 this,它将会指向全局对象,因为浏览器中运行的 JavaScript 的全局对象默认为 window, 所以,此时 this 指向 window。
例如:
console.log(this) // 控制台将打印出 window 对象
在全局作用域内的函数调用, this 也会执行 window。
function foo(){
console.log(this);
};
foo(); // 控制台也会打印出 window 对象
此处并不难理解,因为全局对象默认为 window,则 foo() 实质是 window.foo()。
其实,在javascript中函数调用时,this都会指向window对象。看下面的执行结果:
function foo(){
console.log(this);
};
var demo = document.querySelector(".demo");
demo.onclick = foo; //this指向demo元素对象
demo.onclick = function(){
foo(); //this指向window对象
};
注意:在 ES5 中,使用严格模式时,不存在全局变量, 此时 this 将不再指向 window, 而是 undefined 。
二、指向方法调用的对象:
在对象的方法调用中,this 指向该方法调用的对象。
var obj = {
getMe: function(){
console.log(this)
}
};
obj.getMe(); // 控制台打印出 obj 对象
三、构造函数内,指向调用构造函数所创建的对象实例:
通常我们会使用 new 关键词调用构造函数创建新的对象实例,此时构造函数内的 this 就会指向这个新创建出来的对象。
如:
//构造函数
function Person(name){
this.name = name;
this.getMe = function(){
console.log(this);
}
};
var joe = new Person("joe");
joe.getMe(); //控制台打印出一个新的名字为 “joe” 的 Person 实例
四、使用函数的 call 或 apply 方法时,this 将会被显式设置为函数调用的第一个参数:
例:
var obj = {
name: "object"
};
function a(){
console.log(this)
};
a.call(obj); //控制台打印出 obj 对象
出现这样的结果是由 call 和 apply 的实现原理决定的,call 和 apply 改变 this 指向的原理是它改变了函数的运行上下文环境。
扫码关注腾讯云开发者
领取腾讯云代金券
Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号:粤B2-20090059 深公网安备号 44030502008569
腾讯云计算(北京)有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287
Copyright © 2013 - 2025 Tencent Cloud.
All Rights Reserved. 腾讯云 版权所有