装饰器模式的概念
1、讲装饰器模式之前，先聊聊高阶函数。高阶函数就是一个函数就可以接收另一个函数作为参数。
2、给对象动态地添加职责的方式称为装饰者模式。
3、传统的面向对象语言中给对象添加功能常常使用继承的方式，但是继承的方式不灵活，而与之相比，装饰者模式更加灵活，“即用即付”。
装饰器模式的实现
1、高阶函数就是一个函数就可以接收另一个函数作为参数
const add = (x, y, f) => {
return f(x) + f(y);
}
const num = add(2, -2, Math.abs);
console.log(num); // 4
2、函数 add 就是一个简单的高阶函数，而 add 相对于 Math.abs 来说相当于一个装饰器，因此这个例子也可以理解为一个简单的装饰器模式。
在 react 中，高阶组件(HOC)也是装饰器模式的一种体现，通常用来不改变原来组件的情况下添加一些属性，达到组件复用的功能。
import React from 'react';
const BgHOC = WrappedComponent => class extends React.Component {
render () {
return (
<div style={{ background: 'blue' }}>
<WrappedComponent />
</div>
);
}
}
装饰器模式的总结其一
小结
装饰器模式将现有 对象 和 装饰器 进行分离，两者独立存在，符合开放封闭原则和单一职责模式。
使用场景
es7 装饰器、vue mixins、core-decorators 等。
装饰器模式的总结其二
场景例子
1、比如现在有4 种型号的自行车，我们为每种自行车都定义了一个单独的类。现在要给每种自行车都装上前灯、尾灯和铃铛这 3 种配件。如果使用继承的方式来给每种自行车创建子类，则需要 4×3 = 12 个子类。但是如果把前灯、尾灯、铃铛这些对象动态组合到自行车上面，则只需要额外增加3 个类
2、ES7 Decorator 阮一峰
3、core-decorators
优点
1、装饰类 和 被装饰类 都只关心自身的核心业务，实现了解耦。
2、方便动态的扩展功能，且提供了比 继承 更多的灵活性。
缺点
1、多层装饰比较复杂。
2、常常会引入许多小对象，看起来比较相似，实际功能大相径庭，从而使得我们的应用程序架构变得复杂起来