编辑“︁JavaScript面向对象最佳实践”︁（章节）

= JavaScript面向对象最佳实践 =

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

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

<syntaxhighlight lang="javascript">
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)"
</syntaxhighlight>

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

<syntaxhighlight lang="javascript">
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."
</syntaxhighlight>

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

<syntaxhighlight lang="javascript">
class Animal {
    speak() {
        return "Animal sound";
    }
}

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

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

== 最佳实践 ==  
=== 1. 使用`class`而非构造函数 ===  
ES6的`class`语法更清晰，且与大多数OOP语言一致。

<syntaxhighlight lang="javascript">
// 避免旧式构造函数
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; }
}
</syntaxhighlight>

=== 2. 私有字段（ES2022+） ===  
使用`#`前缀定义真正私有的字段，防止外部访问。

<syntaxhighlight lang="javascript">
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
</syntaxhighlight>

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

<syntaxhighlight lang="javascript">
// 组合示例
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!"
</syntaxhighlight>

=== 4. 避免`new`关键字的滥用 ===  
工厂函数或模块模式可替代`new`，提供更灵活的对象创建方式。

<syntaxhighlight lang="javascript">
// 工厂函数
function createUser(name) {
    return {
        name,
        greet() { return `Hello, ${this.name}!`; }
    };
}

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

== 实际案例 ==  
=== 电商系统的购物车 ===  
使用OOP建模购物车，包含商品列表、总价计算和方法封装。

<syntaxhighlight lang="javascript">
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
</syntaxhighlight>

=== 类关系图 ===  
<mermaid>
classDiagram
    class User {
        -_name
        -_email
        +getInfo()
    }
    class Admin {
        -_permissions
        +grantAccess()
    }
    User <|-- Admin
</mermaid>

== 总结 ==  
JavaScript的OOP最佳实践包括：  
* 使用`class`和`extends`简化继承  
* 通过封装和私有字段保护数据  
* 优先组合而非深度继承  
* 灵活选择对象创建模式（工厂函数、类等）  

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

[[Category:编程语言]]
[[Category:JavaScript]]
[[Category:Javascript面向对象编程]]