ES6 第十五节 用proxy进行预处理
第十五节 用proxy进行预处理
当我们在操作一个对象或者方法时会有几种动作，比如：在运行函数前初始化一些数据，在改变对象值后做一些善后处理。这些都算钩子函数，Proxy的存在就可以让我们给函数加上这样的钩子函数，你也可以理解为在执行方法前预处理一些代码。你可以简单的理解为它是函数或者对象的生命周期。
Proxy的应用可以使函数更加强大，业务逻辑更加清楚，而且在编写自己的框架或者通用组件时非常好用。
先回顾一下定义对象的方法。
var obj={
add:function(val){
return val+10;
},
name:'I am Da0sy'
};
console.log(obj.add(100));
console.log(obj.name);
声明了一个obj对象，增加了一个对象方法add和一个对象属性name，然后在控制台进行了打印。
声明Proxy
用new的方法对Proxy进行声明。
声明Proxy的基本形式：
new Proxy({},{});
第一个花括号就相当于我们方法的主体，后边的花括号就是Proxy代理处理区域，相当于我们写钩子函数的地方。
现在把上边的obj对象改成我们的Proxy形式。
var pro = new Proxy({
add: function (val) {
return val + 10;
},
name: 'I am Da0sy'
}, {
get:function(target,key,property){
console.log('come in Get');
return target[key];
}
});
console.log(pro.name);
可以在控制台看到结果，先输出了come in Get。相当于在方法调用前的钩子函数。
get属性
get属性是在你得到某对象属性值时预处理的方法，他接收三个参数：
- target：得到的目标值
- key：目标的key值，相当于对象的属性
- property：这个不太常用，用法还在研究中，还请大神指教。
set属性
set属性值是你要改变Proxy属性值时，进行的预先处理。它接收四个参数：
- target：目标值。
- key：目标的Key值。
- value：要改变的值。
- receiver：改变前的原始值。
var pro = new Proxy({
add: function (val) {
return val + 10;
},
name: 'I am Da0sy'
}, {
get:function(target,key){
console.log('come in Get');
return target[key];
},
set:function(target,key,value,receiver){
console.log(`setting ${key} = ${value}`);
return target[key] = value;
}
});
console.log(pro.name);
pro.name='黛西';
console.log(pro.name);
apply的使用
apply的作用是调用内部的方法，它使用在方法体是一个匿名函数时。
get = function () {
return 'I am Da0sy';
};
var handler = {
apply(target, ctx, args) {
console.log('do apply');
return Reflect.apply(...arguments);
}
}
var pro = new Proxy(target, handler);
console.log(pro());