es6学习笔记3：Proxy

1.概述（代理器）

Proxy 用于修改某些操作的默认行为，等同于在语言层面做出修改。

Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写

Proxy 实际上重载了点运算符，即用自己的定义覆盖了语言的原始定义

ES6 原生提供 Proxy 构造函数，用来生成 Proxy 实例

var proxy = new Proxy(target, handler);
           

Proxy 对象的所有用法，都是上面这种形式，不同的只是

handler

参数的写法。其中，

new Proxy()

表示生成一个

Proxy

实例，

target

参数表示所要拦截的目标对象，

handler

参数也是一个对象，用来定制拦截行为。如果

handler

没有设置任何拦截，那就等同于直接通向原对象。

要使得

Proxy

起作用，必须针对

Proxy

实例（上例是

proxy

对象）进行操作，而不是针对目标对象（上例是空对象）进行操作。

Proxy支持的拦截操作：

get(target, propKey, receiver)：拦截对象属性的读取

set(target, propKey, value, receiver)：拦截对象属性的设置

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)

2.Proxy实例的方法

get方法：用于拦截某个属性的读取操作。接受三个参数。目标对象、属性名和 proxy 实例本身（可选）。可以继承

可以将读取属性的操作（get）转变为执行某个函数，从而实现属性的链式操作。实现一个生成各种DOM节点的通用函数dom

第三个参数总是指向原始的读操作所在的那个对象。

如果一个属性不可配置（configurable）且不可写（writable），则 Proxy 不能修改该属性，否则通过 Proxy 对象访问该属性会报错。

set()方法：用来拦截某个属性的赋值操作，可以接受四个参数，依次为目标对象、属性名、属性值和 Proxy 实例本身，其中最后一个参数可选.可以用于数据验证

在对象上面设置内部属性，属性名的第一个字符使用下划线开头，表示这些属性不应该被外部使用，结合get和set可以实现。

第四个参数，一般情况下是proxy实例本身，但有可能是其他（原始赋值行为所在的对象）

如果目标对象自身的某个属性，不可写且不可配置，set将不起作用。

严格模式下，set代理如果没有返回true，就会报错

apply()方法：拦截函数的调用、

call

和

apply

操作。可以接受三个参数，分别是目标对象、目标对象的上下文对象（

this

）和目标对象的参数数组。每当执行

proxy

函数（直接调用或

call

和

apply

调用），就会被

apply

方法拦截。直接调用

Reflect.apply

方法，也会被拦截。

has()方法：用来拦截

HasProperty

操作，即判断对象是否具有某个属性时，这个方法会生效。典型的操作就是

in

运算符。可以接受两个参数，分别是目标对象、需查询的属性名。

如果原对象不可配置或者禁止扩展，这时

has

拦截会报错。

has方法不判断一个属性是对象自身的属性，还是继承的属性

虽然

for...in

循环也用到了

in

运算符，但是

has

拦截对

for...in

循环不生效。

has

拦截只对

in

运算符生效，对

for...in

循环不生效，导致不符合要求的属性没有被

for...in

循环所排除。

construct()方法：用于拦截new命令，可以接受两个参数，target目标对象，args构造函数的参数对象，newTarget创造实例对象时，new命令作用的构造函数。返回必须是一个对象。

deleteProperty()用于拦截

delete

操作，如果这个方法抛出错误或者返回

false

，当前属性就无法被

delete

命令删除。

目标对象自身的不可配置（configurable）的属性，不能被

deleteProperty

方法删除，否则报错。

defineProperty

方法拦截了

Object.defineProperty

操作（拦截添加新属性，不管是直接赋值还是用

Object.defineProperty

）

如果目标对象不可扩展（non-extensible），则

defineProperty

不能增加目标对象上不存在的属性，否则会报错。另外，如果目标对象的某个属性不可写（writable）或不可配置（configurable），则

defineProperty

方法不得改变这两个设置

getOwnPropertyDescriptor

方法拦截

Object.getOwnPropertyDescriptor()

，返回一个属性描述对象或者

undefined

getPrototypeOf

方法主要用来拦截获取对象原型，拦截以下操作

• Object.prototype.__proto__

• Object.prototype.isPrototypeOf()

• Object.getPrototypeOf()

• Reflect.getPrototypeOf()

• instanceof

返回值必须是对象或者

null

，否则报错，如果目标对象不可扩展（non-extensible）， 

getPrototypeOf

方法必须返回目标对象的原型对象。

isExtensible

方法拦截

Object.isExtensible

操作该方法，只能返回布尔值，否则返回值会被自动转为布尔值

它的返回值必须与目标对象的isExtensible属性保持一致。

ownKeys

方法用来拦截对象自身属性的读取操作，拦截以下操作：

• Object.getOwnPropertyNames()

• Object.getOwnPropertySymbols()

• Object.keys()

• for...in

  循环

使用

Object.keys

方法时，有三类属性会被

ownKeys

方法自动过滤，不会返回。

• 目标对象上不存在的属性
• 属性名为 Symbol 值
• 不可遍历（

  enumerable

  ）的属性

ownKeys

方法返回的数组成员，只能是字符串或 Symbol 值。如果有其他类型的值，或者返回的根本不是数组，就会报错。

如果目标对象自身包含不可配置的属性，则该属性必须被

ownKeys

方法返回，否则报错

preventExtensions

方法拦截

Object.preventExtensions()

。该方法必须返回一个布尔值，否则会被自动转为布尔值。

proxy.preventExtensions

方法返回

true

，但这时

Object.isExtensible(proxy)

会返回

true

，因此报错。

为了防止出现这个问题，通常要在

proxy.preventExtensions

方法里面，调用一次

Object.preventExtensions

。

setPrototypeOf

方法主要用来拦截

Object.setPrototypeOf

方法。

该方法只能返回布尔值，否则会被自动转为布尔值。另外，如果目标对象不可扩展（non-extensible），

setPrototypeOf

方法不得改变目标对象的原型。

3.Proxy.revocable() 方法

返回一个可取消的Proxy实例。

Proxy.revocable

方法返回一个对象，该对象的

proxy

属性是

Proxy

实例，

revoke

属性是一个函数，可以取消

Proxy

实例。上面代码中，当执行

revoke

函数之后，再访问

Proxy

实例，就会抛出一个错误。

Proxy.revocable

的一个使用场景是，目标对象不允许直接访问，必须通过代理访问，一旦访问结束，就收回代理权，不允许再次访问。

4.this问题

在 Proxy 代理的情况下，目标对象内部的

this

关键字会指向 Proxy 代理。

有些原生对象的内部属性，只有通过正确的

this

才能拿到，所以 Proxy 也无法代理这些原生对象的属性。

this

绑定原始对象，就可以解决这个问题

5.实例:web服务的客户端

Proxy 对象可以拦截目标对象的任意属性，这使得它很合适用来写 Web 服务的客户端。