正文
JS设计模式（12）装饰者模式
小程序：扫一扫查出行【扫一扫了解最新限行尾号】
复制小程序
什么是装饰者模式？
定义：动态地给一个对象添加一些额外的职责。就增加功能来说，装饰器模式相比生成子类更为灵活。
主要解决：一般的，我们为了扩展一个类经常使用继承方式实现，由于继承为类引入静态特征，并且随着扩展功能的增多，子类会很膨胀。
何时使用：在不想增加很多子类的情况下扩展类。
如何解决：将具体功能职责划分，同时继承装饰者模式。
应用实例： 1、孙悟空有 72 变，当他变成"庙宇"后，他的根本还是一只猴子，但是他又有了庙宇的功能。 2、不论一幅画有没有画框都可以挂在墙上，但是通常都是有画框的，并且实际上是画框被挂在墙上。在挂在墙上之前，画可以被蒙上玻璃，装到框子里；这时画、玻璃和画框形成了一个物体。
优点：装饰类和被装饰类可以独立发展，不会相互耦合，装饰模式是继承的一个替代模式，装饰模式可以动态扩展一个实现类的功能。
缺点：多层装饰比较复杂。
使用场景： 1、扩展一个类的功能。 2、动态增加功能，动态撤销。
注意事项：可代替继承。
JavaScript中的装饰者模式
生活中的例子：天气冷了，就添加衣服来保暖；天气热了，就将外套脱下；这个例子很形象地含盖了装饰器的神韵，随着天气的冷暖变化，衣服可以动态的穿上脱下。
let wear = function() {
console.log('穿上第一件衣服')
}const _wear1 = wearwear = function() {
_wear1()
console.log('穿上第二件衣服')
}const _wear2 = wearwear = function() {
_wear2()
console.log('穿上第三件衣服')
}wear()// 穿上第一件衣服
// 穿上第二件衣服
// 穿上第三件衣服
这种方式有以下缺点：1：临时变量会变得越来越多；2：this 指向有时会出错
AOP 装饰函数
// 前置代码
Function.prototype.before = function(fn) {
const self = this
return function() {
fn.apply(this, arguments)
return self.apply(this, arguments)
}
}// 后置代码
Function.prototype.after = function(fn) {
const self = this
return function() {
self.apply(this, arguments)
return fn.apply(this, arguments)
}
}
用后置代码来实验下上面穿衣服的 demo，
const wear1 = function() {
console.log('穿上第一件衣服')
}const wear2 = function() {
console.log('穿上第二件衣服')
}const wear3 = function() {
console.log('穿上第三件衣服')
}const wear = wear1.after(wear2).after(wear3)
wear()// 穿上第一件衣服
// 穿上第二件衣服
// 穿上第三件衣服
但这样子有时会污染原生函数，可以做点通变
const after = function(fn, afterFn) {
return function() {
fn.apply(this, arguments)
afterFn.apply(this, arguments)
}
}const wear = after(after(wear1, wear2), wear3)
wear()
