码迷,mamicode.com
首页 > 其他好文 > 详细

TS之装饰器

时间:2020-04-25 17:02:51      阅读:413      评论:0      收藏:0      [点我收藏+]

标签:重载   形式   any   attr   function   来替   扩展   baidu   tpc   

装饰器:

  装饰器是一种特殊类型的声明,它能被附加到类声明,方法,属性或者参数上,可以修改类的行为。

  装饰器使用 @expression这种形式,expression求值后必须为一个函数,它会在运行时被调用,被装饰的声明信息做为参数传入。

常见的装饰器有:

  类装饰器、属性装饰器、方法装饰器、参数装饰器

装饰器的写法:

  普通装饰器(无法传参)、装饰器工厂(可传参)

1.类装饰器:

类装饰器在类声明之前被声明(紧靠着类声明)。类装饰器应用于类构造函数,可以用来监视、修改或者 替换类定义。

(1)普通装饰器

// 定义普通装饰器
function logClass(params: any) {
  console.log(params);

  // 动态扩展的属性
  params.prototype.apiUrl = ‘xxx‘;
  // 动态扩展的方法
  params.prototype.run = function () {
    console.log(‘我是一个run方法‘);
  }
}

// 使用类装饰器(普通装饰器,无法传参)
@logClass
class HttpClient {
  constructor() {
  }

  getData() {
  }
}

let http = new HttpClient();

 (2)装饰器工厂

// 定义装饰器工厂
function logClass(params: string) {
  return function (target: any) {
    console.log(‘target:‘, target);
    console.log(‘params:‘, params);

    target.prototype.apiUrl = params;
  }
}

// 使用类装饰器:装饰器工厂,可传参(相当于把hello给了params,下面这个类给了target)
@logClass(‘http:www.baidu.com‘)
class HttpClient {
  constructor() {
  }

  getData() {
  }
}

let http = new HttpClient();
console.log(http.apiUrl);

 

类装饰器重载构造函数的例子:

  类装饰器表达式会在运行时当作函数被调用,类的构造函数(constructor)作为其唯一的参数;如果类装饰器返回一个值,它会使用提供的构造函数来替换类的声明;

// 定义装饰器工厂
function logClass(target: any) {
  console.log(target);

 // 把类的构造函数作为参数传入,并修改构造函数
return class extends target { // 修改当前类的构造函数 apiUrl: any = "我是在装饰器里面修改后的apiUrl" // 修改方法 getData() { this.apiUrl = this.apiUrl + ‘=====‘; console.log(this.apiUrl); } } } @logClass class HttpClient { public apiUrl: string | undefined; constructor() { this.apiUrl = "我是构造函数里面的apiUrl" } getData() { console.log(this.apiUrl); } } let http = new HttpClient(); http.getData();

 2.属性装饰器

  属性装饰器表达式会在运行时当作函数被调用,传入下列两个参数:

  • 对于静态成员来说是类的构造函数,对于实例成员是类的原型对象
  • 成员的名字
// 定义类装饰器
function logClass(params: string) {
  return function (target: any) {
    console.log(target);
    console.log(params);
  }
}

// 定义属性装饰器
function logProperty(params: any) {
  // target--->类的原型对象;attr--->传入的参数url
  return function (target: any, attr: any) {
    console.log(target, attr);

    target[attr] = params
  }
}

@logClass(‘xxxx‘)
class HttpClient {

  @logProperty(‘http://www.baidu.com‘)
  public url: any | undefined;
  constructor() {

  }
  getData() {
    console.log(this.url);
  }
}

let http = new HttpClient();
http.getData();

 

TS之装饰器

标签:重载   形式   any   attr   function   来替   扩展   baidu   tpc   

原文地址:https://www.cnblogs.com/codexlx/p/12773576.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!