装饰器概述

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 {
}

最后

本期结束咱们下次再见👋~

🌊 关注我不迷路，如果本篇文章对你有所帮助，或者你有什么疑问，欢迎在评论区留言，我一般看到都会回复的。大家点赞支持一下哟~ 💗