黑马程序员技术交流社区

标题: ES6的装饰器（Decorator） [打印本页]

---

作者: 绮罗    时间: 2019-11-15 10:49
标题: ES6的装饰器（Decorator）


装饰器主要用于:   装饰类、装饰方法或属性修饰模式(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

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2