一、什么是代理模式
代理模式（英语：Proxy Pattern）是程序设计中的一种设计模式。
所谓的代理者是指一个种别可以作为其它东西的接口。代理者可以作任何东西的接口：网络连接、内存中的大工具、文件或其它昂贵或无法复制的资源。
著名的代理模式例子为引用计数（英语：reference counting）指针工具。
当一个繁芜工具的多份副本须存在时，代理模式可以结合享元模式以减少内存用量。范例作法是创建一个繁芜工具及多个代理者，每个代理者会引用到原来的繁芜工具。而浸染在代理者的运算会转送到原来工具。一旦所有的代理者都不存在时，繁芜工具会被移除。
上面是维基百科中对代理模式的一个整体的定义.而在JavaScript中代理模式的详细表现形式便是ES6中的新增工具---Proxy
Proxy定义
Proxy工具用于定义基本操作的自定义行为（如属性查找，赋值，列举，函数调用等）。
大略来说: Proxy 工具便是可以让你去对JavaScript中的一相符法工具的基本操作进行自定义.然后用你自定义的操作去覆盖其工具的基本操作.也便是当一个工具去实行一个基本操作时,其实行的过程和结果是你自定义的,而不是工具的。
利用 Proxy 的好处是：工具只需关注于核心逻辑，一些非核心的逻辑（如：读取或设置工具的某些属性前记录日志；设置工具的某些属性值前，须要验证；某些属性的访问掌握等）可以让 Proxy 来做。从而达到关注点分离，降级工具繁芜度的目的。
Proxy语法
let target = { /目标工具的属性/ }; //目标工具
let handler = { /用来定制拦截操作/ }; //拦截层工具
let proxy = new Proxy(target, handler); //实例化
Proxy 工具的所有用法，都是上面这种形式，不同的只是handler参数的写法（所要利用的功能不同，写法不同）。
new Proxy()表示天生一个Proxy实例，作为代理工具；
target表示所要拦截的目标工具；
handler声明了代理 target 的指定行为，表示一个用来定制拦截行为的工具。
举个例子解释
let target = { name: "张三" }; //target目标工具
console.log(target.name);
//未拦截时，结果是原来的 "张三"
let handler = {
get: function (target, prokey) {
console.log(target, prokey);
// target: 被代理工具本身 {name: '张三'}
// prokey: 当前读取or修正的工具键 'name'
return "李四"; //定制拦截行为，将 name 改为李四
},
};
//实例化一个proxy工具 调用 b(拦截层) 对 a(目标工具) 进行 拦截 与 修正
let p = new Proxy(target, handler); //代理工具实例化，参数是 target 和 handler
console.log(p.name); //结果改变了 '李四'
如果handler没有设置拦截，就等同于直接通向原工具。
var target = {};
var proxy = new Proxy(target, {});
proxy.a = "a";
console.log(target.a); //a
二、Proxy实例的方法
ES6 中的proxy目前供应了13种可代理操作拦截的行为。
get（）
get方法用于拦截某个属性的读取操作，可以接管三个参数，依次为目标工具、属性名和 proxy 实例本身（严格地说，是操作行为所针对的工具），个中末了一个参数可选。
声明一个target工具，访问一个工具自身不存在的属性时，返回的是undefind，但是我们可以拦截该行为，并将该操作修正为error（抛出错误）
未拦截前
let target = {
name: "李白",
};
console.log(target.age); //结果为undefind
拦截后
let person = {
name: "李白",
};
let proxy = new Proxy(person, {
get: function (target, propKey) {
if (propKey in target) {
return target[propKey];
} else {
throw new ReferenceError(
'Prop name "' + propKey + '" does not exist.'
);
}
},
});
console.log(proxy.name); // "李白"
console.log(proxy.age); // 抛出一个缺点
// ReferenceError: Prop name "age" does not exist.
前面说到，第三个参数是proxy本身，我们利用proxy供应的属性getReceiver与proxy比较验证
let a = {}; //目标工具
let myProxy = new Proxy(a, {
get: function (target, key, receiver) {
return receiver;
},
});
if (myProxy.getReceiver === myProxy) {
console.log("true");
} else {
console.log("false");
}
set（）
set用于拦截某个属性的赋值操作，依次为目标工具、属性名、属性值和 proxy 实例本身，个中末了一个参数可选。
举个例子：假设目标工具的age属性，利用set给age属性的属性值添加条件，担保age的属性值符合哀求
let a = {}; //目标工具
let b = {
set: function (target, key, value) {
if (key === "age") {
if (value > 100) {
//抛出一个缺点
throw new RangeError("The age seems invalid");
}
}
//知足条件 直接保存值
target[key] = value;
return true;
},
};
let myproxy = new Proxy(a, b);
myproxy.age = 80; //命名一个小于100的值，正常运行
console.log(myproxy.age); //正常运行
myproxy.age = 200; //命名一个大于100的值
console.log(myproxy.age);
利用proxy调用第四个参数判断是否与已知值全等
let b = {
set: function (target, key, value, receiver) {
target[key] = receiver;
return true;
},
};
let myproxy = new Proxy({}, b);
myproxy.name = myproxy; //将name属性赋值为myproxy
if (myproxy.name === myproxy) {
//判断是否为myproxy
console.log("true");
} else {
console.log("false");
}
结果
apply（）
apply（）拦截函数的调用，接管三个参数，分别是目标工具、目标工具的高下文工具（this）和目标工具的参数数组。
举个例子:
var target = function () {
return "target";
};
var handler = {
apply: function () {
return "proxy";
},
};
const p = new Proxy(target, handler);
console.log(p()); // proxy
变量p是 Proxy 的实例，当它作为函数调用时p(），就会被apply方法拦截，返回一个字符串。
has（）
has（）用来拦截HasProperty操作，即判断工具是否具有某个属性时，这个方法会生效。范例的操作便是in运算符。接管两个参数，分别是目标工具、需查询的属性名。
var handler = {
has(target, key) {
return key in target;
},
};
var target = { prop: "foo" };
var proxy = new Proxy(target, handler);
console.log("prop" in proxy); // true
console.log("propa" in proxy); // false
如果原工具不可配置或者禁止扩展，这时has拦截会报错。
const obj = { a: 10 };
Object.preventExtensions(obj);
var p = new Proxy(obj, {
has: function (target, prop) {
return false;
},
});
console.log("a" in p);
has方法拦截的是HasProperty操作，而不是HasOwnProperty操作，即has方法赓续定一个属性是工具自身的属性，还是继续的属性。
construct()
construct()拦截了new操作，接管三个参数，目标工具，布局函数的参数工具，new命令浸染的布局函数。
const p = new Proxy(function () {}, {
construct: function (target, args) {
console.log("called: " + args.join(", "));
return { value: args[0] 10 };
},
});
new p(1).value;
construct()返回的必须是一个工具，否则会报错。
const p = new Proxy(function () {}, {
construct: function (target, argumentsList) {
return 1;
},
});
new p(); // 报错
// Uncaught TypeError: 'construct' on proxy: trap returned non-object ('1')
更多的处理函数
handler工具内还有以下处理函数：
defineProperty()：拦截对工具的 Object.defineProperty() 操作
getOwnPropertyDescriptor()：Object.getOwnPropertyDescriptor 调用挟制
getPrototypeOf() ：拦截工具原型的读取操作
isExtensible()：拦截对工具的 Object.isExtensible()
ownKeys()：Object.getOwnPropertyNames 和Object.getOwnPropertySymbols的调用挟制
preventExtensions()：对Object.preventExtensions()的拦截
setPrototypeOf()：拦截 Object.setPrototypeOf()
总结
深入理解了Proxy之后，真的会被它强大的代理拦截功能所折服，在它的根本上我们可以创建险些任何我们想要的相应式系统，它像是一个硕大的地基，至于地基之上须要建筑什么，全由我们自己节制！
看完本篇文章相信你已经对Proxy有了深入的理解，学习Proxy是我们学习像Vue3这种相应式事理的第一步，大家加油！
