1. 首先我们先清楚一点，什么是代理？
可能你上网搜索的时候会发现关于代理的理解太过于死板或者不易理解。我给大家说两个比喻来告诉大家什么是代理。
- 你喜欢一个女孩子但是不敢要别人的微信号，于是你朋友去帮你要的那个女孩子的微信号。
- 你在家打游戏，忽然感觉到饿了，但是又不想自己做饭。于是你女朋友出门买菜并做饭给你吃。
2. 当我们理解了什么是代理之后，那么什么又是JavaScript代理呢？
官网显示的资料是：Proxy。
Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。
在上述的描述中，通过代理我们可以自动的要到心仪女孩子的微信号、自动吃到热腾腾的饭菜。那么在JavaScript中，代理也可以做到类似的事情。
3. 初识JS中的代理
3.1 get()
get方法用于拦截某个属性的读取操作，可以接受三个参数，依次为目标对象、属性名和 proxy 实例本身（严格地说，是操作行为所针对的对象），其中最后一个参数可选。
就拿日常生活中的暗恋为例：
1
2
3
4
5
| let man = {
name: "李雷",
love: "韩梅梅"
};
console.log(man.love);
|
此时不用想都知道打印出来的结果为韩梅梅，但是生活总不可能顺风顺水的，总是有各种各样的代理人出现在你身边，下面再看一个例子：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| let man = {
name: "李雷",
love: "韩梅梅"
};
let proxy = new Proxy(man,{
get(target,property){
if(property === "love"){
return "学习最重要";
}
return target[property];
}
});
console.log(man.love);
console.log(proxy.love);
|
此时我们会看见打印man.love的时候还是韩梅梅，因为李雷真的很爱韩梅梅，但是当打印proxy.love的时候，就会说谎告诉大家学习最重要。
通过上面举的例子，我们已经了解了代理能够拦截对象属性的获取，可以隐藏真实的属性值而返回代理想要返回的结果。
那么对于对象属性的赋值呢？请接着往下看吧。
3.2 set()
set方法用来拦截某个属性的赋值操作，可以接受四个参数，依次为目标对象、属性名、属性值和 Proxy 实例本身，其中最后一个参数可选。
接着拿上面李雷和韩梅梅举例，李雷很爱韩梅梅：
1
2
3
4
5
6
7
8
| let man = {
name: "李雷",
lover:"韩梅梅",
love: true
};
man.love = false;
console.log(man);
|
看上面的代码时，当执行man.love = false的时候，就可以轻易的切断李雷爱韩梅梅，但是当我们使用代理的时候结果就会大有不同,接着看如下代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| let man = {
name: "李雷",
lover:"韩梅梅",
love: true
};
let proxy = new Proxy(man,{
set(target,property,value){
if(property === "love" && value !== true){
throw Error("嘿嘿嘿！你切不断我对韩梅梅的喜爱！");
}
target[property] = value;
}
});
proxy.love = false;
|
此时当你修改proxy.love = false;的时候，控制台会抛出我们写的错误信息，如下图所示：
通过上面的内容，我们大体上了解了Proxy的一些用法，其实上面介绍的知识Proxy的冰山一角，它还有很多的内容需要大家自行上网进行学习，我在这里只是给大家打开新世界的一道门而已。
我在官网上找了一幅图，是关于Proxy支持的拦截操作一览，一共有13种，如下图所示：
更多的学习内容链接如下：http://es6.ruanyifeng.com/#docs/proxy
