长话简说JavaScript（9）代理基础

代理和反射为开发者提供了拦截并向基本操做嵌入额外行为的能力。具体地说，可以给目标对象定义一个关联的代理对象，而这个代理对象可以作为抽象的目标对象来使用。在对目标对象的各种操作影响目标对象之前可以在代理对象中对这些操作加以控制。

创建空代理

只作为一个抽象的目标对象。代理使用Proxy 构造函数创建的。接收参数目标对象和处理程序对象。

const target = { 
 id: 'target' 
}; 
const handler = {}; 
const proxy = new Proxy(target, handler); 
// id 属性会访问同一个值
console.log(target.id); // target 
console.log(proxy.id); // target 
// 给目标属性赋值会反映在两个对象上
// 因为两个对象访问的是同一个值
target.id = 'foo'; 
console.log(target.id); // foo 
console.log(proxy.id); // foo 
// 给代理属性赋值会反映在两个对象上
// 因为这个赋值会转移到目标对象
proxy.id = 'bar'; 
console.log(target.id); // bar 
console.log(proxy.id); // bar 
// hasOwnProperty()方法在两个地方
// 都会应用到目标对象
console.log(target.hasOwnProperty('id')); // true 
console.log(proxy.hasOwnProperty('id')); // true 
// Proxy.prototype 是 undefined 
// 因此不能使用 instanceof 操作符
console.log(target instanceof Proxy); // TypeError: Function has non-object prototype 
'undefined' in instanceof check 
console.log(proxy instanceof Proxy); // TypeError: Function has non-object prototype 
'undefined' in instanceof check 
// 严格相等可以用来区分代理和目标
console.log(target === proxy); // false

定义捕获器

在处理程序对象中定义的基本操作的拦截器。每个处理程序对象可以包含零个或多个捕获器，每个捕获器都对应一种基本操作，可以直接或间接在代理对象上调用。每次在代理对象上调用这些基本操作时，代理可以在这些操作传播到目标对象之前调用捕获器函数，从而拦截并修改相应的行为。
只要发生在代理对象上，就会触发 get()捕获器。

const target = { 
 foo: 'bar' 
}; 
const handler = { 
 // 捕获器在处理程序对象中以方法名为键
 get() { 
 return 'handler override'; 
 } 
}; 
const proxy = new Proxy(target, handler); 
console.log(target.foo); // bar 
console.log(proxy.foo); // handler override 
console.log(target['foo']); // bar 
console.log(proxy['foo']); // handler override 
console.log(Object.create(target)['foo']); // bar 
console.log(Object.create(proxy)['foo']); // handler override

捕获器参数和反射 API

所有捕获器都可以访问相应的参数，基于这些参数可以重建被捕获方法的原始行为。
get()捕获器会接收到目标对象、要查询的属性和代理对象三个参数。

const target = { 
 foo: 'bar' 
}; 
const handler = {
 get(trapTarget, property, receiver) { 
 console.log(trapTarget === target); 
 console.log(property); 
 console.log(receiver === proxy); 
 } 
}; 
const proxy = new Proxy(target, handler); 
proxy.foo; 
// true 
// foo 
// true

所有捕获器都可以基于自己的参数重建原始操作，不是像get()那麽简单我们不需要手动重建原始行为，可以通过调用全局reflect对象上的同名方法来轻松重建。
处理程序对象中所有可以捕获的方法都有对应的反射（Reflect）API 方法。这些方法与捕获器拦截的方法具有相同的名称和函数签名，而且也具有与被拦截方法相同的行为。

const target = { 
 foo: 'bar' 
};
const handler = { 
 get: Reflect.get 
}; 
const proxy = new Proxy(target, handler); 
console.log(proxy.foo); // bar 
console.log(target.foo); // bar

简化

const target = { 
 foo: 'bar' 
}; 
const proxy = new Proxy(target, Reflect); 
console.log(proxy.foo); // bar 
console.log(target.foo); // bar

捕获器不变式

使用捕获器几乎可以改变所有基本方法的行为，但也不是没有限制。每个不捕获器的方法都知道目标对象上下文，捕获函数签名，捕获处理程序的行为必须遵循“捕获器不变式”。捕获器不变式因方法不同而异，都有防止捕获器定义出现过于反常的行为。
例如目标对象不可配置不可读，捕获器返回一个与该属性不同的值时抛出异常。

const target = {}; 
Object.defineProperty(target, 'foo', { 
 configurable: false, 
 writable: false, 
 value: 'bar' 
}); 
const handler = { 
 get() { 
 return 'qux'; 
 } 
}; 
const proxy = new Proxy(target, handler); 
console.log(proxy.foo); 
// TypeError

可撤销代理

中断代理对象与目标对象之间的联系。
Proxy中的revocable() 方法，支持撤销代理对象与目标对象的关联，撤销代理的操作是不可逆的。撤销函数（revoke()）是幂等的，调用多少次的结果都一样，撤销代理之后在调用代理会抛出TypeError。

const target = { 
 foo: 'bar' 
}; 
const handler = { 
 get() { 
 return 'intercepted'; 
 } 
}; 
const { proxy, revoke } = Proxy.revocable(target, handler); 
console.log(proxy.foo); // intercepted 
console.log(target.foo); // bar 
revoke(); 
console.log(proxy.foo); // TypeError

实用反射 API

有些情况下应该优先使用反射API
反射 API 与对象 API
反射API并不限于捕获处理程序，大多数反射API方法在 Object 类型上有对应的方法。
状态标记
执行的操作是否成功，称作“状态标记”。
提供标记状态：
 Reflect.defineProperty()
 Reflect.preventExtensions()
 Reflect.setPrototypeOf()
 Reflect.set()
 Reflect.deleteProperty()

const o = {}; 
if(Reflect.defineProperty(o, 'foo', {value: 'bar'})) { 
 console.log('success'); 
} else { 
 console.log('failure'); 
}

用一等函数替代操作符
 Reflect.get()：可以替代对象属性访问操作符。
 Reflect.set()：可以替代=赋值操作符。
 Reflect.has()：可以替代 in 操作符或 with()。  Reflect.deleteProperty()：可以替代 delete 操作符。
 Reflect.construct()：可以替代 new 操作符。
安全地应用函数

Reflect.apply(myFunc, thisVal, argumentsList);

代理另一个代理

代理可以拦截反射 API 的操作，而这意味着完全可以创建一个代理，通过它去代理另一个代理。

const target = { 
 foo: 'bar' 
}; 
const firstProxy = new Proxy(target, { 
 get() { 
 console.log('first proxy'); 
 return Reflect.get(...arguments); 
 } 
}); 
const secondProxy = new Proxy(firstProxy, { 
 get() { 
 console.log('second proxy'); 
 return Reflect.get(...arguments); 
 } 
}); 
console.log(secondProxy.foo); 
// second proxy 
// first proxy 
// bar