【译】ES 6 代理 (Proxy) 简介

[hsipeng]

• 原文 Introducing Javascript ES6 Proxies
• 作者 Ben Garrison

---

ES 6 代理 (Proxy) 简介

代理 (Proxy) 对象是ES 6 中的新特性之一。 代理对象是为了方便开发者自定义一些基本操作 (如 查询属性、 赋值、 枚举、 执行方法等 ) 而定义的。

在进行下面讲解之前，你可能会觉得一些名词/理论很陌生，我建议你先看看下面的介绍，之后你就会发现
代理 (Proxy) 原理实际上很简单很实用。

三个名词定义如下：

• handler ---- 用来包含(traps) 的模版对象
• traps ---- 提供来访问代理对象属性的一些方法
• target ---- 代理对象虚拟化的对象

你可以在这里查看完整的traps 方法列表。

下面我们来看看一些例子和实际应用。

语法

下面是一个 Proxy 语法使用的例子。 在这里我们传入了两个参数，一个target (目标对象，这里我们传入了一个空对象), 一个handler (一个模版对象)。

Proxy 语法

普通对象访问自身属性

普通对象访问自身属性
上面的代码片段，我们创建了一个对象包含了两个属性( reason 和 code)。 我们可以看到在控制台的第 7 行 和第 8 行显示出了对应的值。然后在第 9 行 ， 当我们尝试访问一个不存在的属性时 (bear) ， 返回了一个undefined。

代理对象访问属性

代理对象访问属性

看起来比上面的普通对象代码要多一些，我们来分析下代码。 我们用 GET trap 构建了一个模版对象(line 3) ， 模版对象( handler ) 将目标对象和请求的属性名传递给 trap 。在第 11 行 我们创建了和上面普通对象的例子。我们的代理 (Proxy ) 在第 16 行 实现。

和上面普通对象访问自身属性一样，在 18 行 和 19 行 同样返回的相同的值。但是在 20 行 控制台输出了 -
“ key does not exist （属性不存在）”。

我们已经实现了在自定义的代理对象 ( Proxy ) 中覆盖默认的方法。

通过代理强制进行属性值的格式校验

通过代理强制进行属性值的格式校验

在这个代码片段中我们在第 4 行定义了我们的模版对象 (handler) ，之后我们先确保 age 属性已经被定义赋值，之后我们再检查值的类型和范围大小是不是符合要求。我们还定义了验证不通过的自定义错误信息。最后， 在 16 行我们设置了一个新的属性值，之后控制台返回了一个成功的信息，以上就是属性校验的内容。

以下是一些 Proxy 的实际应用

• 验证
• 属性值的过滤
• 属性访问插件
• 追踪属性访问记录
• 可撤销的应用
• 在 javascript 中实现 DOM