1.概述
在了解钩Proxy之前，首先需要知道什么是钩子函数。所谓钩子函数，即当我们在操作一个对象或者方法时会有几种动作，比如：在运行函数前初始化一些数据，在改变对象值后做一些善后处理。这些都算钩子函数。Proxy的存在就可以让我们给函数加上这样的钩子函数，Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作。你也可以理解为在 执行方法前预处理一些代码。类似vue或react的生命周期。
2.定义
在学习Proxy之前，我们先定义一个对象。
var obj={
add:function(val){
return val+10;
},
name:'I am Proxy'
};
console.log(obj.add(10)); //20
console.log(obj.name); //I am Proxy
接着我们用new的方法对Proxy进行声明。可以看一下声明Proxy的基本形式。
new Proxy({},{});
需要注意的是这里是两个花括号，第一个花括号就相当于我们方法的主体，后边的花括号就是Proxy代理处理区域，相当于我们写钩子函数的地方。
现在把上边的obj对象改成我们的Proxy形式。
var obj={
add:function(val){
return val+10;
},
name:'I am Proxy'
};
var pro = new Proxy(obj, {
get:function(target,key,property){
console.log('我先执行');
console.log(target,key);
return target[key];
}
});
console.log(pro.name);
//我先执行
//obj对象,name
//I am Proxy
可以在控制台看到结果，先输出了我先执行。相当于在方法调用前的钩子函数。
属性-get（获取属性值前的预处理）
通过上例，我们把对象放进Proxy里面，那我们想要获取里面的内容怎么办，这就用到上例的get函数了。
get属性是在你得到对象属性值进行预处理的方法，他接受三个参数
- target：目标对象（这里即obj）
- key：调用的对象的属性（这里因为调用pro.name,所以这里为name）
- property：Proxy对象，这个不太常用，用法还在研究中。
注：1.get必须返回target[key]，即属性值，否则调用时是得不到值，为undefined
属性-set（改变属性值前的预处理）
现在在得到属性值前进行输出，我先执行，那我要修改属性值前进行一些预处理操作怎么办？
var obj={
add:function(val){
return val+10;
},
name:'I am Proxy'
};
var pro = new Proxy(obj, {
get:function(target,key,property){
console.log('获取值');
return target[key];
},
set:function(target,key,value,receiver){
console.log(`改变 ${key} = ${value}`);
return target[key] = value;
}
});
console.log(pro.name); //获取值
// I am Proxy
pro.name='我是预处理'; //改变 name = 我是预处理
console.log(pro.name);//获取值
// 我是预处理
set属性是值你要改变对象属性值时，进行的预先处理。它接收四个参数。
- target:目标对象（这里即obj）
- key：调用的对象的属性（这里因为调用pro.name,所以这里为name）
- value：要改变的值。
- receiver：Proxy对象（属性值改变前的对象），这个不太常用，用法还在研究中。
2.注：set必须返回target[key]，即属性值，若不返回，和get不一样。set调直接会报错而get为undefined
3.注：调用对象属性会执行get函数（这里console.log(pro.name)会调用get函数）；
改变对象属性值会执行set函数（这里pro.name='我是预处理'会调用set函数）；
