聊聊TS中的装饰器能做啥

2022-06-21 237

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 聊聊TS中的装饰器能做啥

一、示例代码

github.com/su37josephx…

运行方法

npm i 
npm start

二、概念介绍

装饰器模式（Decorator Pattern）允许向一个现有的对象添加新的功能，同时又不改变其结构。这种类型的设计模式属于结构型模式，它是作为现有的类的一个包装。

这种模式创建了一个装饰类，用来包装原有的类，并在保持类方法签名完整性的前提下，提供了额外的功能。

我们通过下面的实例来演示装饰器模式的用法。其中，我们将把一个形状装饰上不同的颜色，同时又不改变形状类。

三、基本用法

1. 类装饰器

target : 类的构造函数相当于: Example.prototype.constructor

2. 方法装饰器

target :

静态成员：类的构造函数

实例成员：类的原型对象

method : 成员的名字

descriptor : 成员的属性描述符

// 类装饰器
function anotationClass(target) {
    console.log('===== Class Anotation =====')
    console.log('target :', target)
}
// 方法装饰器
function anotationMethods (target, property, descriptor) {
        // target 
        console.log('===== Method Anotation ' + property + "====")
        console.log('target:', target)
        console.log('property:', property)
        console.log('descriptor:', descriptor)
}
@anotationClass
class Example {
    @anotationMethods
    instanceMember() { }
    @anotationMethods
    static staticMember() { }
}

四、类与方法的调用顺序

// 类装饰器
function anotationClass(id){
    console.log('anotationClass evaluated', id);
    return (target) => console.log('anotationClass executed', id);
}
// 方法装饰器
function anotationMethods(id){
    console.log('anotationMethods evaluated', id);
    return (target, property, descriptor) => console.log('anotationMethods executed', id);
}
@anotationClass(1)
@anotationClass(2)
class Example {
    @anotationMethods(1)
    @anotationMethods(2)
    method(){}
}

五、利用装饰器实现切面AOP切面编程

function log(target, name, descriptor) {
    var oldValue = descriptor.value;
    descriptor.value = function () {
        console.log(`Calling "${name}" with`, arguments);
        return oldValue.apply(null, arguments);
    }
    return descriptor;
}
// 日志应用
class Maths {
    @log
    add(a, b) {
        return a + b;
    }
}
const math = new Maths();
// passed parameters should get logged now
math.add(2, 4);