ts 之装饰器

装饰器：装饰器是一种与类相关的语法，用来注释或者修改类和类方法的属性，装饰器一般和class类相关，普通函数不要使用

装饰器的本质是函数，它可以给类、属性或者方法增加一些其他的东西，扩展功能

修饰器对类的行为的改变，是代码编译时发生的（不是TypeScript编译，而是js在执行机中编译阶段），而不是在运行时。这意味着，修饰器能在编译阶段运行代码。也就是说，修饰器本质就是编译时执行的函数。
在Node.js环境中模块一加载时就会执行

（1）例子：

function decorator (target:any, key:any, descriptor:any) {
  console.log(target)
  console.log(key)
  console.log(descriptor)
}


class Test {
  private name:string;
  constructor(name:string) {
    this.name = name
  }
  @decorator
  getName () {
    return this.name
  }
}

执行该文件：ts-node index.ts

就会执行 decorator 这个函数

输出：

下面看下装饰器的这三个参数：

target : 作用于谁，对于静态成员来说是类的构造函数，对于实例成员来说是类的原型对象；

key：作用的成员

descriptor：成员的属性描述符，其中value 就是方法体

这是最基本的装饰器的使用，一进来初始化的时候就会执行装饰器的内容

（2）通过装饰器传值

<template>
  <div @click="getName">点击</div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
function decorator (params:Object) {
  return function (target:any, key:any, descriptor: any) {
    descriptor.value = () => {
      console.log('装饰器', params)
    }
  }
}
@Component
class Index extends Vue {
  private name:string = 'zfb'
  @decorator({ event_id: 'getName' })
  getName () {
    console.log('正宗的getName', this.name)
  }
}
export default Index
</script>

<style>

</style>

通过在装饰器中重写方法体，可以给所装饰的方法添加额外的操作，执行这段代码，发现只执行装饰器重写的了，没有执行方法中定义的，所以需要在重写的函数中加上原有的函数操作

<template>
  <div @click="getName">点击</div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
const decorator = (params:Object) => {
  // 返回的函数是装饰器函数
  return (target:any, key:any, descriptor: any) => {
    var origin = descriptor.value // 保留原来的方法
    descriptor.value = function (...args:any[]) {
      origin.apply(this, ...args)
      console.log('装饰器', params)
    }
  }
}
@Component
class Index extends Vue {
  private name:string = 'zfb'
  @decorator({ event_id: 'getName' })
  getName () {
    console.log('正宗的getName', this.name)
  }
}
export default Index
</script>

<style>

</style>

这样就可以一起执行了

总结：

（1）类的装饰器：可以在类之前调用装饰器，比如 @Component，装饰类的时候，一般就涉及到一个参数 target

（2）方法的装饰器：这时候涉及到三个参数 target, key, descriptor

（3）变量名的装饰器

ts 之 装饰器

猜你喜欢