ES6--修饰器

本篇文章转载自我的个人博客

修饰器是一个函数，用来修改类的行为

@testable
class MyTestable{
    constructor() {
        super();
    }
}
function  testable(target) {
    target.isTestable = true;
}
MyTestable.isTestable; //true

修饰器基本行为

@decorator
class A {}

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

注意：修饰器对类的行为修改是在代码编译时发生的，本质就是修饰器是在编译阶段执行的函数

下面请看下例：

function decorator(isTestable){
    return function(target){
	    target.prototype.isTestable = isTestable;
    }
}

@decorator(true)
class A {}

上面样例修饰器可接受除target参数外（target必须）多个参数，同时target.prototype使得我们可以通过修饰器想实例中添加属性

实际开发应用

修饰器与React、Redux的结合

class MyComponent extends React.Component {}
//原生
export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);
//修饰器
@connect(mapStateToProps, mapDispatchToProps)
export default class MyComponent extends React.Component {}

方法的修饰

修饰器还可以修饰类的属性，修饰器函数接受三个参数，第一个参数是要修改的对象，第二个参数是要修饰的属性名，第三个参数是对该属性的描述对象

class MyTestable{
    constructor() {
    	this.n = 'hhh';
    }
    @readonly
    name(){
    	return this.n;
    }
}
function readonly(target, name, descriptor) {
    descriptor.enumerable = false;
    return descriptor;
}

注意：同一个方法有多个修饰器，那么该方法会先从外到内进入修饰器，然后由内到外执行

          因为存在函数声明提升，因此修饰器不能应用于函数

推荐修饰器模块

1、core-decorator

    @autobind 使方法中的this绑定与原始对象

    @readonly 使方法或属性不可写

    @override 检查子类方法是否正确覆盖父类的同名函数，如果不正确就报错

    @deprecate 在控制台打印一条警告，表示该方法将废除

    @suppressWarnings 一直deprecate修饰器导致的警告函数调用，异步调用除外

2、发布订阅库Postal.js

3、Mixin混入模式（将一个对象混入另一个对象）

//简单Mixin修饰器
export function Mixin(...list) {
	return function (target) {
		Object.assign(target.prototype, ...list);
	}
}

4、traits-decorator与Mixin功能类似，但提供更对功能

        参数不仅接受对象，还接受ES6类

        防止同名方法冲突

        排除混入某些方法

        为混入方法器别名