本帖最后由 绮罗 于 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
|
|