decorator装饰器初探

该文章发布于 ,归类于 Javascript 0 条评论

es7中引入了一个强大的概念“装饰器”,这个在高级语言中应该是十分常见了吧,那么js也要紧跟潮流,为我们带来这个强大而好用的属性。

来说说这是干嘛的吧。所谓装饰器,顾名思义,肯定起到装饰作用。就好比房子装修,目的都是给人居住,但是装修的越好肯定居住的越舒服。那么,我给房子添加装修效果,转换到程序中,就是所谓的装饰器。通过装饰器,我们可以为函数附加更多的功能。

一个简单的例子。

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

class Test {
  @readonly
  name() { return 'leevare' }
}

通过上面这种方式,可以轻松地将name设置为只读地属性。那么,可以看到readonly函数中有三个不同的参数,它们分别代表什么意思呢?

首先target是表示要修饰的目标类,name表示要修饰的属性名,第三个参数descriptor表示该属性的描述对象。既然是这样,我们可以将其想象为Object.defineProperty,和这个参数看有点像。

Object.defineProperty(Test.prototype, 'name', {
  writable: false
})

上述达到是一样的效果。

那么,在使用装饰器的情况下,我们能很轻而易举的看到它修饰的属性有什么特点,比如在Vue中,它使用装饰器的写法如下,看看是不是更加清晰明了。

@Component
export default class HelloWorld extends Vue {
  @Prop({default: 'hello world'})
  private msg!: string;

  @Provide()
  times: number = 0

  addTimes(a: number): number {
    this.times = this.times + a
    return this.times
  }

  get computedMsg() {
    return 'computed ' + this.msg
  }

  mounted() {
    const times = this.addTimes(10)
  }

  @Watch('msg')
  onMsgChanged() {

  }
}

相关文章