js--代理和反射进阶

前言

　　前面已经了解了代理的创建、代理的处理程序，捕获器和常见的反射API,那么结合这些知识，在开发中能实现哪些代码方面的便捷和优化。

正文

　　1、使用 get() 和set() 捕获器跟踪对象属性的设置和访问

        var person = {}
        var handler = {
            set(trapTarget, property, value, receiver) {
                console.log(`Setting ${property} ${value}`);
                return Reflect.set(...arguments);
            },
            get(trapTarget, property, receiver) {
                console.log(`Getting ${property}`);
                return Reflect.get(...arguments);
            }
        }
        var proPerson = new Proxy(person, handler)
        proPerson.name = "Serendipity"// Setting name Serendipity
        console.log(proPerson.name);//Getting name Serendipity

　　2、组合get() 和has() 捕获器实现隐藏属性

        var person = {
            name: "Serendipity",
            age: 18
        }
        var handler = {
            get(target, property, receiver) {
                if (property == "age") {
                    return undefined
                } else {
                    return Reflect.get(...arguments);
                }
            },
            has(target, property) {
                if (property == "age") {
                    return false
                } else {
                    return Reflect.has(...arguments);
                }
            }
        }
        var proPerson = new Proxy(person, handler)
        console.log(proPerson.name);// Serendipity
        console.log(proPerson.age);//undefined
        console.log("name" in proPerson);//true
        console.log("age" in proPerson);// false

　　3、数据绑定与可观察对象

　　通过代理可以把运行时中原本不相关的部分联系到一起。这样就可以实现各种模式，从而让不同的代码互操作。比如，可以将被代理的类绑定到一个全局实例集合，让所有创建的实例都被添加到这个集合中。

        const userList = [];
        class User {
            constructor(name) {
                this.name_ = name;
            }
        }
        const proxy = new Proxy(User, {
            construct() {
                const newUser = Reflect.construct(...arguments);
                userList.push(newUser);
                return newUser;
            }
        });
        new proxy('John');
        new proxy('Jacob');
        new proxy('Jingleheimerschmidt');
        console.log(userList); // [User {}, User {}, User{}]
        // 另外，还可以把集合绑定到一个事件分派程序，每次插入新实例时都会发送消息：
        const userList = [];
        function emit(newValue) {
            console.log(newValue);
        }
        const proxy = new Proxy(userList, {
            set(target, property, value, receiver) {
                const result = Reflect.set(...arguments);
                if (result) {
                    emit(Reflect.get(target, property, receiver));
                }
                return result;
            }
        });
        proxy.push('John');// John
        proxy.push('Jacob');// Jacob

写在最后

　　以上就是本文的全部内容，希望给读者带来些许的帮助和进步，方便的话点个关注，小白的成长之路会持续更新一些工作中常见的问题和技术点。