JavaScript设计模式之原型模式和适配器模式示例详解

目录

• 原型模式
• 原型模式介绍
• 代码实现
• 适配器模式
• 适配器模式介绍
• 代码实现
• 小结

原型模式

原型模式介绍

原型模式是指原型实例指向创建对象的种类，并通过拷贝这些原型创建新的对象，是一种用来创建对象的模式，也就是创建一个对象作为另一个对象的prototype属性

实现原型模式是在ECMAScript5中，提出的Object.create方法，使用现有的对象来提供新创建的对象的__proto__。

代码实现

var lynkCoPrototype = {
    model: "领克",
    getModel: function () {
        console.log('车辆模具是：' + this.model);
    }
};
var volvo = Object.create(lynkCoPrototype, {
    model: {
        value: "沃尔沃"
    }
});
volvo.getModel();

适配器模式

适配器模式介绍

适配器模式（Adapter）是将一个类（对象）的接口（方法或属性）转化成客户希望的另外一个接口（方法或属性），适配器模式使得原本由于接口不兼容而不能一起工作的那些类（对象）可以一些工作。别称包装器（wrapper）。

代码实现

class GooleMap {
    show() {
        console.log('渲染谷歌地图')
    }
}
class BaiduMap {
    show() {
        console.log('渲染百度地图')
    }
}
function render(map) {
    if (map.show instanceof Function) {
        map.show()
    }
}
render(new GooleMap())  // 渲染谷歌地图
render(new BaiduMap())  // 渲染百度地图

但是假如BaiduMap类的原型方法不叫show，而是叫display，这时候就可以使用适配器模式了，因为我们不能轻易的改变第三方的内容。在BaiduMap的基础上封装一层，对外暴露show方法。

class GooleMap {
    show() {
        console.log('渲染谷歌地图')
    }
}
class BaiduMap {
    display() {
        console.log('渲染百度地图')
    }
}
// 定义适配器类, 对BaiduMap类进行封装
class BaiduMapAdapter {
    show() {
        var baiduMap = new BaiduMap()
        return baiduMap.display() 
    }
}
function render(map) {
    if (map.show instanceof Function) {
        map.show()
    }
}
render(new GooleMap())         // 渲染谷歌地图
render(new BaiduMapAdapter())  // 渲染百度地图

小结

• 适配器模式主要解决两个接口之间不匹配的问题，不会改变原有的接口，而是由一个对象对另一个对象的包装。
• 适配器模式符合开放封闭原则

以上就是JavaScript设计模式之原型模式和适配器模式示例详解的详细内容，更多关于JavaScript 原型适配器模式的资料请关注其它相关文章！

原文地址：https://juejin.cn/post/7135825908090273800