沉淀js-设计模式-01

最新推荐文章于 2025-08-22 08:37:14 发布

转载最新推荐文章于 2025-08-22 08:37:14 发布 · 82 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5cbc5345e51d456e500f7d21

文章标签：

#设计模式

本文深入探讨了工厂模式的设计原理及其实现方式，包括通过定义工厂方法统一创建对象，使用addMethods方法添加自定义属性，以及如何通过链式调用完成对象的创建。此外，还介绍了抽象工厂模式，通过继承抽象类的方法来实现不同类型的对象创建，如汽车、公交和卡车等，并展示了如何在具体类中重写抽象方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

工厂模式

工厂模式通过定义工厂方法统一创建对象
通过addMethods 添加自定义属性方法
return 自身完成链式调用

创建自己的工厂类

通过工厂模式返回一个新的Object

function createFactory (name, age, address) {
    const o = new Object();
    o.name = name;
    o.age = age;
    o.address = address;
    o.addMethods = function (key, callback) {
        this[key] = callback;
        return this;
    }
    return o;
}
const p1 = createFactory('lee', 27, 'HangZhou');
p1.addMethods('like', function (s) {
    console.log(s);
    return this;
})
复制代码

抽象的工厂模式

通过工厂类Factory继承抽象类的方法完成
在Factory上绑定属性Car，bug，Truck，以及原型
在工厂函数中传入需要创建的对象，以及该对象需要继承的抽象类

// 抽象工厂方法
const Factory = function (subType, superType) {
    // 判断抽象工厂中是否有该抽象对象
    if (typeof Factory[superType] === 'function') {
        // 缓存类
        function F () {};
        // 继承父类属性和方法
        F.prototype = new Factory[superType]();
        // 子类继承父类
        subType.prototype = new F();
        // 将子类的 constructor 指向子类
        subType.prototype.constructor = subType;
    }
}
// 汽车抽象类
Factory.Car = function () {
    this.type = 'car';
}
Factory.Car.prototype = {
    getPrice: function () {
        return void 0;
    },
    getSpeed: function () {
        return void 0;
    }
}
Factory.Bus = function () {
    this.type = 'bus';
}
Factory.Bus.prototype = {
    getPrice: function () {
        return void 0;
    },
    getSpace: function () {
        return void 0;
    }
}
Factory.Truck = function () {
    this.type = 'Truck';
}
Factory.Truck.prototype = {
    getPrice: function () {
        return void 0;
    },
    getLoad: function () {
        return void 0;
    }
}
// 新建Bmw类
const Bmw = function (price, speed) {
    this.price = price;
    this.speed = speed;
}
// 工厂继承抽象类
Factory(Bmw, 'Car');
// 重写原型方法
Bmw.prototype = {
    getPrice: function () {
        return this.price;
    },
    getSpeed: function () {
        return this.speed;
    }
}
const b = new Bmw(30000, 300);
b.getPrice(); // 30000
b.getSpeed(); // 300
复制代码