[ES6]探究数据绑定之Proxy

时间：2024-01-07 08:44:08

知识储备

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)

相关文章