JavaScript面向对象最佳实践

JavaScript面向对象最佳实践

介绍

JavaScript面向对象编程（OOP）是一种通过对象和类组织代码的编程范式。它强调封装、继承和多态性，使代码更模块化、可维护和可复用。尽管JavaScript基于原型（而非传统的类），但ES6引入了`class`语法糖，使其更接近其他语言的OOP风格。本章将介绍JavaScript中OOP的核心原则和最佳实践，适用于初学者和需要巩固知识的开发者。

核心原则

1. 封装

封装是将数据（属性）和操作数据的方法（函数）绑定到一个单元（对象或类）中的过程。通过隐藏内部细节，仅暴露必要的接口，提高代码安全性。

class User {
    constructor(name, email) {
        this._name = name; // 约定：下划线表示“私有”（实际仍可访问）
        this._email = email;
    }

    // 公有方法
    getInfo() {
        return `${this._name} (${this._email})`;
    }
}

const user = new User("Alice", "alice@example.com");
console.log(user.getInfo()); // 输出: "Alice (alice@example.com)"

2. 继承

继承允许子类复用父类的属性和方法。JavaScript通过原型链实现继承，ES6的`extends`简化了语法。

class Admin extends User {
    constructor(name, email, permissions) {
        super(name, email);
        this._permissions = permissions;
    }

    // 扩展方法
    grantAccess() {
        return `${this._name} has admin rights.`;
    }
}

const admin = new Admin("Bob", "bob@example.com", ["delete_users"]);
console.log(admin.grantAccess()); // 输出: "Bob has admin rights."

3. 多态

多态指同一方法在不同子类中有不同实现。通过方法重写（Override）实现。

class Animal {
    speak() {
        return "Animal sound";
    }
}

class Dog extends Animal {
    speak() {
        return "Woof!";
    }
}

const dog = new Dog();
console.log(dog.speak()); // 输出: "Woof!"

最佳实践

1. 使用`class`而非构造函数

ES6的`class`语法更清晰，且与大多数OOP语言一致。

// 避免旧式构造函数
function OldUser(name) {
    this.name = name;
}
OldUser.prototype.getName = function() { return this.name; };

// 优先使用class
class NewUser {
    constructor(name) { this.name = name; }
    getName() { return this.name; }
}

2. 私有字段（ES2022+）

使用`#`前缀定义真正私有的字段，防止外部访问。

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

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

    getBalance() {
        return this.#balance;
    }
}

const wallet = new Wallet();
wallet.deposit(100);
console.log(wallet.getBalance()); // 输出: 100
// console.log(wallet.#balance); // 报错: Private field must be declared in class

3. 组合优于继承

过度继承会导致复杂的层级关系。优先使用组合（将功能拆分为小对象，再组合使用）。

// 组合示例
const canSwim = {
    swim() { return "Swimming!"; }
};

const canFly = {
    fly() { return "Flying!"; }
};

class Duck {
    constructor() {
        Object.assign(this, canSwim, canFly);
    }
}

const duck = new Duck();
console.log(duck.swim()); // 输出: "Swimming!"

4. 避免`new`关键字的滥用

工厂函数或模块模式可替代`new`，提供更灵活的对象创建方式。

// 工厂函数
function createUser(name) {
    return {
        name,
        greet() { return `Hello, ${this.name}!`; }
    };
}

const user = createUser("Charlie");
console.log(user.greet()); // 输出: "Hello, Charlie!"

实际案例

电商系统的购物车

使用OOP建模购物车，包含商品列表、总价计算和方法封装。

class Cart {
    #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 Cart();
cart.addItem({ name: "Book", price: 20 }, 2);
cart.addItem({ name: "Pen", price: 5 }, 3);
console.log(cart.calculateTotal()); // 输出: 55

类关系图

classDiagram class User { -_name -_email +getInfo() } class Admin { -_permissions +grantAccess() } User <|-- Admin

总结

JavaScript的OOP最佳实践包括：

• 使用`class`和`extends`简化继承
• 通过封装和私有字段保护数据
• 优先组合而非深度继承
• 灵活选择对象创建模式（工厂函数、类等）

掌握这些实践能显著提升代码的可维护性和扩展性。