阮一峰ES6教程读书笔记（十一）Proxy

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的指向，有兴趣的读者可以去往参考链接一探究竟。

参考链接

作者：阮一峰

链接：http://es6.ruanyifeng.com/#docs/proxy