JS-装饰器模式

介绍

在不改变类或对象自身的基础上，在程序的运行期间动态的添加职责。与继承相比，装饰者是一种更轻便灵活的做法。

这里不要和之前讲的代理模式搞混，代理模式主要是对直接访问本体不方便或者不符合需要的时候提供一个代替者；装饰者模式

主要是为对象动态添加一些行为

优点

可以动态的给某个对象添加额外的职责，而不会影响从这个类中派生的其它对象。

实现

老规矩举个栗子来解释一下：童年经典游戏魂斗罗，一出场默认的是普通子弹，后面根据吃的弹发射对应的子弹，比如散弹、激光弹等等，但是原有的普通子弹是一直有的

var bullet = {
	fire: function(){
		console.log('发射普通子弹');
	}
}
bullet.fire(); // '发射普通子弹'

//吃了散弹buff
var fire1 = bullet.fire;
var shotBullet = function() {
	console.log('发射散弹');
};
bullet.fire = function () {
	fire1();
	shotBullet();
};
bullet.fire(); // '发射普通子弹' '发射散弹'


//吃了散弹buff
var fire2 = bullet.fire;
var laserBullet = function() {
	console.log('发射激光弹');
};
bullet.fire = function () {
	fire2();
	laserBullet();
};
bullet.fire(); // '发射普通子弹' '发射激光弹'

ES7的decorator

在ES7中提供了一种类似于java注解的语法糖decorator来实现装饰器模式。decorator的实现依赖于ES5的Object.defineProperty方法来进行扩展和封装的。装饰器是一种函数，写法是 @+函数名

@testable
class MyTestableClass {
  // ...
}

function testable(target) {
  target.isTestable = true;
}

MyTestableClass.isTestable // true


@decorator
class A {}

// 等同于
class A {}
A = decorator(A) || A;

上面代码中，@testable就是一个装饰器。它修改了MyTestableClass这个类的行为，为它加上了静态属性isTestable。testable函数的参数target是MyTestableClass类本身。

function mixins(...list) {
   return function(target) {
      Object.assign(target.prototype, ...list)
   }
}

const Foo = {
    foo() {
        console.log('foo');
    }
}

@mixins(Foo)
class MyClass { }

let obj = new MyClass();
obj.foo(); //foo

上例中，Foo作为list的实参，MyClass作为 target的实参，最终实现将Foo的所有原型方法（foo）装饰到 MyClass类上，成为了MyClass的方法。最终代码的运行结果是执行foo()

除了可以装饰类，也可以装饰类的属性

function readonly(target , name , descriptor) {
  descriptor.writable = false;
}

class Person {
    constructor() {
        this.first = '周';
        this.last = '杰伦';
    }

    @readonly
    name() {
        return `${this.first}${this.last}`
    }
}

const p = new Person();
console.log(p.name());  // ‘周杰伦’

// 试图修改name：
p.name = function() {
    return true;
}
// Uncaught TypeError：Cannot assign to read only property 'name' of object '#<Person>'

在上栗中，由于decorator的实现依赖于Object.defineProperty，所以参数和用法也一致，接收三个参数target、name和descriptor