JavaScript中的Class语法糖详细零基础讲解

1. 什么是 class？

class 是 ES6（2015）以后引入的，用来定义“类”的语法糖，本质上是函数和原型的封装。
它是创建对象的模板，包含属性（数据）和方法（行为）。

2. 为什么用 class？

让代码更清晰、结构更好，方便管理复杂项目。
支持面向对象编程（OOP），可以实现继承、封装、多态。

3. class 的基本语法

class Person {
  constructor(name, age) {  // 构造函数，用来初始化新对象
    this.name = name;       // this指代实例本身，给实例添加属性
    this.age = age;
  }

  sayHello() {              // 方法，写在类里但不需要function关键词
    console.log(`Hello, my name is ${this.name}, I'm ${this.age} years old.`);
  }
}

4. 怎么用 class 创建对象？

const p1 = new Person('Logan', 28);  // 用new关键字调用构造函数
p1.sayHello();  // 输出：Hello, my name is Logan, I'm 28 years old.

new 会执行 constructor，并返回新对象。
p1 就是一个 Person 类的实例。

5. class的几个重点

特点	说明
constructor	必须用来初始化对象，只能有一个
方法定义	直接写方法名，不用function
不能直接调用	class本身是模板，必须用new来实例化
实例属性和方法	通过this访问实例属性，方法写在class内
class内部默认严格模式	代码自动启用`'use strict';`，避免一些低级错误

6. 继承（extends）

子类可以继承父类的属性和方法。

class Student extends Person {
  constructor(name, age, grade) {
    super(name, age);  // 调用父类constructor
    this.grade = grade; 
  }

  study() {
    console.log(`${this.name} is studying in grade ${this.grade}.`);
  }
}

const s1 = new Student('Anna', 20, 3);
s1.sayHello();  // 继承自Person
s1.study();     // Student自己特有的方法

7. 静态方法（static）

静态方法属于类，不属于实例，不能用实例调用。

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

console.log(MathUtil.add(2, 3));  // 5
// const m = new MathUtil();
// m.add(2,3);  // 错误，实例不能调用静态方法

8. 私有属性和方法（ES2022+）

用 # 开头表示私有，类外不可访问。

class Secret {
  #password = '123456';

  checkPassword(pwd) {
    return pwd === this.#password;
  }
}

const sec = new Secret();
console.log(sec.checkPassword('123456'));  // true
console.log(sec.#password);  // 报错，无法访问私有属性

9. 总结

关键词	作用
class	定义类的模板
constructor	初始化实例属性
this	代表当前实例
extends	继承父类
super	调用父类构造函数
static	定义类的静态方法
#	定义私有属性或方法