异常教程

js class（长文解析）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

在 JavaScript 的世界中，“js class” 是 ES6 引入的革命性语法之一。它不仅让代码结构更加清晰，还为开发者提供了一种更直观的方式去组织对象和行为。无论是构建复杂的前端框架，还是开发后端 API，掌握类的使用都能显著提升代码的可维护性和可读性。本文将从基础语法到高级特性，逐步解析“js class”的核心概念，并通过实际案例帮助读者理解其应用场景。

一、什么是 JavaScript Class？

JavaScript 的 Class 是一种基于原型（prototype）的语法糖，它简化了面向对象编程（OOP）的实现方式。我们可以将 Class 比作“蓝图”：就像建筑师用蓝图设计房屋一样，开发者通过 Class 定义对象的结构和行为，而每个对象实例则是根据这个蓝图“建造”出来的具体实体。

Class 的基本语法

使用 class 关键字定义一个 Class，并通过 constructor 方法初始化对象的属性：

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

  // 定义方法  
  greet() {  
    return `Hello, my name is ${this.name} and I'm ${this.age} years old.`;  
  }  
}  

// 实例化对象  
const alice = new Person("Alice", 30);  
console.log(alice.greet()); // 输出：Hello, my name is Alice and I'm 30 years old.

关键点解释：

  • constructor 是类的构造函数，每当用 new 关键字创建实例时，它会自动执行。
  • 类中的方法可以直接通过 . 操作符调用，无需像传统原型链那样手动挂载到 prototype 上。

二、Class 的核心特性

1. 继承与多态

JavaScript 的 Class 支持通过 extends 关键字实现继承，这类似于其他面向对象语言中的“子类”和“父类”。继承允许子类复用父类的属性和方法，并通过 super 关键字调用父类的构造函数或方法。

示例：Animal 父类与 Dog 子类

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

  speak() {  
    return `My name is ${this.name}`;  
  }  
}  

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

  // 覆盖父类的方法  
  speak() {  
    return `${super.speak()} and I'm a ${this.breed}`;  
  }  
}  

const bulldog = new Dog("Buddy", "Bulldog");  
console.log(bulldog.speak()); // 输出：My name is Buddy and I'm a Bulldog

多态性体现在子类可以覆盖父类的方法，但保留方法名和参数，从而实现不同的行为逻辑。

2. 静态方法与属性

静态方法（static）属于类本身，而非实例。它们可以直接通过类名调用，无需创建实例。静态方法常用于工具函数或配置管理。

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

  // 静态属性（ES2022 新增）  
  static #privateValue = 42;  
  static getSecret() {  
    return this.#privateValue;  
  }  
}  

console.log(MathHelper.add(5, 3)); // 输出：8  
console.log(MathHelper.getSecret()); // 输出：42

适用场景：

  • 实现全局工具函数（如验证、计算）。
  • 管理类级别的配置或共享数据。

3. 私有字段与方法

ES2022 引入了私有字段（以 # 开头），它仅在类内部可见，无法从外部直接访问。这为数据封装提供了更严格的保护。

class BankAccount {  
  #balance = 0; // 私有字段  

  constructor(initialAmount) {  
    this.#balance = initialAmount;  
  }  

  deposit(amount) {  
    this.#balance += amount;  
  }  

  // 通过方法暴露私有数据  
  getBalance() {  
    return this.#balance;  
  }  
}  

const account = new BankAccount(100);  
console.log(account.#balance); // 报错：私有字段无法直接访问  
account.deposit(50);  
console.log(account.getBalance()); // 输出：150

优势：

  • 防止外部代码意外修改关键数据。
  • 提升代码的封装性和安全性。

三、Class 的实际应用案例

案例 1：购物车系统

class ShoppingCart {  
  constructor() {  
    this.items = [];  
  }  

  addItem(product, quantity) {  
    this.items.push({ product, quantity });  
  }  

  calculateTotal() {  
    return this.items.reduce(  
      (total, item) => total + item.product.price * item.quantity,  
      0  
    );  
  }  
}  

// 使用示例  
const cart = new ShoppingCart();  
cart.addItem({ name: "Laptop", price: 1000 }, 1);  
console.log(cart.calculateTotal()); // 输出：1000

案例 2：图形计算器

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

  area() {  
    throw new Error("Method 'area' must be implemented!");  
  }  
}  

class Rectangle extends Shape {  
  constructor(width, height) {  
    super("Rectangle");  
    this.width = width;  
    this.height = height;  
  }  

  area() {  
    return this.width * this.height;  
  }  
}  

const rect = new Rectangle(5, 3);  
console.log(rect.area()); // 输出：15

四、Class 与原型链的关系

虽然 Class 看似独立，但它底层仍依赖原型链机制。例如，类的 prototype 对象依然存在，所有实例共享该原型上的方法。

class Vehicle {  
  move() {  
    return "Moving...";  
  }  
}  

console.log(Vehicle.prototype.move()); // 输出：Moving...

对比表格：Class vs 原型链语法
| 特性 | Class 语法 | 原型链语法 |
|--------------------|------------------------------------|-------------------------------------|
| 定义方式 | class 关键字 | 函数 + prototype 对象 |
| 继承 | extends | Object.create() 或手动赋值 |
| 私有字段 | # 符号 | 无直接支持，依赖命名约定（如 _private） |
| 可读性 | 更直观，语法简洁 | 稍显冗长，需手动维护原型链 |

五、最佳实践与常见问题

1. 避免直接操作原型链

直接修改类的 prototype 可能破坏封装性，应通过类方法或静态方法暴露接口。

// 不推荐  
Person.prototype.newMethod = function() { ... };  

// 推荐  
class Person {  
  newMethod() { ... }  
}

2. 私有字段的命名规范

即使使用 #，也建议遵循有意义的命名（如 #balance 而非 #a），以提升代码可读性。

3. 类的继承层级不宜过深

过深的继承链可能导致代码难以维护，此时可考虑组合（Composition）而非继承。

六、结论

通过本文的讲解，我们深入理解了“js class”的语法、特性及应用场景。从基础的构造函数到高级的私有字段，Class 提供了灵活且强大的工具，帮助开发者构建结构清晰、易于扩展的代码。无论是构建小型工具还是大型应用，掌握 Class 的核心概念都将显著提升开发效率。

未来，随着 JavaScript 的持续演进，Class 的语法和功能可能会进一步优化，但其核心思想——通过封装和继承实现模块化设计——始终是现代 JavaScript 开发的基石。建议读者通过实际项目练习，逐步内化这些知识，并探索更多进阶主题（如装饰器、混入模式等）。

（全文约 1800 字）

最新发布

查看更多文章