TS下的装饰者模式(Decorator)

1.1、装饰者模式

装饰者模式就是动态的给类或对象增加功能的设计模式。在程序运行时动态的给一个具备基础功能的类或对象添加新的功能，并且不会改变会破坏基础类和对象的功能。先提炼出产品的最小可用产品，再通过快速迭代的方式添加功能。

1.2、Typescript下的实现

Javascript里的装饰器目前处在建议征集的第二阶段，不被浏览器所支持，如果想要提前使用这个新特性就需要Babel，Typescript等工具进行转译。这里介绍Typescript下的用法。

首先在全局安装typescript

npm install typescript -g

然后新建一个后缀为.ts的typescript文件,这里我们新建一个demo.ts

• 新建一个Greeter类

class Greeter {
    constructor() {}
    greet(subject:any) {
        console.log(`hello ${subject}!`);
    }
}
const greet = new Greeter();
greet.greet(`decorator`);

将ts文件编译为js运行

tsc demo.ts --target ES5 --experimentalDecorators
# 如果本地没安装node可以把demo.js中的代码复制到chrome控制台测试
node demo.js

运行结果

hello decorator!

---

下面给它加上一个装饰器，使greet方法能够在成功执行后做一个日志记录

class Greeter {
    constructor() { }
    @logSuccess
    greet(subject: string) {
        console.log(`hello ${subject}!`);
    }
}
function logSuccess(target: any, key: any, descriptor: any) {
    const func = descriptor.value;
    descriptor.value = (...args: any[]) => {
        func.apply(target, args)
        console.log(`greet successfully!`)
    }
}
const greet = new Greeter();
greet.greet(`decorator`);

编译后运行结果
运行结果

hello decorator!
greet successfully!

正如我们所见Greeter的原方法greet()在执行完之后执行了console.log(`greet successfully!`)

logSuccess(target,key,descriptor)为什么需要传入这三个参数?Decorators的实现使用了ES5的 Object.defineProperty 方法，这三个参数也和这个方法的参数一致。装饰器的本质就是一个函数语法糖，通过Object.defineProperty来修改类中一些属性，descriptor参数也是一个对象，是针对key属性的描述符，里面有控制目标对象的该属性是否可写的writable属性等。

接下来我们将该日至系统简单完善一下

除了打印该方法执行成功，再添加对其运行时错误的日志输出

class Greeter {
    constructor() { }
    @log
    greet(subject: string) {
        console.log(`hello ${subjects}!`);
    }
}
function log(target: any, key: any, descriptor: any) {
    const func = descriptor.value;
    descriptor.value = (...args: any[]) => {
        try {
            func.apply(target, args)
            console.log(`greet successfully!`)
        } catch (err) {
            console.log(`greet error : ${err}`)
        }
    }
}
const greet = new Greeter();
greet.greet(`decorator`);

这里我们特意使用了一个未声明的变量subjects来触发一个错误
查看运行结果

greet error : ReferenceError: subjects is not defined

这样就实现了一个简单的日志系统

1.3 装饰者模式与工厂函数

如果想对不同的对象应用同一个decorator，但同时又需要通过传参来控制一些差别（装饰器器函数需要保留(target,key,descriptor)三个参数）,这时就需要工厂函数来帮我们生成一个装饰器函数。

通过装饰器来使一个属性变得只读👇

class Greeter {
    constructor() { }
    @readonly(true)
    demo() {
        console.log(`i am readonly`)
    }
}
function readonly(readonly: boolean) {
    return function (target: any, key: any, descriptor: any) {
        descriptor.writable = !readonly
    }
}
const greet = new Greeter();
greet.demo = function () {
    console.log(`new greet`)
}
greet.demo()

输出结果

i am readonly

---

多个装饰器可以叠加作用

class Greeter {
    constructor() { }
    @readonly(false)
    @readonly(true)
    demo() {
        console.log(`i am readonly`)
    }
}
function readonly(readonly: boolean) {
    return function (target: any, key: any, descriptor: any) {
        descriptor.writable = !readonly
    }
}
const greet = new Greeter();
greet.demo = function () {
    console.log(`new greet`)
}
greet.demo()

输出结果

new greet

当有多个装饰器同时作用在一个对象的属性上时👇:

@g()
@f()
method (){}

叠加效果类似这样g(f(method))

1.4 装饰器作用在类上

作用在类上的装饰器中的参数target不再是类的prototype,而是类本身，因此他也没有key与descriptor两个属性。

下面的装饰器给Greeter类动态增加了greet()函数

@decrator()
class Greeter {
    constructor() { }
    greet?: any
}
function decrator() {
    return function (target: any) {
        console.log(target.prototype)
        if (target.prototype && !target.prototype.greet) {
            target.prototype.greet = function () {
                console.log(`hello decrator!`)
            }
        }
    }
}
const greet = new Greeter();
if (greet.greet) {
    greet.greet()
}

输出

Greeter {}
hello decrator!

这里有同学可能对原型链的知识不太了解或者生疏了,简单提醒一下👇

//构造函数
function Cons(){}
//对象实例
const cons = new Cons();

Cons.prototype === cons.__proto__;  // true
Cons.prototype.constructor === Cons;  // true

原型链的教程可以参考一下prototype对象