装饰器模式

146 阅读1分钟

使用场景

  1. 当你需要给某一个东西增加功能时,或者修改已有的功能时,使用装饰器模式可以避免破坏原有的代码结构。

类比生活

  • 生活中我们可能会想给手机装一个手机壳来防摔和美观,这时候手机壳就是起到一个"装饰"的作用,手机壳 的增加并不会影响我们使用手机原有的功能,这在程序中的表现就是装饰器模式

实现思想

  • js中可以很简单的实现装饰器模式,因为js中的对象可以动态的添加属性或方法,也就是增加新的功能

具体代码

这里我们来描述一个业务场景:当我们在买一台笔记本的时候,可能会要求加一个内存条,加个固态等,这时候笔记本的价格就需要重新计算,也就是需要修改笔记本电脑的价格计算方式,接下来我们使用装饰器模式来完成这个过程。

// 原始笔记本类
function Computer() {
    Computer.prototype.cost = function () {
        return 3000; // 原始价格
    }
}
// 实例化一个笔记本
var computer = new Computer();
console.log(computer.cost()); // 此时输出的是原始的价格:3000
// 此时用户加了一个4g的内存条,价格需要增加580,这时就需要修改 computer 这个实例的价格计算方法即 cost 方法
function add4GRAM(computer) {
    var primaryDiscount = computer.cost();
    computer.cost = function () {
        return 580 + primaryDiscount;
    }
}
add4GRAM(computer);
console.log(computer.cost()); // 此时输出的是原始的价格加上一个4g内存条的价格:3000 + 580