概述
Proxy 用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种“元编程”，即对编程语言进行编程
Proxy可以理解为，在目标对象之前假设一层“拦截”。外界对该对象进行访问，都必须先通过这层拦截
因此提供了一种机制，可以对外界的访问进行过滤和改写
Proxy原意是代理，在这里表示它来代理某些操作，可以译为“代理器”
var obj = new Proxy({}, {
get: function (target, key, receiver) {
console.log(`getting ${key}!`);
return Reflect.get(target, key, receiver);
},
set: function (target, key, value, receiver) {
console.log(`setting ${key}!`);
return Reflect.set(target, key, value, receiver);
}
});
上面代码对一个空对象架设了一层拦截，重定义了属性的读取（get）和设置（set）行为。
这里暂时先不解释具体的语法，只看运行结果。对设置了拦截行为的对象obj，去读写它的属性，就会得到下面的结果
obj.count = 1
// setting count!
++obj.count
// getting count!
// setting count!
// 2
上面代码说明，Proxy 实际上重载（overload）了点运算符，即用自己的定义覆盖了语言的原始定义。
ES6原生提供了Proxy构造函数，用来生成Proxy实例
var proxy = new Proxy(target, handler);
proxy对象的所有用法，都是这种形式，不同的是handler参数的写法。
其中，new Proxy（）表示生成一个Proxy实例，target参数表示所要拦截的目标对象，handler参数也是一个对象，用来定制拦截行为。
下面是另一个拦截读取属性行为的例子
var proxy = new Proxy({},{
get: function (target, property){
console.log(property)
return 35
}
})
proxy.time // 35
proxy.name // 35
proxy.title // 35
上面代码中，作为构造函数Proxy接受两个参数，第一个参数是所要代理的目标对象。如果没有Proxy的介入，操作原来要访问的就是这个对象；
第二个参数是一个配置对象，对于每一个被代理的操作，需要提供一个对应的处理函数，该函数将拦截对应的操作
比如，上面代码中，配置对象有一个get方法，用来拦截对目标对象属性的访问请求。get方法的两个参数分别是目标对象和所要访问的属性。
可以看到，由于拦截函数总是返回35，所以访问任何属性都得到35.
注意，要使得Proxy起作用，必须针对Proxy实例进行操作。而不是针对目标对象操作
如果handler没有设置任何拦截，那就等同于直接通向原对象。
var target = {};
var handler = {};
var proxy = new Proxy(target, handler);
proxy.a = 'b';
target.a // "b"
上面代码中，handler是一个空对象，没有任何拦截效果，访问proxy就等同于访问target
一个技巧是将Proxy对象，设置到object.proxy属性，从而可以在object对象上调用。
var object = { proxy: new Proxy(target， handler)}
Proxy实例也可以作为其他对象的原型对象
var proxy = new Proxy({}, {
get: function(target, property) {
return 35;
}
});
let obj = Object.create(proxy);
obj.time // 35
上述代码中，proxy对象是obj对象的原型，obj对象本身没有time属性，根据原型链，会在proxy上兑取该属性，导致被拦截
Proxy支持的拦截操作(handler)
1.get
get(target,propKey,revicer):拦截对象属性的读取，比如proxy.foo
2.set
set(target,propKey,value,reciver):拦截对象属性的设置，比如proxy.foo = 1,返回一个布尔值
3.has
has(target,propKey)：拦截propKey in proxy 的操作，返回一个布尔值
4.deleteProperty
拦截delete proxy[propKey]的操作，返回一个布尔值
5.ownKeys
ownKeys(target):
拦截:
Object.getOwnPropertyNames(Proxy)
Object.getOwnPropertySymbols(proxy)
Object.keys(proxy)
for...in循环
返回一个数组。该方法返回目标对象所有自身的属性的属性名，而Object.keys()的返回结果仅包括目标对象自身的可遍历属性
6.getOwnPropertyDescriptor
Object.getOwnPropertyDescriptor(proxy, propKey)，返回属性的描述对象
7.defineProperty
defineProperty(target, propKey, propDesc)
拦截：Object.defineProperty(proxy, propKey, propDesc）、Object.defineProperties(proxy, propDescs)，返回一个布尔值。
8.perventExtensions
Object.preventExtensions(proxy)，返回一个布尔值。
9.getPropertyOf
拦截Object.getPrototypeOf(proxy)，返回一个对象。
10.isExtensible
拦截Object.isExtensible(proxy)，返回一个布尔值。
11.setPrototypeOf
拦截Object.setPrototypeOf(proxy, proto)，返回一个布尔值。如果目标对象是函数，那么还有两种额外操作可以拦截。
12.apply
拦截 Proxy 实例作为函数调用的操作，比如proxy(...args)、proxy.call(object, ...args)、proxy.apply(...)
13.construct
拦截 Proxy 实例作为构造函数调用的操作，比如new proxy(...args)。
Proxy实例的方法
1.get()
get方法用于拦截某个属性的读取操作，可以接受三个参数，依次为目标对象、属性名、proxy实例本身，最后一个参数可选
2.set()
3.apply()
网友评论