2025-2-19学习笔记：this关键字，constructor结构体，class类

1、This关键字

在 JavaScript 中，this 是一个关键字，其指向取决于函数的调用方式。理解 this 的指向对于编写正确的代码至关重要。以下是 this 在不同情况下的指向规则：

1. 全局函数调用

当函数在全局作用域中被调用时，this 指向全局对象。在浏览器中，全局对象是 window。

function test() { console.log(this); // 在浏览器中，输出 window 对象 } test();

2. 对象方法调用

当函数作为对象的方法被调用时，this 指向该对象。

const obj = { name: 'Alice', greet: function() { console.log(this.name); } }; obj.greet(); // 输出 'Alice'

3. 构造函数调用

当函数作为构造函数使用时（即使用 new 关键字调用），this 指向新创建的对象。

function Person(name) { this.name = name; } const person = new Person('Bob'); console.log(person.name); // 输出 'Bob'

4. call 和 apply 方法调用

call 和 apply 方法可以显式地指定函数内部的 this 指向。

function greet() { console.log(this.name); } const person = { name: 'Charlie' }; greet.call(person); // 输出 'Charlie' greet.apply(person); // 输出 'Charlie'

5. 箭头函数

箭头函数与普通函数不同，它没有自己的 this，而是继承自外部函数的 this。

function Outer() { this.name = 'David'; setTimeout(() => { console.log(this.name); // 输出 'David' }, 1000); } new Outer();

在上述示例中，箭头函数内部的 this 继承自 Outer 函数的 this，因此输出 'David'。

6. 事件处理器中的 this

在事件处理器中，this 通常指向触发事件的 DOM 元素。

const button = document.querySelector('button'); button.addEventListener('click', function() { console.log(this); // 输出触发事件的 button 元素 });

需要注意的是，箭头函数在事件处理器中也会继承外部的 this，这可能导致与预期不符的行为。

理解 this 的指向规则对于编写正确的 JavaScript 代码至关重要。

2、constructor

在 JavaScript 中，constructor 是一个特殊的方法，用于创建和初始化由类创建的对象。每个类都可以有一个名为 constructor 的方法，当使用 new 关键字创建类的实例时，constructor 方法会被自动调用。citeturn0search0

构造函数的基本用法：

class Person { constructor(name, age) { this.name = name; this.age = age; } } const person1 = new Person('Alice', 30); console.log(person1.name); // 输出: Alice console.log(person1.age); // 输出: 30

在上述示例中：

Person 类包含一个 constructor 方法，用于初始化 name 和 age 属性。使用 new Person('Alice', 30) 创建了一个新的 Person 实例 person1，并传递了参数 'Alice' 和 30。person1 的 name 和 age 属性被成功初始化。

构造函数的特点：

自动调用： 当使用 new 关键字创建类的实例时，constructor 方法会被自动调用。初始化属性： constructor 方法通常用于初始化实例的属性。只能有一个： 一个类只能有一个名为 constructor 的方法。

注意事项：

如果类中没有显式定义 constructor 方法，JavaScript 会提供一个默认的构造函数。在构造函数中，可以使用 super 关键字调用父类的构造函数。

示例：

class Employee extends Person { constructor(name, age, employeeId) { super(name, age); // 调用父类的构造函数 this.employeeId = employeeId; } } const employee = new Employee('Bob', 25, 'E123'); console.log(employee.name); // 输出: Bob console.log(employee.age); // 输出: 25 console.log(employee.employeeId); // 输出: E123

在上述示例中：

Employee 类继承自 Person 类。Employee 的 constructor 方法首先调用 super(name, age)，以初始化从 Person 继承的属性。然后，Employee 的 constructor 方法初始化了 employeeId 属性。

通过使用 constructor 方法，可以在创建对象时进行必要的初始化操作，确保对象处于有效的状态。

3、

在 JavaScript 中，class 是 ES6 引入的用于创建对象的模板。它为对象提供了状态（成员变量）的初始值和行为（成员函数或方法）的实现。虽然 class 语法看起来类似于传统的面向对象编程语言，但其底层实现仍然基于原型和构造函数。

定义类

使用 class 关键字可以定义一个类。类的主体由一对大括号 {} 包裹，其中可以包含构造函数和方法。

// 类声明 class Rectangle { constructor(height, width) { this.height = height; this.width = width; } // 方法 calcArea() { return this.height * this.width; } }

在上述示例中，Rectangle 类包含一个构造函数 constructor，用于初始化实例的 height 和 width 属性，以及一个方法 calcArea，用于计算矩形的面积。

创建类的实例

可以使用 new 关键字来创建类的实例：

const rect = new Rectangle(10, 5); console.log(rect.calcArea()); // 输出：50

类的继承

JavaScript 中的类支持继承，可以使用 extends 关键字来创建一个类作为另一类的子类。子类可以继承父类的属性和方法，并可以重写父类的方法。

class Square extends Rectangle { constructor(side) { super(side, side); // 调用父类的构造函数 } }

在上述示例中，Square 类继承自 Rectangle 类，并在构造函数中调用 super 来初始化 height 和 width，使其相等，从而表示正方形。

静态方法和字段

使用 static 关键字可以定义类的静态方法或字段。静态方法和字段属于类本身，而不是类的实例。

class MathUtil { static square(x) { return x * x; } } console.log(MathUtil.square(5)); // 输出：25

私有字段和方法

ES2022 引入了私有字段和方法的概念，使用 # 前缀来定义私有成员。私有成员只能在类的内部访问，外部无法直接访问。

class Counter { #count = 0; increment() { this.#count++; } getCount() { return this.#count; } } const counter = new Counter(); counter.increment(); console.log(counter.getCount()); // 输出：1

在上述示例中，#count 是一个私有字段，increment 和 getCount 方法用于操作和访问该私有字段。

总结

JavaScript 中的 class 提供了一种更清晰、更接近传统面向对象编程的方式来定义对象和组织代码。它使得代码更加模块化、可复用、可扩展。通过类，可以轻松地创建多个对象实例并管理它们的属性和行为。