react必备JavaScript知识点(二)——类

引言💭

在 JavaScript 中，class 是 ES6 引入的一种创建对象的语法，虽然底层依然是基于原型链的继承机制，但 class 语法更贴近传统的面向对象编程语言，使得代码更具可读性和维护性。

JavaScript 的 class 语法是面向对象编程的一种现代实现，它为开发者提供了更加简洁的代码结构，并减少了对复杂的原型链操作的依赖。

1. 使用 class 定义类

在 JavaScript 中，class 是用来创建类的关键字。类的构造函数用 constructor 来初始化实例所需要的属性。使用 class 的语法，使得对象和类的定义变得更加直观和易于维护。

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

const person1 = new Person('Alice', 30);
person1.greet();  // 输出: Hello, my name is Alice and I am 30 years old.

• constructor 方法是类的构造函数，用来初始化实例的属性。
• greet 方法是实例方法，用来执行实例级的操作。

2. 使用 extends 关键字实现继承

JavaScript 的类支持继承，子类可以继承父类的属性和方法。继承使用 extends 关键字，子类可以通过 super() 调用父类的构造函数。

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a sound.`);
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name);  // 调用父类构造函数
    this.breed = breed;
  }

  speak() {
    console.log(`${this.name} barks.`);  // 重写父类的 speak 方法
  }
}

const dog1 = new Dog('Buddy', 'Golden Retriever');
dog1.speak();  // 输出: Buddy barks.

• super() 用来调用父类的构造函数和方法。
• 子类可以重写父类的方法（如 speak()）来实现特定行为。

3. 静态方法

静态方法是属于类本身的，而不是类的实例。静态方法通过类名调用，而不是通过实例来调用。

class MathUtils {
  static add(a, b) {
    return a + b;
  }
}

console.log(MathUtils.add(5, 3));  // 输出: 8

• 静态方法通常用于与类的实例无关的操作，如工具类方法。
• 静态方法通过类名直接调用，例如 MathUtils.add()。

4. Getter 和 Setter 方法

getter 和 setter 方法允许我们控制对象属性的访问。get 用来获取属性值，set 用来设置属性值。这使得我们可以在获取或修改属性时添加额外的逻辑。

class Rectangle {
  constructor(width, height) {
    this.width = width;
    this.height = height;
  }

  // Getter 方法
  get area() {
    return this.width * this.height;
  }

  // Setter 方法
  set dimensions(values) {
    this.width = values.width;
    this.height = values.height;
  }
}

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

rect.dimensions = { width: 15, height: 10 };
console.log(rect.area);  // 输出: 150

• get 方法让我们可以通过 rect.area 直接访问属性值，而无需显式调用函数。
• set 方法允许我们通过 rect.dimensions = { width: 15, height: 10 } 来设置对象的属性。

5. 私有字段和方法

ES2022 引入了私有字段（使用 # 前缀），允许类定义私有属性和方法，避免外部访问或修改。私有字段只能在类内部访问，外部无法直接修改。

class Person {
  #name;  // 私有字段

  constructor(name) {
    this.#name = name;
  }

  greet() {
    console.log(`Hello, my name is ${this.#name}.`);
  }
}

const person = new Person('Alice');
person.greet();  // 输出: Hello, my name is Alice.
console.log(person.#name);  // 会抛出错误: Private field '#name' must be declared in an enclosing class

• 私有字段和方法使用 # 前缀定义，外部无法直接访问这些字段。
• 这种方式增强了类的封装性，避免了外部对内部状态的直接干预。

结语✒️

JavaScript 中的 class 提供了面向对象编程的基本特性，包括构造函数、方法、继承、静态方法、属性访问器等。

主播在学习react中遇到了一个问题，脚手架用Webpack还是Vite，一个兼容性好但复杂，一个简单但仅支持现代浏览器🤯uu们有什么建议吗？