• ​​Decorator​​​ 是​​ES7​​​ 的一个新语法，目前仍处于​​提案中​​
• 装饰器是一种特殊类型的声明，它能够被附加到类，方法， 访问器，属性或参数上

 

被添加到不同地方的装饰器有不同的名称和特点：

• 附加到类上, 类装饰器
• 附加到方法上, 方法装饰器
• 附加到访问器上, 访问器装饰器
• 附加到属性上, 属性装饰器
• 附加到参数上, 参数装饰器

装饰器基本格式

普通装饰器

function test(target) {
    console.log('test');
}

@test
class Person {

}

如上代码的含义为给 Person 这个类绑定了一个 ​​普通的装饰器​​​，这个装饰器的代码会在定义类之前执行, 并且在执行的时候会把这个类传递给装饰器，除了如上的步骤还是不行的编译器还是会报错，还需要开启 ​​experimentalDecorators​​ 修改 tsconfig.json：

"experimentalDecorators": true,

装饰器工厂

 

• 如果一个函数返回一个回调函数, 如果这个函数作为装饰器来使用, 那么这个函数就是​​装饰器工厂​​

 

function test(target) {
    console.log('test');
}

function demo() {
    console.log('demo out');
    return (target) => {
        console.log('demo in');
    }
}

@demo()
class Person {

}

如上代码的含义为给 Person 这个类绑定了一个 ​​装饰器工厂​​​，在绑定的时候由于在函数后面写上了 ​​()​​, 所以会先执行装饰器工厂拿到真正的装饰器, 真正的装饰器会在定义类之前执行, 所以紧接着又执行了里面。

装饰器组合

 

• 普通的装饰器可以和装饰器工厂结合起来一起使用

 

结合起来一起使用的时候, 会先 ​​从上至下​​​ 的执行所有的装饰器工厂, 拿到所有真正的装饰器, 然后再 ​​从下至上​​ 的执行所有的装饰器：

function test(target) {
    console.log('test');
}

function demo() {
    console.log('demo out');
    return (target) => {
        console.log('demo in');
    }
}

function abc(target) {
    console.log('abc');
}

function def() {
    console.log('def out');
    return (target) => {
        console.log('def in');
    }
}

@test
@demo()
@def()
@abc
class Person {

}