A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 绮罗 中级黑马   /  2019-11-15 10:49  /  1216 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

本帖最后由 绮罗 于 2019-11-15 11:12 编辑

装饰器主要用于:   装饰类、装饰方法或属性修饰模式(Decortaor),是面向对象编程领域中,一种动态地往一个类中添加新的行为的设计模式。就功能而言,修饰模式相比生成子类更为灵活,这样可以给某个对象而不是整个类添加一些功能。
原理:
  简单来说.Decorator就是一种动态地往一个类中添加新的行为的设计模式,它可以在类运行时,扩展一个类的功能.并且去修改类本身的属性和方法.使其可以在不同类之间更灵活的共用一些属性和方法.下面就让我们来看下在ES中Decorator的用法.

装饰类:@annotation
@eat
class Person {
   constructor() { }
}
function eat(target, key, descriptor) {
   console.log('吃饭');
   console.log(target);
   console.log(key);
   console.log(descriptor);
  target.prototype.act = '我要吃饭';
}
const jack = new Person();
  console.log(jack.act);
// 吃饭
// [Function: Person]
// undefined
// undefined
// 我要吃饭


上面是一个最简单的装饰器的运用.我们首先声明一个类Person,然后在声明一个装饰器函数eat,在eat中将传入的三个参数分别打印出来,并将第一个参数target的原型prototype上添加一个属性act,并赋值为'我要吃饭'.然后将函数eat作为装饰在Person这个类本身上.最后,构造一个Person的实例jack,并打印jack上的act属性.
  然后从下面的运行结果中我们可以看出,代码中会先打印出'吃饭',然后是参数target,其次是参数key,再然后是参数descriptor.最后才是jack的act属性.这是因为装饰器对类的行为的改变,是代码编译时发生的,而不是在运行时。这意味着,装饰器能在编译阶段运行代码。也就是说,装饰器本质就是编译时执行的函数。


装饰方法或属性:
class Person {
     constructor() {}
@test    name() {
     console.log('张三');
  }
}
function test(target, key, descriptor) {
     console.log(target);
     console.log(key);
     console.log(descriptor);
}
const student = new Person();
student.name();
  // Person {}
  // name
  // { value: [Function: name], writable: true, enumerable: false, configurable: true }
  // 张三
在上面代码中我们将test装饰器装饰在Person类的name属性上.然后打印三个传入的入参.分别得到了我们期望的结果.而通过这三个参数,我们就可以对我们要装饰的对象进行一些有趣的修改。
应用:
1.log
2.autobind
3.debounce
4.time
5.mixin
6.redux




0 个回复

您需要登录后才可以回帖 登录 | 加入黑马