1. 概述
1.1 理解
在Es6 中 提供了原生的 Proxy 构造函数，可以用来生成 Proxy实例。
let proxy = new Proxy(target, handler)
Proxy 对象的所有用法，都是上面的形式，不同的只是handler参数的写法。其中new Proxy() 表示生成一个 Proxy实例，target 参数表示所有拦截的目标对象， handler 参数也是一个对象，用来定制拦截行为。如下：
let proxy = new Proxy({}, {
get: function(target, property) {
return 35
}
})
proxy.time // 35
proxy.name // 35
proxy.title // 35
解读：
在上面中，作为构造函数，Proxy接受两个参数。第一个参数即所要代理的目标对象，如果没有 Proxy的介入，操作原来要访问的就是这个对象。第二个参数是一个配置对象，用来对每个代理对象的操作，提供具体的函数和拦截操作。上述代码中有一个 get 函数，用来拦截对目标对象属性的访问请求。
另外，要使 Proxy起作用，必须针对 Proxy 实例进行操作，而不是针对目标对象进行操作。
如果 handler 没有设置任何拦截，那就等同于直接通向原对象。如下：
let target = {}
let handler = {}
let proxy = new Proxy(target, handler)
proxy.a = 'b'
target.a = 'b'
对于上面的例子，我们可以讲Proxy对象，设置到 object.proxy属性，从而可以在object对象上调用。
let object = {proxy: new Proxy(target, handler)}
Proxy 实例也可以作为其他对象的原型对象。
let proxy = new Proxy({}, {
get: function(target, property) {
retrun 35
}
})
let obj = Object.create(proxy)
obj.time // 35
另外同一个拦截器，可以设置多个拦截操作。
常用的Proxy支持的拦截操作如下：
- get(target, propKey, receiver): 拦截对象属性的读取，比如 proxy.foo 和 proxy['foo']
- set(target, propKey, value, receiver): 拦截对象属性的设置，比如 proxy.foo = v 或 proxy['foo'] = v， 返回一个布尔值
- has(target, proKey): 拦截propKey in proxy的操作，返回一个布尔值
- apply(target, object, args): 拦截Proxy 实例作为函数调用的操作，比如 proxy(...args)、proxy.call(object, ...args) 、 proxy.apply(...)。
- deleteProperty(target, proKey): 拦截 delete proxy[propKey]的操作，返回一个布尔值
- ownKeys(target): 拦截 Object.getOwnProPertyNames(proxy),返回一个数组。该方法返回目标对象所有自身的属性的属性名，而Object.keys() 的返回结果仅包括目标对象自身的可遍历属性。
1.2 get()
let p = {
name: '李四'
}
let proxy = new Proxy(p, {
get: function(target, property) {
if (property in target) {
retrun target[property]
} else {
console.log('报错')
}
}
})
proxy.name // '李四'
proxy.age // '报错'
注意点
- get方法可以继承
- get方法可以进行链式操作
1.3 set
let v = {
set: function(obj, prop, value) {
if (prop === 'age') {
if(!Number.isInteger(value)) {
console.log('报错')
}
if(value > 200) {
console.log('成功')
}
obj[prop] = value
}
}
}
let p = new Proxy({}, v)
p.age = 100
p.age // 100
p.age = 'n'
p.age // 报错
利用set方法，可以数据绑定，即每当对象发生变化时，会自动更新Dom
如果目标对象自身的某个属性，不可写且不可配置，那么Set 方法将不起作用。
1.4 apply()
let h = {
apply(target, ctx, args) {
return Reflect.apply(...arguments)
}
}
let target = function() {return 'haha')
let h = {
apply: function() {
return 'heihei'
}
}
let p = new Proxy(taraget, h)
p() // 'heihei'
1.5 has
has 方法可以接受两个参数，分别时目标对象、需要查询的属性名。
注意：has 方法拦截的时 HasProperty操作，而不是HasOwnProperty操作，即has 方法不判断一个属性是对象自身的属性，还是继承的属性。
1.6 construct
let h = {
construct(target, args, newTarget) {
retrun new target(...args)
}
}
target: 目标对象
args： 构造函数的参数对象
newTarget: 创造实例对象时，new命令作用的构造函数