ES6系列_13之Proxy进行预处理（简单学习）
ES6系列_13之Proxy进行预处理（简单学习）
1.理解什么是预处理？
当我们在操作一个对象或者方法时会有几种动作，比如：在运行函数前初始化一些数据，在改变对象值后做一些善后处理。这些都算钩子函数，Proxy的存在就可以让我们给函数加上这样的钩子函数。
Proxy进行预处理可以简单理解为：执行方法前，先预处理代码（预热工作）。
2.对比引入Proxy
我们先来回顾一下定义对象的方法。
var obj={
add:function(val){
return val+100;
},
name:"小红"
};
console.log(obj.add(100)); //200
console.log(obj.name);//小红声明了一个obj对象，增加了一个对象方法add和一个对象属性name，然后在控制台进行了打印。
这个时候我们想在执行obj对象之前做一些事，我们应该怎么办呢？我们的es6提供的proxy就出场了。它给我们提供了预处理机制，在某件事情执行之前，先做一些预热工作，然后才真正执行我们的目标。
（1）Proxy的声明
我们用new的方法对Proxy进行声明，基本格式如下：
new Proxy（{},{}）;需要注意的是这里是两个花括号，第一个花括号就相当于我们方法的主体，后边的花括号就是Proxy代理处理区域，相当于我们写钩子函数的地方。
将上述代码改进一下，完成在执行add方法前先在控制台输出一个"准备执行add方法"的文字。
var pro = new Proxy({
add: function (val) {
return val + 100;
},
name: '小红'
}, {
get:function(target,key,property){
console.log('准备执行add方法');
return target[key];
}
});
console.log(pro.name);结果为：先输出：准备执行add方法，在输出小红
总结：相当于在方法调用前的钩子函数。
下面来看看get方法中的一些参数：
get属性：
get属性是在你得到某对象属性值时预处理的方法，他接受三个参数
- target：得到的目标值
- key：目标的key值，相当于对象的属性
- property：被获取的属性名。
var pro = new Proxy({
add: function (val) {
return val + 10;
},
name: '张三'
}, {
set:function(target,key,value,receiver){
console.log(`setting ${key} = ${value}`);
return target[key] = value;
}
});
pro.name="李四";
console.log(pro.name); //李四输出结果为:
set属性
set属性是值你要改变Proxy属性值时，进行的预先处理。它接收四个参数。
- target:目标值。
- key：目标的Key值。
- value：要改变的值。
- receiver：改变前的原始值。
3.apply的使用
方法的预处理。
apply的作用是调用内部的方法，它使用在方法体是一个匿名函数时。看下边的代码
let target = function () {
return 'doing target';
};
var handler = {
apply(target, ctx, args) {
console.log('do apply');
return Reflect.apply(...arguments);
}
}
var pro = new Proxy(target, handler);
console.log(pro());apply方法可以接收三个参数，依次是目标对象，目标对象的上下文对象（this）和目标对象的参数数组。
上面代码中，每当执行proxy函数（直接调用或call和apply调用），就会被apply方法拦截。
每天学习一点，加油。待续。。。。