[ES6]探究数据绑定之Proxy

知识储备

Proxy 方式实现数据绑定中涉及到 Proxy、Reflect、Set、Map 和 WeakMap，这些都是 ES6 的新特性。

Proxy

Proxy 对象代理，在目标对象之前架设一层拦截，外部对目标对象的操作，都会通过这层拦截，我们可以定制拦截行为，每一个被代理的拦截行为都对应一个处理函数。

1	let p = new Proxy(target, handler);

1 2 3 4 5 6 7 8 9

var handler = { get: (target, name, recevier) => { return 'proxy' } } var p = new Proxy({}, handler) p.a = 1 console.log(p.a, p.c) // -> proxy proxy

Proxy 构造函数接收两个参数：

• 第一个参数是要代理的目标对象
• 第二个参数是配置对象，每一个被代理的操作都对应一个处理函数

在这个例子中，目标对象是一个空对象，配置对象中有一个 get 函数，用来拦截外部对目标对象属性的访问，可以看到，get 函数始终返回 proxy。

Proxy 支持拦截的操作一共有13种：

• get(target, propKey, receiver)
• set(target, propKey, value, receiver)
• has(target, propKey)
• deleteProperty(target, propKey)
• ownKeys(target)
• getOwnPropertyDescriptor(target, propKey)
• defineProperty(target, propKey, propDesc)
• preventExtensions(target)
• getPrototypeOf(target)
• isExtensible(target)
• setPrototypeOf(target, proto)
• apply(target, object, args)
• construct(target, args)