装饰器模式

什么是装饰器模式

ES6/ES7中的装饰器模式简而言之就是对现有类进行一个包装，不通过子类或者改变其内部结构的方式为其扩展功能。

通俗的说，就是将现有的类变得更加“华丽”，比如礼物可以直接送，但是加上礼品盒更美观，手机可以直接用，但是加上钢化膜更耐摔。以“吃鸡”游戏为例，98k本身就具有狙击功能。安装狙消音可以枪具有消音功能，8倍镜可以扩大视野范围，枪托可以增加强的稳定性，这些都没有改变原有的98k可以狙击的功能，只是让它的属性变得更强。

装饰器的行为可以理解为如下：

@decorator

class A{ }

//  等同于

class A = { }

A = decorator(A) || A;

装饰器的本质就是一个函数，它具有三个参数target、key、descriptor。target是装饰的对象，key是装饰对象的具体属性，也就是修饰器紧跟其后的属性名字。descriptor是该属性的描述对象，自带configurable、value、enumerable、writable、__proto__属性。

装饰类

function decorator(target) {

    target.age = 20; // 为类添加静态属性

    target.prototype.grade = 3; // 为类添加实例属性

}

@decorator

class Student{ }

const student = new Student();

console.log(student.age);  //20

console.log(student.grade)  //3

上述方法中，本身Student类没有任何属性，因为注入装饰器之后，Student拥有了静态属性age和实例属性grade。装饰器除了可以装饰类，还可以装饰类的方法。

装饰类的方法

class Math {

    @log

    add(a, b) { return a + b; }

}

function log(target, name, descriptor) {

    var oldValue = descriptor.value;

    descriptor.value = function() {

        console.log(`Calling ${name} with`, arguments);

        return oldValue.apply(this, arguments);

    };

    return descriptor;

}

const math = new Math();

add(2, 4);

//calling add with [2，4]

@log是一个打印装饰器，装饰了Math类的add函数，通过修改属性描述对象的值descriptor.value实现打印功能。装饰后，每次调用add函数都会打印调用时的相关日志。

注意：如果同一个方法有多个修饰器，会像剥洋葱一样，先从外到内进入，然后由内向外执行。

装饰器在react中的应用

@connnet装饰器

react-redux的常规使用，一般需要先定义UI组件后，再使用connect函数将UI组件变为容器组件导出

class UIComponent extends React.Component {  }

const ContainerComponent = connect( mapStateToProps , mapDispatchToProps )( UIComponent );

export default ContainerComponent;

使用装饰器后，无需再定义容器组件

@connect( mapStateToProps  , mapDispatchToProps )

class UIComponent extends React.Component {  }

export default UIComponent;

定制高阶组件

有时业务中需要定义自己的高阶组件，实现代码的复用。比如在业务开发中，每个页面的预加载功能可以作为一个装饰器。