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"。



声明

本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。