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