es7之修饰器什么是修饰器可以用在哪不能用在哪第三方库用vuepress 搭个博客试试水

128 阅读 0 评论 85 点赞

我是靠谱客的博主舒服帽子，这篇文章主要介绍es7之修饰器什么是修饰器可以用在哪不能用在哪第三方库用vuepress 搭个博客试试水，现在分享给大家，希望可以做个参考。

什么是修饰器

修饰器其实就是一个普通的函数，用来修饰类以及类的方法。
比如:

复制代码

1
2
3
4
5
6
7
@test
class DecoratorTest {

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

target 参数就是它修饰的类
这就表示给DecoratorTest这个类加上了一个静态属性 testable,等价于:

复制代码

1
2
3
class DecoratorTest {
    public static testable = true;
}

如果你觉得一个参数不够用, 可以在外面再套一层函数用来传递参数
就像这样：

复制代码

1
2
3
4
5
6
7
8
9
@testParam(true)
class DecoratorTest {

}
function testParam(boolean bool) {
    return function test(target) {
               target.testable = bool;
           }
}

这样就更灵活些了。
刚才我们是用修饰器给类加了一个静态属性，同理加实例属性只需要在类的原型上给它加个属性就行了

复制代码

1
2
3
4
5
6
7
8
9
@testParam(true)
class DecoratorTest {

}
function testParam(boolean bool) {
    return function test(target) {
               target.prototype.testable = bool;
           }
}

::: warning
修饰器对类行为的改变发生在代码编译阶段，而不是运行阶段
:::

可以用在哪

修饰器不仅可以修饰类，还可以修饰类中的属性和方法
修饰什么就放在什么前面，

修饰类中属性和方法时，修饰器函数接受三个参数

复制代码

1
2
3
4
function readonly(target, name, descriptor) {
    descriptor.writable = false;
    return descriptor;
}

target 是目标对象， name是修饰的属性名， descriptor是该属性的描述对象
descriptor 一般长这样

复制代码

1
2
3
4
5
6
{
    value : specifiedFunction,
    enumerable: false,
    configurable: true,
    writable: true
}

它定义了该属性是否可枚举，是否可读，是否可配置
上面的readonly修饰器修饰的属性不可写
类似于

复制代码

1
2
3
4
5
6
Object.defineProperty(target, name, {
                                        value : specifiedFunction,
                                        enumerable: false,
                                        configurable: true,
                                        writable: false
                                    })