es6 proxy 总结

Proxy: 可以对数据的处理,对构造函数的处理,对数据的验证,说白了就是在我们访问对象添加了一层拦截 ,
其实说明白点跟 vuejs computed 的计算属性很类似,
proxy 字面意思就是代理,下面代码就相当与代理了 test{} 对象,当proxy.age  时触发Proxy 的get 方法,做修改操作时触发 set 方法,
*  测试es6 proxy代理
*/
function f() {
    var  name="小刚"
    var handler={
        get:(target, prop)=>{
            console.log(target); // target {name: "小红", age: "20"}
            console.log(prop); //  age 
            debugger;
            if(prop==="age"){
                return  target[prop]+="日子";
            }
        },
        set:(target,key ,value)=>{
            debugger;
            console.log(target); // {name: "小红", age: "20日子"}
            console.log(key);    //age  注: 只显示proxy 调用的值
            console.log(value);  // 30
            if(key==="age" && typeof value!=="number"){
                throw  Error("age 字段名必须为number");
             }
        }
    }
    var test={
        name:"小红",
        age:"20"
    }
    var proxy = new Proxy(test,handler);
    var name = test.age;
    // proxy 现在 代理 test 对象
    console.log(`我的年纪${proxy.age}`)  // 获取 对象 数据时触发, 与vuejs 的computed 属性类似
        // 输出: 我的年纪20
    // 做一个set 修改操作
    console.log(`我修改了年纪属性触发set 方法${proxy.age=30}`)
        // 输出:我修改了年纪属性触发set 方法 30


}
f();

 

posted @ 2020-08-17 10:41  石shi  阅读(710)  评论(0编辑  收藏  举报