JavaScript：设计模式之组合模式

最新推荐文章于 2025-12-23 20:36:02 发布

原创最新推荐文章于 2025-12-23 20:36:02 发布 · 170 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #node.js #vue.js

本文通过JavaScript实现组合模式，演示了如何将不同对象类型的同名方法统一管理。通过创建Person、Student和Teacher类，并定义共同的eat方法，使用Compose类进行组合，实现了一次调用即可执行所有对象的eat方法。

JavaScript：设计模式之组合模式

组合模式：

几个构造函数有同名的的方法，将它们放到一个构造函数中一起启动

class Person{
    constructor(name){
        this.name = name;
    }
    eat(){
        console.log("饭");
    }
}

class Student{
    constructor(name){
        this.name= name;
    }
    eat(){
        console.log("肉")
    }

}

class Teacher{
    constructor(name){
        this.name = name;
    }
    eat(){
        console.log("鱼");
    }

}

//将他们组合起来，统一调用eat方法

class Compose{
    constructor(){
        this.arr = [];
    }
    add(obj){
        this.arr.push(obj);
    }
    use(){
        for(let item of this.arr){
            item.eat();
        }
    }
}


let p = new Person("人");
let s = new Student("学生");
let t = new Teacher("老师");

let c = new Compose();
c.add(p);
c.add(s);
c.add(t);

c.use();  // 执行Person、Student、Teacher中的 eat() 方法