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