今天我们来讲一下装饰器设计模式，装饰器设计模式指的是希望在不改变原对象的基础上，通过对该对象功能或属性的拓展来实现更复杂的逻辑处理。
装饰器设计案例
商场里面有卖衣服和装饰品的，如果用户在购买好自己心仪的衣服后，在此衣服基础上在购买一些装饰品打扮自己，比如项链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关键字创建过后的实例传递给方法，让方法对实例进行一些方法和属性的增加
- 装饰器设计模式没有破坏或者修改构造函数，即使以后有新的配置和功能出现需要我们去实现，我们可以去创建一个功能函数进行完成，这样子减少了对构造函数的修改和介入，非装饰器设计模式我们有了新的的配置和功能，都要对去构造函数进行修改，长久以往，代码维护性会变差，构造函数原型也会变得臃肿
在一些情况下不希望去修改其构造函数，但是希望去拓展其功能或者属性进行实现更加逻辑的时候，就可以采用装饰器设计模式
坚持努力，无惧未来！
