(十一)用Proxy进行预处理

本节知识点

• 钩子函数

钩子函数

• 比如我们在函数运行前需要初始化一些数据，在改变对象的值以后需要做一些善后处理.这些可以理解为钩子函数
• 钩子函数简单理解为在执行方法前预处理一些代码,也可以理解为函数或者对象的生命周期

proxy

• proxy的应用可以使得函数更加强大业务逻辑更加清楚，而且在编写自己的框架或者通用组件的时候很好用.proxy涉及的内容非常多。下面讲述几个

• 在学习proxy之前，我们先来看看对象的定义方法

var obj = {
    add:function(val){
        return val+10
    },
    name:"I am Hello"
};
console.log(obj.add(10));
console.log(obj.name);

(一) 声明proxy

new Proxy({},{})

需要注意的就是这里是两个花括号，第一个花括号就是我们的主体函数，第二个花括号就是Proxy待处理的区域,相当于我们写钩子函数的地方,在执行主函数前必须要执行钩子函数

现在我们把上边的obj对象改成我们的Proxy形式

let Pro = new Proxy({
    add:function (val) {
        return val+10
    },
    name: "今天天气不错"
},{
    get:function(target,key)
    {
        console.log("输出之前打印");
        if(key in target)
        {
            return target[key];
        }else
        {
            throw new Error("对不起没有这个属性");
        }

    }
});
 console.log(Pro.name);
 console.log(Pro.add(10));
 console.log(Pro.aaaa);

输出结果就是

2018-02-04_124355.jpg

• get 属性

get属性就是在你得到对象属性值时候预处理的方法，他接受2个参数
(1) target 就是主函数
(2) key 就是主函数的属性。

• set属性

set属性是当你要改变主函数里面的值时候，他要进行的预处理函数

let Pro = new Proxy({
    add:function (val) {
        return val+10
    },
    name: "今天天气不错"
},{
    get:function(target,key)
    {
        console.log("输出之前打印");
        if(key in target)
        {
            return target[key];
        }else
        {
            throw new Error("对不起没有这个属性");
        }

    },
    set:function(target,key,value,receiver){
        console.log(`${key}=${value}`);
    }
});
Pro.name= "今天天气太差了";
console.log(Pro.name);

• target 就是主函数
• key 就是键位
• value 就是要改变的值
• receiver 就是改变前的原始值