JavaScript 面向对象编程

学习目标

理解面向对象编程（OOP）的基本概念及其在 JavaScript 中的实现方式
掌握类（Class）与对象（Object）的定义与使用方法
深入理解 OOP 的四大核心特性：封装、继承、多态与抽象
能够运用 OOP 思想编写结构清晰、可维护、可复用的 JavaScript 代码

什么是面向对象编程

面向对象编程（简称 OOP）是一种编程范式，它通过类（Class）和对象（Object）来模拟现实世界中的实体，将数据（属性）与行为（方法）组织在一起。

类：是创建对象的模板或蓝图，定义了对象应具备的属性和方法。
对象：是类的具体实例，拥有类所定义的属性和方法。

为什么需要 OOP

在没有 OOP 的早期开发中，随着项目规模扩大和多人协作，常出现以下问题：

一个团队修改代码可能导致其他模块出错，维护困难
函数调用时参数过多，接口复杂
代码难以划分职责，跨团队协作效率低
代码复用性差
系统缺乏模块化，难以扩展

OOP 通过将数据和操作数据的函数封装在对象中，有效解决了上述问题，并提供了以下核心优势：

封装：隐藏内部实现细节，允许独立修改内部逻辑而不影响外部代码
继承：支持代码复用，子类可继承父类的属性和方法
多态：同一接口在不同对象中有不同行为
抽象：仅暴露必要信息，简化用户交互

JS 中的对象

在 JavaScript 中，对象是一组以键值对形式存储的数据（属性）和行为（方法）的集合。

属性（Properties）：可以是字符串、数字、布尔值，甚至其他对象
方法（Methods）：是定义在对象内部的函数，用于执行特定操作

// 示例：一个简单的对象
const student = {
  name: "张三",
  age: 20,
  greet() {
    console.log(`你好，我是 ${this.name}，今年 ${this.age} 岁。`);
  }
};

student.greet(); // 输出：你好，我是 张三，今年 20 岁。

JS 中的类

ES6 引入了 class 语法，使 JavaScript 的面向对象编程更加清晰和直观。类本身不包含具体数据，而是作为创建对象的模板。

类的基本结构

// 定义一个 Car 类
class Car {
  constructor(brand, model) {
    this.brand = brand;   // 属性
    this.model = model;   // 属性
  }

  // 方法
  showDetails() {
    console.log(`这辆车是 ${this.brand} ${this.model}。`);
  }
}

// 创建对象实例
const car1 = new Car("丰田", "卡罗拉");
const car2 = new Car("本田", "思域");

car1.showDetails(); // 输出：这辆车是 丰田 卡罗拉。
car2.showDetails(); // 输出：这辆车是 本田 思域。

注意：constructor 是类的构造函数，在使用 new 创建对象时自动调用。

四大核心特性

抽象

抽象是指只暴露对象必要的信息，隐藏复杂的内部实现细节。用户只需知道“能做什么”，而无需关心“如何做”。

例如，汽车的启动按钮是一个抽象接口——你按下按钮就能启动，但不需要了解引擎点火的具体过程。

在 JavaScript 中，可通过私有字段（使用 # 前缀）或闭包实现一定程度的抽象。

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

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

  getBalance() {
    return this.#balance; // 仅通过方法暴露必要信息
  }
}

封装

封装是将数据（属性）和操作数据的方法绑定在一起，并限制对内部状态的直接访问。这提高了安全性和模块独立性。

如上例中的 #balance 字段无法从外部直接读取或修改，必须通过 deposit() 或 getBalance() 等公开方法进行操作。

继承

继承允许一个类（子类）从另一个类（父类）获取属性和方法，从而实现代码复用。

// 父类
class Vehicle {
  constructor(type) {
    this.type = type;
  }

  start() {
    console.log(`${this.type} 启动了。`);
  }
}

// 子类继承父类
class Car extends Vehicle {
  constructor(brand, model) {
    super("汽车"); // 调用父类构造函数
    this.brand = brand;
    this.model = model;
  }

  showInfo() {
    console.log(`品牌：${this.brand}，型号：${this.model}`);
  }
}

const myCar = new Car("比亚迪", "汉");
myCar.start();     // 输出：汽车 启动了。
myCar.showInfo();  // 输出：品牌：比亚迪，型号：汉

super() 用于调用父类的构造函数
子类可新增自己的属性和方法，也可重写父类方法

多态

多态指同一个方法在不同对象中具有不同的实现方式。它增强了程序的灵活性和可扩展性。

class Animal {
  speak() {
    console.log("某种动物发出了声音");
  }
}

class Dog extends Animal {
  speak() {
    console.log("汪汪！");
  }
}

class Cat extends Animal {
  speak() {
    console.log("喵喵！");
  }
}

const animals = [new Dog(), new Cat()];
animals.forEach(animal => animal.speak());

// 输出：
// 汪汪！
// 喵喵！

尽管调用的是相同的 speak() 方法，但不同对象表现出不同行为，这就是多态。

重点总结

特性	作用说明
类与对象	类是模板，对象是实例；用于组织相关数据和行为
抽象	隐藏复杂实现，仅暴露必要接口
封装	将数据和方法绑定，控制访问权限，提升安全性
继承	子类复用父类代码，支持层级化设计
多态	同一接口，多种实现，增强程序灵活性

思考题

在 JavaScript 中，如果不使用 class 语法，能否实现面向对象编程？如果可以，请简述其实现方式。
封装和抽象有何区别？请结合实际开发场景举例说明。
假设你要开发一个图书管理系统，请用 OOP 思想设计至少两个类，并说明它们之间的关系（如继承或组合）。