源码 https://github.com/webabcd/TypeScriptDemo
作者 webabcd

兼收并蓄 TypeScript - 进阶: proxy, reflect

示例如下:

advanced\proxy_reflect.ts

{
    // Proxy - 代理（拦截目标对象的属性操作和函数操作）
    let target = {
        name: 'webabcd',
        age: 40,
        get hello() {
            return this.name + this.age;
        }
    }
    let handler = {
        get: function(target:any, propertyKey:string, receiver:any) { // receiver 就是 Proxy 实例本身
            console.log("get: "+ propertyKey);
            return target[propertyKey];
        },
        set: function(target:any, propertyKey:string, value:any, receiver:any) { // receiver 就是 Proxy 实例本身
            console.log("set: " + propertyKey);
            target[propertyKey] = value;
            return true; // 对于 handler 的 set() 来说，必须要有 return true
        },
        has: function(target:any, propertyKey:string){
            console.log("has: " + propertyKey);
            return propertyKey in target;
        }
        /*
         * 其他可代理的方法如下：
         * construct() - 执行 new Proxy() 时
         * getPrototypeOf() - 执行 Object.getPrototypeOf(proxy) 时
         * setPrototypeOf() - 执行 Object.setPrototypeOf(proxy) 时
         * preventExtensions() - 执行 Object.preventExtensions(proxy) 时
         * isExtensible() - 执行 Object.isExtensible(proxy) 时
         * defineProperty() - 执行 Object.defineProperty(proxy) 时
         * ownKeys() - 执行 Object.getOwnPropertyNames(proxy) 时
         * deleteProperty() - 执行 delete proxy.prop 时
         */
    }
    // Proxy - 让 handler 处理 target 的属性和方法
    let proxy = new Proxy(target, handler);
    proxy.name = "wanglei"; // 会走到 handler 的 set()
    let name = proxy.name; // 会走到 handler 的 get()
    let exists = ("name" in proxy); // 会走到 handler 的 has()


    // 通过 handler 的 apply() 代理函数的调用
    function target2(a:number, b:number) {
        return a + b;
    }
    let handler2 = {
        apply: function(target:any, ctx:any, args:any[]) {
            console.log("apply: " + args.join(","));
            return target(...args);
        }
    };
    let proxy2 = new Proxy(target2, handler2);
    console.log(proxy2(100, 50)); // 150


    // 通过 handler 的 construct() 代理构造函数
    class Target3 {  
        constructor(public a: number, public b: number) {  

        }  
        hello(): number {  
            return this.a + this.b;  
        }  
    }  
    let handler3 = {
        construct(target:any, argArray:any[]) {
            console.log("construct: "+argArray.join(","));
            return new target(...argArray);
        }
    };
    let proxy3 = new Proxy(Target3, handler3);
    console.log(new proxy3(100, 50).hello()); // 150




    // Reflect - 反射
    let target4 = {
        name: 'webabcd',
        age: 40,
        get hello() {
            return this.name + this.age;
        }
    }
    // Reflect.get() - 获取指定对象的指定属性
    console.log(Reflect.get(target4, "hello")); // wanglei40
    // Reflect.get() - 获取指定对象的指定属性（对象中的 this 会指向 Reflect.get() 的第 3 个参数）
    console.log(Reflect.get(target4, "hello", {name: "xyz"})); // xyzundefined
    // Reflect.set() - 设置指定对象的指定属性
    Reflect.set(target4, 'name', "abc");
    console.log(Reflect.get(target4, "name")); // abc


    class Target5 {  
        constructor(public a: number, public b: number) {  

        }  
        hello(p:string): string {  
            return `${p} ${this.a + this.b}`;
        }  
    }  
    // Reflect.apply() - 调用指定的函数
    //     第 1 个参数：目标函数
    //     第 2 个参数：目标函数的 this 指向的对象
    //     第 3 个参数：传入目标函数的参数列表
    let t5 = new Target5(1, 2);
    console.log(Reflect.apply(t5.hello, {a:100, b:200}, ['xxx'])); // xxx 300
    

    class Target6 {  
        constructor(public a: number, public b: number) {  

        }  
        hello(): number {  
            return this.a + this.b;  
        }  
    }  
    // Reflect.construct() - 调用构造函数并传参
    let t6 = Reflect.construct(Target6, [100, 200]);
    console.log(t6.hello()); // 300


    /*
     * 关于 Reflect 除了上面说的，还有如下：
     * 注：这些都可以在 Object 中找到相同的用法，可以参见 class/prototype.js 中的关于 Object 的相关说明以及 basic/object.js 中的关于 Object 的相关的说明
     * defineProperty() - 类似 Object.defineProperty()
     * deleteProperty() - 类似 delete obj.prop
     * getPrototypeOf() - 类似 Object.getPrototypeOf()
     * setPrototypeOf() - 类似 Object.setPrototypeOf()
     * preventExtensions() - 类似 Object.preventExtensions()
     * isExtensible() - 类似 Object.isExtensible()
     * ownKeys() - 类似 Object.getOwnPropertyNames()
     *
     * 注：能用 Reflect 的方法就用 Reflect 的，而不要再用 Object 的了
     */




    // 通过 Proxy 和 Reflect 实现察者模式
    let myObj = {
        name: 'webabcd'
    }
    let myHandler = {
        set: function(target:any, propertyKey:string, value:string, receiver:any) {
            const result = Reflect.set(target, propertyKey, value, receiver);
            observerList.forEach(observer => observer(propertyKey, value));
            return result;
        }
    }
    const observerList: Function[] = [];
    const observer = (fn:Function) => observerList.push(fn);
    const observable = (obj:any) => new Proxy(obj, myHandler);

    // 指定观察者
    observer((propertyKey:string, value:string) => {
        console.log(`我是观察者 1，发现 myObj 的 ${propertyKey} 的值变为了 ${value}`);
    });
    observer((propertyKey:string, value:string) => {
        console.log(`我是观察者 2，发现 myObj 的 ${propertyKey} 的值变为了 ${value}`);
    });

    // 指定可被观察的对象，属性发生变化时通知所有观察者
    let observableObj = observable(myObj);
    observableObj.name = "wanglei";
}

源码 https://github.com/webabcd/TypeScriptDemo
作者 webabcd