持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第13天，点击查看活动详情
今天我们来讲一下装饰器设计模式，装饰器设计模式指的是希望在不改变原对象的基础上，通过对该对象功能或属性的拓展来实现更复杂的逻辑处理。
装饰器设计案例
商场里面有卖衣服和装饰品的，如果用户在购买好自己心仪的衣服后，在此衣服基础上在购买一些装饰品打扮自己，比如项链18万元，耳坠9万元，手表35万元等等；
我们现在用非装饰器设计模式和装饰器设计模式进行实现，进行对比该区别
非装饰器设计模式实现
我们先声明一个构造函数，然后在构造函数的原型上，添加装饰品的属性和价格方法，通过new关键字创建出来实例，实例调用装饰品添加的方法，对实例进行添加其属性和价格并进行计算
// 声明一个构造函数，该构造函数是用户去购买衣服后的操作
function Strike() {
this.price = true;
}
// 给构造函数上面添上方法
Strike.prototype = {
// 项链方法
addNecklace: function () {
// 添加上项链标记
this.hasNecklace = true;
// 项链价格
this.price += 18;
},
// 耳坠方法
addEarrings: function () {
// 添加上耳坠标记
this.hasEarrings = true;
// 耳坠价格
this.price += 9;
},
// 手表方法
addSurface: function () {
// 添加上手表标记
this.hasSurface = true;
//手表价格
this.price += 35;
}
}
// 我们现在来创建实例，也就是相当于我们购买衣服后的操作
const car=new Strike();
console.log('当前购买装饰品价位为',car.price);
// 购买项链
car.addNecklace();
// 购买手表
car.addSurface();
// 购买耳坠
car.addEarrings();
console.log('购买完装饰品的价格为',car.price);
装饰器设计模式实现
抽离挂载到构造函数原型上的方法，装饰品方法抽离后，他需要接收一个参数，该参数是使用new关键字对其构造函数使用创建出来的实例，装饰品方法接收后，对其实例进行添加属性和装饰品价格并计算
// 声明一个构造函数，该构造函数是用户去购买衣服后的操作
function Strike() {
this.price = true;
}
// 项链方法
function addNecklace(info) {
// 添加上项链标记
info.hasNecklace = true;
// 项链价格
info.price += 18;
}
// 手表方法
function addSurface(info) {
// 添加上手表标记
info.hasSurface = true;
//手表价格
info.price += 35;
}
// 耳坠方法
function addEarrings(info) {
// 添加上耳坠标记
info.hasEarrings = true;
// 耳坠价格
info.price += 9;
}
// 我们现在来创建实例，也就是相当于我们购买衣服后的操作
const car=new Strike();
// 购买项链
addNecklace(car);
// 购买手表
addSurface(car);
// 购买耳坠
addEarrings(car);
console.log('购买完装饰品的价格为',car.price);
装饰器设计模式和非装饰器设计模式的区别
- 非装饰器设计模式是把封装好的属性都写在了原型上面，而装饰器设计模式是把属性都封装成了一个方法，我们通过new关键字创建过后的实例传递给方法，让方法对实例进行一些方法和属性的增加
- 装饰器设计模式没有破坏或者修改构造函数，即使以后有新的配置和功能出现需要我们去实现，我们可以去创建一个功能函数进行完成，这样子减少了对构造函数的修改和介入，非装饰器设计模式我们有了新的的配置和功能，都要对去构造函数进行修改，长久以往，代码维护性会变差，构造函数原型也会变得臃肿
在一些情况下不希望去修改其构造函数，但是希望去拓展其功能或者属性进行实现更加逻辑的时候，就可以采用装饰器设计模式
坚持努力，无惧未来！
