es7之修饰器

发布时间:2020-11-17 发布网站:前端之家 F2er.com
前端之家收集整理的这篇文章主要介绍了es7之修饰器前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

什么是修饰器

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

@test
class DecoratorTest {

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

target 参数就是它修饰的类

这就表示给DecoratorTest这个类加上了一个静态属性 testable,等价于:

class DecoratorTest {
    public static testable = true;
}

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

就像这样 :

@testParam(true)
class DecoratorTest {

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

这样就更灵活些了。

刚才我们是用修饰器给类加了一个静态属性, 同理加实例属性只需要在类的原型上给它加个属性就行了

@testParam(true)
class DecoratorTest {

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

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

可以用在哪

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

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

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

target 是目标对象, name是修饰的属性名, descriptor是该属性的描述对象

descriptor 一般长这样

{
    value : specifiedFunction,enumerable: false,configurable: true,writable: true
}

它定义了该属性是否可枚举, 是否可读,是否可配置

上面的readonly修饰器修饰的属性不可写

类似于

Object.defineProperty(target,{
                                        value : specifiedFunction,writable: false
                                    })

不能用在哪

修饰器在js中不能用来修饰函数, 因为js中函数在预编译阶段存在函数提升

第三方库

core-decorators.js
此模块封装了几个常用的修饰器

  • @autobind 使方法中的this 绑定原始对象
  • @readonly 使属性和方法不可写
  • @override 检查子类方法是否正确覆盖了父类的同名方法,如果不正确会报错
  • @deprecated 会在控制台显示一条警告,表示该方法将废除

用vuepress 搭个博客试试水

myblog

总结


以上是前端之家为你收集整理的es7之修饰器全部内容,希望文章能够帮你解决es7之修饰器所遇到的程序开发问题。

如果觉得前端之家网站内容还不错,欢迎将前端之家网站推荐给前端开发程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。