编辑“︁JavaScript对象组合”︁

= JavaScript对象组合 =

'''对象组合'''（Object Composition）是JavaScript面向对象编程中的核心概念之一，指通过将多个简单对象组合成一个更复杂的对象，而不是通过继承来扩展功能。与类继承相比，对象组合提供了更高的灵活性，避免了继承层次过深的问题，是现代JavaScript开发中推荐的设计模式。

== 介绍 ==
在JavaScript中，对象组合是一种通过将多个对象的属性和方法合并或引用，来构建新对象的方式。它遵循“'''组合优于继承'''”（Composition Over Inheritance）的原则，使得代码更易于维护和扩展。

组合的主要优势包括：
* '''灵活性'''：可以动态地组合对象，无需预先定义类结构。
* '''低耦合'''：对象之间依赖更少，修改一个对象不会影响其他对象。
* '''可重用性'''：小型、单一职责的对象更容易复用。

== 基本组合方式 ==
=== 对象展开（Spread Operator） ===
使用ES6的展开运算符<code>...</code>可以浅合并多个对象的属性：

<syntaxhighlight lang="javascript">
const person = { name: "Alice" };
const job = { role: "Developer" };

// 组合对象
const employee = { ...person, ...job, id: 1001 };

console.log(employee);
// 输出: { name: "Alice", role: "Developer", id: 1001 }
</syntaxhighlight>

=== Object.assign() ===
另一种浅合并方式：

<syntaxhighlight lang="javascript">
const car = { wheels: 4 };
const electric = { power: "battery" };

const tesla = Object.assign({}, car, electric, { model: "Model 3" });
console.log(tesla);
// 输出: { wheels: 4, power: "battery", model: "Model 3" }
</syntaxhighlight>

== 深度组合 ==
对于嵌套对象的深度组合，可以使用递归或现成库如Lodash的<code>_.merge</code>：

<syntaxhighlight lang="javascript">
function deepMerge(target, source) {
    for (const key in source) {
        if (typeof source[key] === 'object' && !Array.isArray(source[key])) {
            target[key] = deepMerge(target[key] || {}, source[key]);
        } else {
            target[key] = source[key];
        }
    }
    return target;
}

const obj1 = { a: { b: 1 } };
const obj2 = { a: { c: 2 } };

console.log(deepMerge(obj1, obj2));
// 输出: { a: { b: 1, c: 2 } }
</syntaxhighlight>

== 功能组合（Functional Composition） ==
通过将多个函数组合成新功能：

<syntaxhighlight lang="javascript">
const double = x => x * 2;
const square = x => x * x;

// 组合函数
const doubleThenSquare = x => square(double(x));

console.log(doubleThenSquare(3)); // 输出: 36
</syntaxhighlight>

== 组合与继承对比 ==
<mermaid>
classDiagram
    class Animal {
        +eat()
    }
    class Bird {
        +fly()
    }
    class Penguin {
        +swim()
    }
    Animal <|-- Bird
    Bird <|-- Penguin

    note for Penguin "继承导致层次过深"
</mermaid>

对比组合方式：
<mermaid>
classDiagram
    class Animal {
        +eat()
    }
    class Flying {
        +fly()
    }
    class Swimming {
        +swim()
    }
    class Penguin {
        +animal: Animal
        +swimming: Swimming
    }
    Penguin --> Animal
    Penguin --> Swimming
</mermaid>

== 实际应用案例 ==
=== UI组件组合 ===
React等框架中常见组件组合：

<syntaxhighlight lang="javascript">
// 基础按钮组件
const Button = ({ onClick, children }) => (
    <button onClick={onClick}>{children}</button>
);

// 带图标的组合按钮
const IconButton = ({ icon, ...props }) => (
    <Button {...props}>
        <i className={`icon-${icon}`} />
        {props.children}
    </Button>
);
</syntaxhighlight>

=== 游戏实体系统 ===
游戏开发中组合不同行为：

<syntaxhighlight lang="javascript">
const canAttack = (state) => ({
    attack: (target) => `${state.name}攻击${target}造成${state.damage}点伤害`
});

const canMove = (state) => ({
    move: () => `${state.name}移动了${state.speed}米`
});

function createEnemy(name) {
    const state = { name, damage: 10, speed: 5 };
    return Object.assign(
        {},
        canAttack(state),
        canMove(state)
    );
}

const zombie = createEnemy("僵尸");
console.log(zombie.attack("玩家")); // "僵尸攻击玩家造成10点伤害"
console.log(zombie.move());         // "僵尸移动了5米"
</syntaxhighlight>

== 数学表达 ==
组合关系可以表示为：
<math>
C = \{ f \circ g \mid \forall x, (f \circ g)(x) = f(g(x)) \}
</math>
其中<math>\circ</math>表示组合操作符。

== 最佳实践 ==
1. '''优先使用组合'''：除非有明显的is-a关系，否则避免继承
2. '''保持对象小型化'''：每个对象应只关注单一职责
3. '''使用工厂函数'''：封装对象创建逻辑
4. '''避免过度嵌套'''：深度组合会增加复杂度

== 总结 ==
JavaScript对象组合提供了比传统继承更灵活的对象构建方式，通过将小型、专注的对象组合成复杂功能，可以创建更可维护和可扩展的代码结构。掌握组合技术是成为高级JavaScript开发者的关键步骤。

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