Typescript - Decorator AOP 与 Proxy的再思考

本文简述如何在TypeScript下实现AOP (aspect oriented programming) 面向切面编程。 什么是AOP，我的理解是将特定功能的代码切入到某个已经封装好的对象、类或函数的执行过程中。 之前的一篇文章讲述过如何用decorator、高阶函数实现aop。这里再追加一种实现方式：Proxy。

有如下代码，新建一个Foo类型的对象，并访问属性bar。

class Foo {
  bar: string

  constructor(_bar: string)
  {
    this.bar = _bar;
  }
}

let foo = new Foo('abc');
foo.bar;

使用proxy实现aop编程，在访问Foo的属性时加入一些操作。代码实现如下：

class Foo {
  bar: string

  constructor(_bar: string)
  {
    this.bar = _bar;
  }
}

function proxify<T extends object>(obj: T):T {
  let handler = {
        get: function(target: T, prop: string, receiver: any) {
            console.log(`prop: ${prop}, value: ${Reflect.get(target, prop, receiver)}`);

            return Reflect.get(target, prop, receiver);
        }
    }

    return new Proxy(obj, handler);
}

let foo = new Foo('abc');
let proxFoo = proxify(foo);
let bar = proxFoo.bar;

要注意的是，Proxy对性能会有一定影响。