TS之成员装饰器

成员装饰器

属性装饰器

属性装饰器也是一个函数，该函数有两个参数
第一个参数：如果是静态属性，则是类本身(构造函数)；如果是实例属性，则是类的原型；
第二个参数：为属性名，固定一个字符串

function t(target:any,str:string){
    console.log(target,target === Test.prototype,str);
}

class Test{
    //实例属性
    @t
    props1:string
    // 静态属性
    @t
   static props2:string
}
/*
Test {} true props1
[Function: Test] false props2
*/

function t(target:any,str:string){
    console.log(target,target === Test.prototype,str);
}
class Test{
    @t
    props1:string
    @t
    props2:string
}
/*
Test {} true props1
Test {} true props2
*/

function t(target:any,str:string){
    console.log(target,target === Test.prototype,str);
    if(!target.__props){
        target.__props = [];
    }
    target.__props.push(str);
}


class Test{
    @t
    props1:string
    @t
    props2:string
}
console.log((Test.prototype as any).__props);
const a = new Test();
console.log((a as any).__proto__)
/*
Test {} true props1
Test { __props: [ 'props1' ] } true props2
[ 'props1', 'props2' ]
Test { __props: [ 'props1', 'props2' ] }
*/

方法装饰器

属性描述符：

const a = new A();
Object.defineProperty(a,'method',{
    writable:false,
    // 遍历
    enumerable:false,
})

方法装饰器也是一个函数，该函数有三个参数
第一个参数：如果是静态方法，则是类本身(构造函数)；如果是实例方法，则是类的原型；
第二个参数：为属性名，固定一个字符串
第三个参数：是属性描述符对象

//写成一个函数的形式，美誉为装饰器工厂
function d() {
    return function (target: any, str: string, descriptor: PropertyDescriptor) {
        console.log(target, str, descriptor);
    }
}

class A {
    @d()
    method1() {

    }
}
/**
  A {} 
  
  method1 
  
  {
  value: [Function: method1],
  writable: true,
  enumerable: false,
  configurable: true
  }
 */

方法装饰器的用处

可以对类中的方法进行通用描述，比如方法是否可以遍历，是否过期

function enumerable(target: any, str: string, descriptor: PropertyDescriptor) {
    descriptor.enumerable = true;
}
// 提示方法过期
function useless(target: any, str: string, descriptor: PropertyDescriptor) {
    descriptor.value = function(){
        console.warn('该方法已过期');
    }
}

class A {
    @enumerable
    method1() {
        console.log('方法1')
    }
    @enumerable
    @useless
    method2() {

    }
}
const a = new A();
for (const key in a) {
   console.log(key);
}
a.method1();
a.method2();
/**
   method1
   method2
   方法1
   该方法已过期
 */

方法也可以有多个装饰器，运行顺序还是从下往上。