异常教程

javascript class（长文讲解）

更新时间:

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

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

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

在现代 JavaScript 开发中，面向对象编程（OOP）已成为构建复杂应用的重要工具。随着 ES6 的引入，JavaScript 通过 class 关键字提供了更直观的类语法，使得开发者能够以更结构化的方式组织代码。无论是构建前端框架、后端服务还是混合应用，掌握 javascript class 的核心概念和高级特性，都是提升代码可维护性和可扩展性的重要基础。本文将从基础语法到实际应用，系统性地解析 javascript class 的关键知识点，并通过案例帮助读者理解其应用场景。

一、JavaScript Class 的基础语法

1.1 Class 的定义与实例化

JavaScript 的 class 是 ES6 引入的语法糖，其底层仍基于原型（prototype）机制实现。通过 class 关键字，开发者可以更直观地定义对象的模板。

示例代码：定义一个简单的类

class Animal {  
  constructor(name) {  
    this.name = name;  
  }  
  sayHello() {  
    return `Hello, my name is ${this.name}`;  
  }  
}  

// 实例化对象  
const dog = new Animal("Buddy");  
console.log(dog.sayHello()); // 输出：Hello, my name is Buddy

核心概念解释：

  • constructor 方法：类的构造函数，用于初始化对象的属性。
  • 方法定义：通过在类内部直接定义函数的方式，为对象实例添加方法。
  • 实例化：通过 new 关键字调用类，生成一个基于该类的新对象。

1.2 类的属性与方法分类

JavaScript 类支持多种属性和方法类型，开发者需根据需求选择合适的定义方式：

类型语法结构适用场景
实例属性this.property = value存储对象的私有数据
实例方法method() { ... }对象实例可直接调用的行为
静态方法static methodName() { ... }类本身可调用的共享方法
静态属性static property = value类级别的共享数据
访问器属性（Getter/Setter）get propName() { ... }
set propName(value) { ... }		控制属性的读写逻辑

案例：静态方法的应用

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

console.log(MathUtils.sum(3, 5)); // 输出：8

二、继承与多态：构建类的层级关系

2.1 继承的实现与 extends 关键字

通过 extends，可以创建一个继承父类的子类。子类可继承父类的属性和方法，并可通过 super 调用父类构造函数或方法。

示例代码：动物与鸟类的继承

class Bird extends Animal {  
  constructor(name, wingspan) {  
    super(name); // 调用父类的 constructor  
    this.wingspan = wingspan;  
  }  
  fly() {  
    return `${this.name} is flying with ${this.wingspan}cm wingspan.`;  
  }  
}  

const eagle = new Bird("Eagle", 180);  
console.log(eagle.sayHello()); // 继承自 Animal 的方法  
console.log(eagle.fly());      // 子类新增的方法

2.2 覆盖与扩展：多态的实践

子类可通过重新定义父类方法实现多态（polymorphism），即“用不同方式响应相同方法”。

class Parrot extends Bird {  
  sayHello() {  
    return super.sayHello() + " I can talk!"; // 调用父类方法并扩展功能  
  }  
}  

const parrot = new Parrot("Polly", 40);  
console.log(parrot.sayHello()); // 输出：Hello, my name is Polly. I can talk!

三、高级特性：静态方法与私有字段

3.1 静态方法与属性

静态方法和属性属于类本身，而非实例。它们常用于工具类或全局配置的场景。

class Logger {  
  static log(message) {  
    console.log(`[INFO] ${message}`);  
  }  
  static warn(message) {  
    console.log(`[WARNING] ${message}`);  
  }  
}  

Logger.log("System started"); // 输出：[INFO] System started

3.2 私有字段与访问器

ES2022 引入了私有字段（# 前缀），确保属性仅在类内部可访问，从而增强封装性。

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

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

  getBalance() {  
    return this.#balance;  
  }  

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

const account = new BankAccount(100);  
console.log(account.#balance); // 报错：私有字段无法从外部访问

四、常见问题与最佳实践

4.1 类与原型的关系

尽管 class 提供了更简洁的语法，但其本质仍是基于原型实现的。例如，子类的 __proto__ 指向父类的原型对象：

console.log(Bird.prototype.__proto__ === Animal.prototype); // 输出：true

4.2 避免常见的继承陷阱

  • 构造函数调用顺序：子类的 constructor 必须调用 super()，否则会报错。
  • 方法覆盖需谨慎：覆盖父类方法时，若需保留原有逻辑，务必使用 super.methodName()。

4.3 实际开发中的类设计

  • 单一职责原则：每个类应仅负责一个功能模块。
  • 组合优于继承：通过组合（Composition）而非继承扩展功能，可提高代码灵活性。

五、实战案例：构建一个图书管理类

5.1 需求分析

假设需创建一个图书管理类，支持以下功能：

  1. 记录书籍的标题、作者和库存数量；
  2. 支持借阅和归还操作；
  3. 提供统计当前库存的方法。

5.2 代码实现

class Book {  
  #title;  
  #author;  
  #stock;  

  constructor(title, author, initialStock) {  
    this.#title = title;  
    this.#author = author;  
    this.#stock = initialStock;  
  }  

  get title() {  
    return this.#title;  
  }  

  borrow() {  
    if (this.#stock > 0) {  
      this.#stock -= 1;  
      return true;  
    }  
    return false;  
  }  

  returnBook() {  
    this.#stock += 1;  
  }  

  getStock() {  
    return this.#stock;  
  }  
}  

// 使用示例  
const book = new Book("JavaScript: The Definitive Guide", "David Flanagan", 5);  
console.log(book.borrow()); // 输出：true  
console.log(book.getStock()); // 输出：4  
book.returnBook();  
console.log(book.getStock()); // 输出：5

结论

掌握 javascript class 的核心语法和设计模式，是开发者构建可维护、可扩展的大型应用的重要能力。从基础的类定义到高级的私有字段、继承与组合，每个知识点都需结合实际场景反复实践。未来，随着 JavaScript 生态的持续发展，类语法将与模块化、异步编程等技术共同构成现代前端/后端开发的基石。建议读者通过阅读官方文档（如 MDN）和参与开源项目，进一步深化对 javascript class 的理解。

关键词布局回顾：

  • 核心关键词“javascript class”在标题、前言和结论中自然出现
  • 次要关键词如“继承”“静态方法”“私有字段”贯穿各章节
  • 技术术语与实际案例结合，确保内容对 SEO 友好且易于理解

最新发布

查看更多文章