本文深入解析JavaScript中的原型模式与适配器模式。通过Object.create方法演示原型模式的对象创建机制，并结合地图类示例说明适配器模式如何解决接口不兼容问题。文章提供完整代码实现，帮助开发者理解如何在实际开发中应用这两种设计模式，提升代码的可维护性与扩展性。
原型模式
原型模式介绍
原型模式的核心思想是利用一个现有的原型实例来指定所创建对象的结构类型，并通过复制该原型来生成新的对象。这是一种专门用于创建对象的设计模式，其本质是创建一个对象作为另一个对象的prototype属性。
在ECMAScript 5标准中，可以通过Object.create方法来实现原型模式。该方法允许开发者使用现有的对象作为新创建对象的（原型），从而建立新的对象实例。
代码实现
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类的原型方法名为display而非show，此时便需要引入适配器模式。由于我们通常无法直接修改第三方库的代码，因此可以在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 原型适配器模式的资料请关注本站其它相关文章！