JavaScript 中的类（Class）详解

JavaScript 的 class 是基于原型继承的语法糖，本质上还是构造函数 + 原型链，但写法更简洁、更符合面向对象编程（OOP）习惯。它是现代 JS 开发（Vue/React/Node.js）的核心知识点。

我会从基础语法、核心特性、继承、静态方法、私有属性等全维度讲解，你可以直接复制代码运行测试。

一、类的基础定义与使用

1. 基本语法

// 1. 定义类
class Person {
  // 构造方法：new 时自动执行，初始化属性
  constructor(name, age) {
    this.name = name; // 实例属性
    this.age = age;
  }

  // 实例方法：自动挂载到原型上，所有实例共享
  sayHello() {
    console.log(`大家好，我是${this.name}，今年${this.age}岁`);
  }
}

// 2. 创建实例
const p1 = new Person("张三", 20);
p1.sayHello(); // 调用方法：大家好，我是张三，今年20岁

console.log(p1.name); // 访问属性：张三

核心要点

class 是关键字，类名首字母大写（规范）
constructor 是构造函数，new 实例时自动调用
类中的方法不需要加 function，也不需要逗号分隔
实例方法默认挂载在原型上，节省内存

二、类的属性分类

1. 实例属性（最常用）

定义在 constructor 或实例上，每个实例独立拥有：

class Person {
  constructor() {
    this.name = "默认名字"; // 实例属性
  }
}

2. 公共属性（简写语法）

ES6+ 支持直接在类顶部声明，无需写在 constructor 里：

class Person {
  // 直接声明公共实例属性
  gender = "男"; 
  
  constructor(name) {
    this.name = name;
  }
}

当你通过 new 关键字创建一个类的实例（对象）后，可以直接通过点号（.）来读取或赋值公共属性，具体代码如下所示：

class Person {
  gender = "男"; // 直接声明公共实例属性
  
  constructor(name) {
    this.name = name;
  }
}

// 创建实例
const person1 = new Person("张三");

// 【读取】公共属性
console.log(person1.gender); // 输出: "男"
console.log(person1.name);   // 输出: "张三"

// 【修改】公共属性
person1.gender = "女";
console.log(person1.gender); // 输出: "女"

3. 静态属性 / 方法（属于类，不属于实例）

使用 static 关键字，只能通过类名调用，不能通过实例调用：

class MathUtil {
  // 静态属性
  static PI = 3.14159;
  
  // 静态方法
  static add(a, b) {
    return a + b;
  }
}

// 正确用法
console.log(MathUtil.PI); 
console.log(MathUtil.add(1,2));

// 错误用法（实例无法访问）
const m = new MathUtil();
// m.add() // 报错

使用场景：工具函数、全局配置、不需要实例化的方法。

4. 私有属性 / 方法（ES2022）

以 # 开头，只能在类内部访问，外部无法读取 / 修改，实现封装：

class BankCard {
  // 私有属性（必须带#）
  #password = "123456";

  showPwd() {
    // 类内部可以访问私有属性
    return this.#password;
  }
}

const card = new BankCard();
console.log(card.showPwd()); // 123456
// console.log(card.#password); // 报错：私有属性不可访问

三、类的继承（extends）

extends 关键字实现类的继承，子类可以继承父类的所有属性和方法。

1. 基础继承

// 父类
class Animal {
  constructor(name) {
    this.name = name;
  }
  eat() {
    console.log(`${this.name} 在吃饭`);
  }
}

// 子类继承父类
class Dog extends Animal {
  constructor(name, breed) {
    // 必须先调用 super() 继承父类构造器
    super(name); 
    this.breed = breed; // 子类独有属性
  }

  // 子类独有方法
  bark() {
    console.log(`${this.name} 汪汪叫`);
  }
}

const dog = new Dog("旺财", "金毛");
dog.eat();   // 继承父类方法
dog.bark();  // 子类方法
console.log(dog.breed); // 金毛

2. 方法重写（override）

子类可以重写父类的同名方法：

class Cat extends Animal {
  // 重写父类方法
  eat() {
    console.log(`${this.name} 爱吃鱼`);
  }
}

const cat = new Cat("咪咪");
cat.eat(); // 咪咪 爱吃鱼（执行子类重写的方法）

继承核心规则

子类 constructor 中必须第一行调用 super()
super 代表父类构造函数，用来初始化父类属性
子类可以重写父类方法，优先执行子类逻辑

四、getter /setter 访问器

用于控制属性的读取和赋值，可以做数据校验、格式化：

class Student {
  constructor(score) {
    this._score = score; // 约定_开头为内部属性
  }

  // getter：获取值时触发
  get score() {
    return this._score + "分";
  }

  // setter：赋值时触发
  set score(value) {
    if (value < 0 || value > 100) {
      console.log("分数无效");
      return;
    }
    this._score = value;
  }
}

const s = new Student(90);
console.log(s.score); // 90分（触发getter）
s.score = 150; // 分数无效（触发setter校验）

五、类的本质（重要）

JS 类本质是函数，原型链继承的语法糖：

class Person {}
console.log(typeof Person); // function
console.log(Person === Person.prototype.constructor); // true

类 = 构造函数的语法糖
类的方法 = 挂载在原型上的方法
继承 = 原型链继承的简化写法

六、完整实战示例

// 父类：用户
class User {
  constructor(username, password) {
    this.username = username;
    this.password = password;
  }

  login() {
    console.log(`${this.username} 登录成功`);
  }
}

// 子类：管理员
class Admin extends User {
  constructor(username, password, role) {
    super(username, password);
    this.role = role;
  }

  manage() {
    console.log(`管理员${this.username} 正在管理系统`);
  }
}

const admin = new Admin("admin", "123", "super");
admin.login();
admin.manage();

七、类的注意事项

类不存在变量提升（必须先定义，再使用）
类中的代码默认运行在严格模式下
实例方法中的 this 默认指向实例本身
静态方法中的 this 指向类本身
私有属性必须用 # 声明，是语法层面的真正私有

总结

class 是 JS 面向对象的核心语法，简化了原型继承
核心组成：constructor、实例方法、static 静态成员、# 私有成员
extends + super 实现继承，是组件、框架的基础
本质是函数 + 原型链，不是传统面向对象的类

posted @ 2026-05-16 19:02 chenlight 阅读(48) 评论(0) 收藏举报

刷新页面返回顶部

chenlight