JavaScript之装饰者模式

装饰者模式

装饰者模式用于为对象动态增加职责。

和继承的比较

相较于装饰者模式而言，继承导致超类和子类之间的强耦合，超类修改，子类也会随之改变，同时在功能需求增加时，可能会创建出大量的子类。装饰者模式则更加灵活，即用即增。

example

对于需求的增加，我们经常做的处理是直接修改某个对象或某个函数，这很不好，违背了开放-封闭原则。以飞机大战中的飞机对象为例，不同级别的飞机发送不同的子弹，普通飞机发送普通的子弹，二级飞机发送导弹，三级飞机发送原子弹，使用装饰者模式处理：

面向对象方案

const Plane = function () {}
Plane.prototype.fire = function () {
    console.log('发送普通子弹')
}
// 二级飞机
const MissileDecorator = function (plane) {
    this.plane = plane
}
MissileDecorator.prototype.fire = function () {
    this.plane.fire()
    console.log('发送导弹')
}
// 三级飞机
const AtomDecorator = function (plane) {
    this.plane = plane
}
AtomDecorator.prototype.fire = function () {
    this.plane.fire()
    console.log('发送原子弹')
}
let plane = new Plane()
plane = new MissileDecorator( plane )
plane = new AtomDecorator( plane )
plane.fire() // 依次发送三种类型的子弹

装饰者模式的做法是保持原函数的引用，执行原函数，再拓展一部分功能。

JavaScript中的装饰模式

直接对函数作处理：

const fire = function () {
    console.log('发送普通子弹')
}
const _fire = fire
const missileFire = function () {
    _fire()
    console.log('发送导弹')
}
const _missileFire = missileFire
const atomFire = function () {
    _missileFire()
    console.log('发送原子弹')
}
atomFire() //

这样处理，难以管理很多中间变量，且this指向有时候会丢失。

AOP装饰函数

Function.prototype.before = function (beforeFn) {
    const _self = this
    return function () {
        beforeFn.apply( this, arguments )
        return _self.apply( this, arguments )
    }
}

Function.prototype.after = function (afterFn) {
    const _self = this
    return function () {
        const ret = _self.apply( this, arguments )
        afterFn.apply( this, arguments )
        return ret
    }
}

const Plane = function () {}
function fire() {
    console.log('发送普通子弹')
}
function missileFire() {
    console.log('发送导弹')
}
function atomFire() {
    console.log('发送原子弹')
}
const decoratorFire = fire.after(
    missileFire
).after(
    atomFire
)

decoratorFire() // 也会依次打印三个字符串

使用before,after函数可以保持this的传递，也避免了临时变量的创建。