JS设计模式4：装饰者模式

扩展函数

一个函数的创建于调用

function func1() {
  console.log('功能1');
  console.log('扩展的功能2');
}

func1();

• 如果想要修改增加这个函数的功能，可以在函数体内添加，但是这样修改了原有的函数
• 所以可以使用装饰着模式，增加功能的同时，保留原有函数不变。

function func1() {
  console.log('功能1')
}

function func2() {
  console.log('扩展的功能2')
}

Function.prototype.DecoratorFn = function(fn) {
  this();	// 原本的功能
  fn();	// 扩展的功能
}

// func1();
func1.DecoratorFn(func2);

下面调用func1时，只会执行func1里面的功能
如果通过调动原型中添加的装饰器函数，会执行原有函数功能以及扩展的功能

对象扩展

一个英雄类，目前有释放技能的函数

class Hero{
    constructor(name) {
        this.name = name;
    }

    skill() {
        console.log('释放技能')
    }
}

let h1 = new Hero('盖伦');
h1.skill();

现在想扩展这个技能函数，比如说扩展出伤害值
如何在不修改原class的情况下扩展？

class Hero{
    constructor(name) {
        this.name = name;
    }

    skill() {
        console.log('释放技能')
    }
}

// 将要扩展的内容
function hurt() {
    console.log('造成100点伤害');
}
// 装饰器方法
let skillDec = function(hero) {
    this.hero = hero;	// 保存实例，原本的类实例
}
skillDec.prototype.skill = function(fn) {
    this.hero.skill();	// 调用原功能
    fn();
}

let hero = new Hero('盖伦');
let newHero = new skillDec(hero);
// hero.skill();
newHero.skill(hurt);

装饰者模式与继承的区别

1. 装饰者是横向扩展，而继承是纵向扩展
2. 装饰者不增加新的函数，只是给某个函数添加新的功能
3. 继承不扩展原有函数，而是扩展更多函数