ES6 Proxy简单探究

Proxy 概念

proxy 在目标对象外层搭建了一层拦截，外界对目标对象的某些操作，必须通过这层拦截

语法：let proxy = new Proxy(target, handler)

参数 target 表示的是要监听的对象；参数handler 是一个捕捉器对象，里面有各种属性来捕捉触发事件，例如 set:function 是对象中属性被赋值时触发，get:function 是对象中属性被读取时触发。

样例

    let obj = {
        name: "target"
    };
    let handler = {
        get: function(target, key) {
            console.log(`${key} 被读取`);
            return target[key];
        },
        set: function(target, key, value) {
            console.log(`${key} 被设置为 ${value}`);
            target[key] = value;
            return target[key];
        }
    }
    let proxy = new Proxy(obj,handler);
    console.log(proxy.name);
    console.log(proxy.name = "set-target");

当 name 被读取时，被捕捉到，打印出一段话同时返回 name 对应的值。当 name 被设置时打印出一段话同时返回新设置的值

同理，不单单是 console 一句话，我们还可以对一些操作进行过滤或者拦截，例如：

    let obj = {
        name: "target",
        password: "t-pass"
    };
    let handler = {
        get: function(target, key) {
            console.log(`${key} 被读取`);
            if(key == "password") {
                return "您没有读取的权限"
            } else {
                return target[key];
            }
            
        },
    }
    let proxy = new Proxy(obj,handler);
    console.log(proxy.name);
    console.log(proxy.password);

当想获取 password 属性时，直接在判断中驳回

总结

proxy 字面意思为代理，计算机网络中常用的词汇。在 ES6 中，它的主要功能就是对一个对象进行监听守卫，当操作该对象时，会触发 handler 这个监听对象中的属性方法，在 handler 对象中，我们可以统一对这些触发进行监听然后控制。（不仅仅是读取属性或者修改属性值，其他详细的方法，可以参考官方文档，这里只是简单实验一下用法）