1. 代理和反射
代理是什么？
通过调用 new Proxy() ，你可以创建一个代理用来替代另一个对象（被称之为目目标对象） ，这个代理对目标对象进行了虚拟，因此该代理与该目标对象表面上可以被当作同一个对象来对待。代理允许你拦截目标对象上的底层操作，而这本来是JS引擎的内部能力，拦截行为适用了一个能响应特定操作的函数（被称之为陷阱）；
反射是什么？
被Reflect对象所代表的反射接口，是给底层操作提供默认行为的方法的集合，这些操作是能够被代理重写的。每个代理陷阱都有一个对应的反射方法，每个方法都与对应的陷阱函数同名，并且接收的参数也与之一致。
创建一个简单的代理
使用Proxy构建可以创建一个简单的代理对象，需要传递两个参数：目标对象以及一个处理器，后者是定义一个或多个陷阱函数的对象。如果不定义陷阱函数，则依然使用目标对象的默认行为。
常用陷阱函数
1 基本陷阱函数
（1）.使用Set陷阱函数验证属性值
假如有这样一个场景，必须要求对象的属性值必须只能是数值，这就意味着该对象每个新增属性时都要被验证，并且在属性不为数值属性时就应该抛出错误。因此就需要使用set陷阱函数来重写set函数的默认行为，set陷阱函数接收四个参数：
- trapTarget：代理的目标对象；
- key：需要写入的属性的键；
- value：被写入属性的值；
- receiver：操作发生的对象（通常是代理对象）
Reflect.set()是set陷阱函数对应的反射方法，同时也是set操作的默认行为，Reflect.set()方法与set陷阱函数一样，能够接受四个参数。
示例代码：
//set陷阱函数
let target = {
name:‘target‘
}
let proxy = new Proxy(target,{
set(tarpTarget,key,value,receiver){
if(!tarpTarget.hasOwnProperty(key)){
if(isNaN(value)){
throw new Error(‘property must be number‘);
}
}
return Reflect.set(tarpTarget,key,value,receiver);
}
});
proxy.msg=‘hello proxy‘; //Uncaught Error: property must be number
通过set陷阱函数就可以检测设置属性时属性值的类型，当属性值不是数字时，就会抛出错误。
（2）.使用get陷阱函数进行对象外形验证
对象外形（Object Shape）指的是对象已有的属性与方法的集合。能够使用代理很方便进行对象外形验证。由于使用属性验证只需要在读取属性时被触发，因此只需要使用get陷阱函数。该函数接受三个参数：
- trapTarget：代理的目标对象；
- key：需要读取的属性的键；
- receiver：操作发生的对象（通常是代理对象）；
相应的Reflect.get()方法同样拥有这三个参数。进行对象外形验证的示例代码：
//get陷阱函数
let target={
name:‘hello world‘
}
let proxy = new Proxy(target,{
get(tarpTarget,key,receiver){
if(!(key in tarpTarget)){
throw new Error(‘不存在该对象‘);
}
return Reflect.get(tarpTarget,key,receiver);
}
});
console.log(proxy.name); //hello world
console.log(proxy.age); // Uncaught Error: 不存在该对象
使用get陷阱函数进行对象外形验证，由于target对象存在name属性，所以可以正常返回，当获取age属性时，由于该属性并不存在，所以会抛出错误。
（3）.使用has陷阱函数隐藏属性
in运算符用于判断指定对象中是否存在某个属性，如果对象的属性名与指定的字符串或符号值相匹配，那么in运算符就会返回true。无论该属性是对象自身的属性还是其原型的属性。
has陷阱函数会在使用in运算符的情况下被调用，控制in运算符返回不同的结果，has陷阱函数会传入两个参数：
- trapTarget：代理的目标对象；
- key：属性键；
Reflect.has()方法接收相同的参数，并向in运算符返回默认的响应结果，用于返回默认响应结果。
例如想要隐藏value属性：
//has陷阱函数
let target = {
value:‘hello world‘
}
let proxy = new Proxy(target,{
has(tarpTarget,key){
if(Object.is(key,‘value‘)){
return false;
}
Reflect.has(tarpTarget,key);
}
})
console.log(‘value‘ in proxy); //false
使用has陷阱函数，能够控制in运算符的结果，value属性在target对象中存在，通过代理的has陷阱函数使得在检查value属性时返回false，达到隐藏属性的效果。
（4）.使用deleteProperty陷阱函数避免属性被删除
deleteProperty 陷阱函数会在使用delete 运算符删除对象属性时被调用，该方法接收两个参数：
- trapTarget：代理的目标对象；
- key：需要删除的键；
Reflect.deleteProperty() 方法也接受这两个参数，并提供了 deleteProperty 陷阱函数的默认实现。你可以结合 Reflect.deleteProperty()方法以及 deleteProperty 陷阱函数，来修改 delete 运算符的行为。例如，能确保 value 属性不被删除：
let target = {
name: "target",
value: 42
};
let proxy = new Proxy(target, {
deleteProperty(trapTarget, key) {
if (key === "value") {
return false;
} else {
return Reflect.deleteProperty(trapTarget, key);
}
}
});
// 尝试删除 proxy.value
console.log("value" in proxy); // true
let result1 = delete proxy.value;
console.log(result1); // false
2. 原型代理上的陷阱函数
在调用Object.setPrototypeOf()和getPrototypeOf()方法时，可以使用setPrototypeOf和getPrototypeOf陷阱函数来影响Object上相应的两个方法的效果。setPrototypeOf陷阱函数接收两个参数：
- trapTarget：代理的目标对象；
- proto：需要被用作原型的对象；
setPrototypeOf()方法与Reflect.setPrototypeOf()传入相同的参数。另外，getPrototypeOf陷阱函数只接收trapTarget参数，Reflect.getPrototype也只接收一个参数。
例如，通过返回 null 隐藏了代理对象的原型，并且使得该原型不可被修改：
//原型代理上的陷阱函数
let target = {};
let proxy = new Proxy(target, {
getPrototypeOf(trapTarget) {
return null;
},
setPrototypeOf(trapTarget, proto) {
return false;
}
});
let targetProto = Object.getPrototypeOf(target);
let proxyProto = Object.getPrototypeOf(proxy);
console.log(targetProto === Object.prototype); // true
console.log(proxyProto === Object.prototype); // false
console.log(proxyProto); // null
// 成功
Object.setPrototypeOf(target, {});
// 抛出错误
Object.setPrototypeOf(proxy, {});
使用 target 对象作为参数调用Object.getPrototypeOf() 会返回一个对象值；而使用 proxy 对象调用该方法则会返回null ，因为 getPrototypeOf 陷阱函数被调用了。类似的，使用 target 去调用Object.setPrototypeOf() 会成功；而由于 setPrototypeOf 陷阱函数的存在，使用 proxy则会引发错误。
3 对象可扩展性的陷阱函数
ES5 通过Object.preventExtensions() 与 Object.isExtensible() 方法给对象增加了可扩展性。而 ES6 则通过 preventExtensions 与 isExtensible 陷阱函数允许代理拦截对于底层对象的方法调用。这两个陷阱函数都接受名为 trapTarget 的单个参数，此参数代表代理的目标对象。 isExtensible 陷阱函数必须返回一个布尔值用于表明目标对象是否可被扩展，而 preventExtensions 陷阱函数也需要返回一个布尔值，用于表明操作是否已成功。同时也存在Reflect.preventExtensions() 与Reflect.isExtensible() 方法，用于实现默认的行为。这两个方法都返回布尔值，因此它们可以在对应的陷阱函数内直接使用。
let target = {};
let proxy = new Proxy(target, {
isExtensible(trapTarget) {
return Reflect.isExtensible(trapTarget);
},
preventExtensions(trapTarget) {
return false
}
});
console.log(Object.isExtensible(target)); // true
console.log(Object.isExtensible(proxy)); // true
Object.preventExtensions(proxy);
console.log(Object.isExtensible(target)); // true
console.log(Object.isExtensible(proxy)); // true
4 属性描述符的陷阱函数
ES5 最重要的特征之一就是引入了Object.defineProperty()方法用于定义属性的特性。在JS 之前的版本中，没有方法可以定义一个访问器属性，也不能让属性变成只读或是不可枚举。而这些特性都能够利用 Object.defineProperty()方法来实现，并且你还可以利用Object.getOwnPropertyDescriptor()方法来检索这些特性。代理允许你使用 defineProperty 与 getOwnPropertyDescriptor 陷阱函数，来分别拦截对于Object.defineProperty() 与 Object.getOwnPropertyDescriptor() 的调用。 defineProperty
陷阱函数接受下列三个参数：
- trapTarget ：需要被定义属性的对象（即代理的目标对象） ；
- key ：属性的键（字符串类型或符号类型） ；
- descriptor ：为该属性准备的描述符对象。
5 ownKeys陷阱函数
ownKeys 代理陷阱拦截了内部方法 [[OwnPropertyKeys]] ，并允许你返回一个数组用于重写该行为。返回的这个数组会被用于四个方法：
Object.keys() 方法、Object.getOwnPropertyNames()
方法、Object.getOwnPropertySymbols()方法与Object.assign() 方法，其中 Object.assign() 方法会使用该数组来决定哪些属性会被复制。
ownKeys 陷阱函数接受单个参数，即目标对象，同时必须返回一个数组或者一个类数组对象。你可以使用 ownKeys 陷阱函数去过滤特定的属性，以避免这些属性被Object.keys() 方法、Object.getOwnPropertyNames() 方法、Object.getOwnPropertySymbols()
方法或 Object.assign() 方法使用。
6 apply与construct陷阱函数
只有 apply 与 construct 要求代理目标对象必须是一个函数。函数拥有两个内部方法：[[Call]] 与 [[Construct]] ，前者会在函数被直接调用时执行，而后者会在函数被使用
new 运算符调用时执行。 apply 与 construct陷阱函数对应着这两个内部方法，并允许你对其进行重写。apply 陷阱函数会接收到下列三个参数（
Reflect.apply() 也会接收这些参数） ：
- trapTarget ：被执行的函数（即代理的目标对象） ；
- thisArg ：调用过程中函数内部的 this 值；
- argumentsList
：被传递给函数的参数数组。
当使用 new 去执行函数时， construct 陷阱函数会被调用并接收到下列两个参数：
- trapTarget ：被执行的函数（即代理的目标对象） ；
- argumentsList
：被传递给函数的参数数组。
Reflect.construct()方法同样会接收到这两个参数，还会收到可选的第三参数 newTarget，如果提供了此参数，则它就指定了函数内部的 new.target 值。
使用apply和construct陷阱函数有这样一些应用场景：
验证函数的参数
假如需要保证所有参数都是某个特定类型，可使用
apply 陷阱函数进行验证：
//apply和construct陷阱函数
let sum = function (arr=[]) {
return arr.reduce((previous,current)=>previous+current);
}
let proxy = new Proxy(sum,{
apply(trapTarget,thisArg,argumentList){
argumentList[0].forEach((item)=>{
if(typeof item != ‘number‘){
throw new Error(‘不是数字类型‘);
}
})
return Reflect.apply(trapTarget,thisArg,argumentList);
},
construct(trapTarget,argumentList){
throw new Error(‘不能使用new‘);
}
});
console.log(proxy([1,2,3,4])); // 10
console.log(proxy([1, "2", 3, 4]));//Uncaught Error: 不是数字类型Uncaught Error: 不是数字类型
let result = new proxy(); //Uncaught Error: 不能使用new
可被撤销的代理
在被创建之后，代理通常就不能再从目标对象上被解绑。有的情况下你可能想撤销一个代理以便让它不能再被使用。当你想通过公共接口向外提供一个安全的对象，并且要求要随时都能切断对某些功能的访问，这种情况下可被撤销的代理就会非常有用。
你可以使用Proxy.revocable()方法来创建一个可被撤销的代理，该方法接受的参数与Proxy 构造器的相同：一个目标对象、一个代理处理器，而返回值是包含下列属性的一个对象：
- proxy ：可被撤销的代理对象；
- revoke ：用于撤销代理的函数；
当 revoke() 函数被调用后，就不能再对该 proxy 对象进行更多操作。例如：
let target = {
name: "target"
};
let { proxy, revoke } = Proxy.revocable(target, {});
console.log(proxy.name); // "target"
revoke();
// 抛出错误
console.log(proxy.name);
总结
- 在 ES6 之前，特定对象（例如数组）
会显示出一些非常规的、无法被开发者复制的行为，而代理的出现改变了这种情况。代理允许你为一些 JS 底层操作自行定义非常规行为，因此你就可以通过代理陷阱来复制 JS 内置对象的所有行为。在各种不同操作发生时（例如对于 in运算符的使用）
，这些代理陷阱会在后台被调用。 - 反射接口也是在 ES6
中引入的，允许开发者为每个代理陷阱实现默认的行为。每个代理陷阱在 Reflect 对象（ES6 的另一个新特性） 上都有一个同名的对应方法。将代理陷阱与反射接口方法结合使用，就可以在特定条件下让一些操作有不同的表现，有别于默认的内置行为。 - 可被撤销的代理是一种特殊的代理，可以使用 revoke() 函数去有效禁用。 revoke() 函数终结了代理的所有功能，因此在它被调用之后，所有与代理属性交互的意图都会导致抛出错误。
- 尽管直接使用代理是最有力的使用方式，但你也可以把代理用作另一个对象的原型。但只有很少的代理陷阱能在作为原型的代理上被有效使用，包括
get 、 set 与 has 这几个，这让这方面的用例变得十分有限
原文地址：https://www.cnblogs.com/hjy-21/p/12381152.html