装饰器

装饰器有点像高阶函数；一个函数返回另一个函数；

装饰器是一个函数；用在类、类的属性、类的方法、类方法的参数上；功能就是把这些（类、类的属性、类的方法、类方法的参数）；附加（装饰）上一定的额外的功能；

装饰器有两种：普通装饰器、装饰器工厂(可以传参数)；这两种装饰器都可以用在（类、类的属性、类的方法、类方法的参数）上；

目前浏览器无法直接运行装饰器，一般用在typescript上，或者使用babel，才能运行。

类 装饰器

• 类的普通装饰器

function lgClass(target:any) {
  // target是被装饰的类
  target.prototype.works = ['html', 'css']
}
// @lgClass不可以加;
@lgClass
class UlgClass {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
}

• 类的 装饰器工厂(可以传参数)

function clgClass (params: any[]) {
  return function (target:any) {
    // target是被装饰的类
    target.prototype.works = params;
  }
}
@clgClass(['html', 'css'])
class UlgClass {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
}

普通装饰器，以下就不演示了，只演示 装饰器工厂(可以传参数)

类属性 装饰器

function logProperty(params: any) {
  // target 是被装饰类的原型; 用在静态方式属性，是类本身
  return function (target:any, key: any) {
    console.log(target)
    target[key] = params
  }
}

class UlgClass {
  @logProperty('http://baidu.com')
  url: string;
  constructor(url: string) {
    this.url = url;
  }
}

类方法 装饰器

function logMethod(params: any) {
  // target 是被装饰类的原型; 用在静态方式属性，是类本身
  return function (target:any, key: any, desc: any) {
    console.log(target, desc)
    var oMethod = desc.value;
    desc.value = function (...args:any[]) {
      args = args.map(val => String(val));
      oMethod.apply(this, args);
    }
  }
}

class Kk{
  name: string | undefined;
  @logMethod(null)
  eat() {}
}

类方法参数 装饰器

function logParams(params: string) {
  return function (target:any, methodName: string, paramsIndex: number) {
    console.log(target, methodName, paramsIndex)
  }
}

class Kk{
  eat(@logParams('fesh') food: string) {}
}

装饰器执行顺序

属性装饰器 - 方法装饰器 - 方法参数装饰器 - 类装饰器 （一个类或者方法、参数、属性：有多个装饰器，执行顺序：先下后上）