JavaScript 中的抽象

学习目标

理解抽象在软件设计中的核心价值与作用
掌握在 JavaScript 中实现抽象的多种方式（函数、对象、闭包、类）
能够识别并应用抽象解决实际开发问题
了解抽象与其他 OOP 特性（如封装）的关系与区别

什么是抽象

抽象是面向对象编程的基本原则之一，指的是：

隐藏复杂的实现细节，仅向用户暴露必要的、高层次的操作接口。

抽象的核心价值

简化使用：用户无需了解内部如何工作，只需知道“做什么”
降低认知负担：开发者只需关注接口，而非底层逻辑
提升安全性：敏感或复杂的逻辑被隔离，避免误用
增强可维护性：内部实现可随时重构，只要接口不变

抽象 ≠ 封装：
封装关注“数据保护”（谁可以访问）
抽象关注“复杂性隐藏”（用户看到什么）

实现抽象的方式

JavaScript 虽无原生 abstract class 关键字，但可通过多种机制实现抽象。

1. 使用函数实现行为抽象

函数是最基础的抽象单元，将复杂计算封装为单一调用点。

// 抽象：计算圆面积的复杂公式被隐藏
function calculateCircleArea(radius) {
    if (radius <= 0) {
        throw new Error("Radius must be positive");
    }
    return Math.PI * radius * radius;
}

console.log(calculateCircleArea(5)); // 78.53981633974483

优点：简单、直接、高复用性
适用场景：工具函数、数学计算、数据转换等

2. 使用对象和方法组织抽象

通过对象将相关数据与行为聚合，提供清晰的交互接口。

const Car = {
    brand: "Toyota",
    
    // 抽象启动逻辑：用户只需调用 start()
    start() {
        console.log("Car started");
        // 内部可能涉及点火、供油、ECU 初始化等复杂流程
    },
    
    stop() {
        console.log("Car stopped");
    }
};

Car.start(); // 输出: Car started

优点：结构清晰，语义明确
适用场景：实体建模、配置对象、单例服务

3. 使用闭包实现状态抽象

闭包可创建私有状态，仅通过公开方法操作，隐藏内部变量。

function createCounter() {
    let count = 0; // 私有状态，外部不可见
    
    return {
        // 抽象递增操作
        increment() {
            count++;
            console.log(count);
        },
        
        // 可选择是否暴露读取接口
        getValue() {
            return count;
        }
    };
}

const counter = createCounter();
counter.increment(); // 1
counter.increment(); // 2
// console.log(counter.count); // undefined（无法直接访问）

优点：真正的私有状态 + 行为抽象
适用场景：计数器、状态机、缓存管理

4. 使用 ES6 实现结构化抽象

类提供了更正式的抽象结构，结合私有字段可实现强抽象。

class BankAccount {
    #balance; // 私有字段（ES2022+）
    
    constructor(initialBalance) {
        this.#balance = initialBalance;
    }
    
    // 抽象存款操作：隐藏余额更新逻辑
    deposit(amount) {
        if (amount <= 0) {
            console.log("Invalid deposit amount");
            return;
        }
        this.#balance += amount;
        console.log(`Deposited: $${amount}`);
    }
    
    // 抽象查询操作：控制数据暴露方式
    getBalance() {
        return this.#balance;
    }
}

const account = new BankAccount(1000);
account.deposit(500);           // Deposited: $500
console.log(account.getBalance()); // 1500

优点：结构清晰、支持继承、现代标准
适用场景：业务实体、领域模型、大型应用架构

应用场景

场景	抽象体现	用户视角
API 开发	隐藏 HTTP 请求、错误重试、认证逻辑	`api.getUser(id)`
数据库 ORM	隐藏 SQL 拼接、连接池管理	`User.find({ name: 'John' })`
Web 中间件	隐藏日志记录、权限校验流程	`app.use(authMiddleware)`
加密工具库	隐藏哈希算法、盐值生成	`hashPassword('123456')`
UI 组件库	隐藏 DOM 操作、事件绑定	`<Button onClick={...}>Click</Button>`

重点总结

抽象的本质是复杂性管理，而非代码隐藏
JavaScript 通过函数、对象、闭包、类等多种方式支持抽象
私有字段（#）是现代 JS 实现强抽象的最佳选择
抽象应服务于可读性、可维护性和安全性，而非炫技
良好的抽象让代码“易于使用，难于误用”

思考题

在 BankAccount 类示例中，如果我们将 getBalance() 方法移除，只保留 deposit() 和 withdraw()，这是否违反了抽象原则？为什么？
函数式编程中的高阶函数（如 map、filter）如何体现抽象思想？

源本科技 | 码上会

学习目标

什么是抽象

抽象的核心价值

实现抽象的方式

1. 使用函数实现行为抽象

2. 使用对象和方法组织抽象

3. 使用闭包实现状态抽象

4. 使用 ES6 实现结构化抽象

应用场景

重点总结

思考题