Proxy
1. 概述
Proxy 用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种“元编程”（meta programming），即对编程语言进行编程。
我们可以把Proxy理解为一种拦截器，在我们通过Proxy来访问对象的时候，会先执行Proxy设置的一些过滤操作，就像我们在使用axios的时候，一般都会添拦截器，用来在发出请求前或者接收到res后先执行特定的操作。为我们提供一些定制化的功能。
2. Proxy的使用
ES6 提供Proxy的构造函数，用来生成代理器的实例：
var proxy = new Proxy(target, handler)
其中，target是需要执行代理操作的对象，而handler则是代理操作的配置对象，里面可以写一些代理规则。
一般来说，我们会将target的Proxy实例再挂载到target对象上，比如：
var obj = {name: 'bing', age: 23}
var handler = {
set: function(target, prop, val) {
console.log(`set ${prop}: ${val}`)
target[prop] = val
}
}
var proxy = new Proxy(obj, handler)
obj.proxy = proxy
obj.proxy.age = 24 // set age: 24
obj.age // 24
3. handler对象
前面我们提到了handler对象中是Proxy的过滤规则，所以我们在通过Proxy操作对象的时候，如果handler对象中有该操作的规则，那么就会执行规则，下面是Proxy支持拦截操作的类型：
-
get(target, propKey, receiver)：拦截对象属性的读取，比如proxy.foo和proxy['foo']。 -
set(target, propKey, value, receiver)：拦截对象属性的设置，比如proxy.foo = v``````或proxy['foo'] = v```，返回一个布尔值。 -
has(target, propKey)：拦截propKey in proxy的操作，返回一个布尔值。 -
deleteProperty(target, propKey)：拦截delete proxy[propKey]的操作，返回一个布尔值。 -
ownKeys(target)：拦截Object.getOwnPropertyNames(proxy)、Object.getOwnPropertySymbols(proxy)、Object.keys(proxy)、for...in循环，返回一个数组。该方法返回目标对象所有自身的属性的属性名，而Object.keys()的返回结果仅包括目标对象自身的可遍历属性。 -
getOwnPropertyDescriptor(target, propKey)：拦截Object.getOwnPropertyDescriptor(proxy, propKey)，返回属性的描述对象。 -
defineProperty(target, propKey, propDesc)：拦截Object.defineProperty(proxy, propKey, propDesc）、Object.defineProperties(proxy, propDescs)，返回一个布尔值。 -
preventExtensions(target)：拦截Object.preventExtensions(proxy)，返回一个布尔值。 -
getPrototypeOf(target)：拦截Object.getPrototypeOf(proxy)，返回一个对象。 -
isExtensible(target)：拦截Object.isExtensible(proxy)，返回一个布尔值。 -
setPrototypeOf(target, proto)：拦截Object.setPrototypeOf(proxy, proto)，返回一个布尔值。如果目标对象是函数，那么还有两种额外操作可以拦截。 -
apply(target, object, args)：拦截Proxy实例作为函数调用的操作，比如proxy(...args)、proxy.call(object, ...args)、proxy.apply(...)。 -
construct(target, args)：拦截Proxy实例作为构造函数调用的操作，比如new proxy(...args)。
4. Proxy的的运用
上周末我在写一个node接口的时候，我发现JavaScript的一个运算规则让我遇到了些许麻烦，因为我需要对一个对象的某个属性的值做累加操作，即obj[key] += number，但是我遇到一个问题，就是undefined + 1的值为NaN，而NaN和任何数的和都为NaN，所以我在执行累加操作前得先判断该变量的值是否为undefined。如果此时不使用拦截器，那么我必须得这么操作：
// keys: []
// res: {}
for (let key of keys) {
if (some condition) {
if (res.hasOwnProperty(key)) {
res[key] += 1
} else {
res[key] = 1
}
}
// 或者可以这么写
if (some condition) {
res[key] = (res[key] || 0) + 1
}
}
总之这样的写法是不够优雅的，但是如果采用代理的方式来实现的话，我们可以这么写：
// keys: []
// res: {}
var handler = {
get (target, prop) {
return target[prop] ? target[prop] : 0
}
}
res.py = new Proxy(res, handler)
for (let key of keys) {
if (some condition) {
res.py[key] += 1
}
}
通过代理来操作对象可以把我们预知的风险操作给规避掉，这样可以让我们在写逻辑代码时减少其他影响阅读的代码。
还有一个例子就是，我们知道在其他脚本语言中，比如Python中我们可以通过array[-1]来访问数组的最后一个元素，但是在JavaScript中我们必须通过array[array.length - 1]的方式来访问，这样的代码也是会对代码的可读性造成一定影响，所以我们可以将数组对象的get操作进行一定的改造，从而满足我们的需求：
function createArray(...elements) {
let handler = {
get(target, propKey, receiver) {
let index = Number(propKey);
if (index < 0) {
propKey = String(target.length + index);
}
return Reflect.get(target, propKey, receiver);
}
};
let target = [];
target.push(...elements);
return new Proxy(target, handler);
}
let arr = createArray('a', 'b', 'c');
arr[-1] // c
结束语
因为时间关系，这篇文章没法写得太长，还有一些很有趣的方法没有写，另外使用Proxy还有一些需要注意的问题，比如this的指向，有兴趣的读者可以去往参考链接一探究竟。
参考链接
作者：阮一峰
网友评论