5分钟懂一个前端知识点系列之this关键字
绯雨934 2024-07-06 11:33:06 阅读 91
前言
本人在学习<code>this和原型(特别是this指向)的时候遇到了些许困惑,今天跟大家详细解释一下我在学习路上对this和原型
的了解。难点先来攻克,今天先来讲讲this
。这里统一声明不讨论严格模式下面的使用,因为我也不了解不能误导大家!
this
this
关键字在JavaScript中主要用于指代当前函数执行时的上下文对象,即函数内部的一个特殊变量,它指向函数调用时所属的对象。如果不太清楚函数上下文对象的可以看我的5分钟系列的其他文章,里面有讲解函数执行的上下文对象是个啥,存储的是什么内容,这里就不过多描述。
this
关键字是一个非常重要且有时可能引起混淆的概念。它的值取决于函数调用的上下文,即函数是如何被调用的,而不是函数在哪里被定义。
普通函数this指向
普通函数是不需要this对象的,因为仅仅只是使用函数并不需要知道函数执行的所属对象。所以一个普通函数是没有特定的this指向的,默认指向window全局对象
对象内部的this指向
一个对象内部的this指向一般都是对象本身,当然也有例外
看下面这段代码
function Person(){
function printThis(){
console.log(this);
}
}
var p1 =new Person().printThis;
p1();
这里输出打印的this指向的是全局对象,因为这里的printThis
函数是被当作一个普通函数调用了。普通函数调用this就是默认指向全局。
如何判断一个函数会被当成普通函数
如果一个函数不是作为某个对象的方法被调用,也没有使用.call()
, .apply()
, 或 .bind()
方法来改变this
的绑定(这个可以暂时先不管),那么它被视为直接调用当作一个普通函数。
而上段代码创建了一个Person
的实例,并尝试访问其printThis
方法,但随后立即丢弃了新创建的实例,只保留了printThis
函数的引用。当执行p1()
时,printThis
函数是以独立函数的形式被调用的,而非作为某个对象的方法调用。所以这里的printThis
也被当做了普通函数。
如果回调函数是在全局上下文中定义的或者在非严格模式下被调用,且没有通过对象方法调用,那么this
通常指向全局对象
箭头函数this指向
箭头函数不绑定自己的this
,它会捕获其所在上下文的this
值作为自己的this
值,也就是词法作用域下的this
。
这意味着在箭头函数中,this
的值是定义时所在的上下文决定的,而非调用时的上下文。这对于避免常规函数中常见的this
混乱问题非常有帮助,尤其是在处理异步代码、回调函数或者在类的方法中。下面是一段实例代码
const obj = {
normalFunc: function() {
setTimeout(function() {
console.log(this); // 这里的this通常指向全局对象(非严格模式)
}, 1000);
},
arrowFunc: function() {
setTimeout(() => {
console.log(this); // 这里的this指向obj对象,因为箭头函数没有自己的this,它继承了外层的this
}, 1000);
}
};
obj.normalFunc(); // 输出可能不是obj
obj.arrowFunc(); // 输出obj
测试
下面是有关的几道题目可以尝试做做。这里的答案都是在浏览器上执行,而非nodeJS因为两者全局对象有所不同。
function showName() { console.log(this.name); }// 这里的this指向哪里?输出什么?
var name = "全局";
showName();
答案解析: this
指向全局对象(浏览器中是window
,Node.js中是global
)。
const obj = {
name: "Object",
showName: function() {
console.log(this.name);// 这里this指向什么?输出什么?
}
};
obj.showName();
答案解析: 当函数作为对象的一个方法被调用时,this
指向该对象。因此,这里this
指向obj
。
function Person(name) {
this.name = name;
setTimeout(function() {
console.log(this.name); // 这里this指向什么?输出什么?
}, 1000);
}
const person = new Person("Alice");
答案解析: 在setTimeout
的回调函数中,如果没有特别处理,this
通常会指向全局对象(非严格模式下),因为它是作为全局函数调用的。因此,这里的this.name
可能不是预期的"Alice",而是全局对象的属性。但是,题目问的是new Person("Alice")
中的this
,这里this
指向新创建的Person
实例,即指向新创建的person
对象。
function Person(name) { this.name = name; }
Person.prototype.printName = function() { console.log(this.name); }; // 这里的this指向哪里?
const person = new Person("Bob");
person.printName(); //输出什么?
答案解析: 当通过实例调用原型链上的方法时,this
指向该实例。因此,person.printName()
中的this
指向person
实例,输出是"Bob"。
声明
本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。