本文同步发表在 Github 集体博客：ES6 系列之 Proxy

前言

前几天模仿实现了 MobX 的两个函数 —— 手写实现 MobX 的 observable 和 autorun 办法，其中用到了 Proxy，所以打算再对 Proxy 深刻理解一下，做个笔记。

Proxy 是什么

Proxy 对象用于创立一个对象的代理，从而实现基本操作的拦挡和自定义（如属性查找、赋值、枚举、函数调用等）。能够了解成，在指标对象之前架设一层“拦挡”，外界对该对象的拜访，都必须先通过这层拦挡，因而提供了一种机制，能够对外界的拜访进行过滤和改写。

const p = new Proxy(target, handler)
  • target: 应用 Proxy 包装的指标对象（能够是任何类型的 JavaScript 对象，包含原生数组，函数，甚至另一个代理）。
  • handler: 一个通常以函数作为属性的对象，用来定制拦挡行为。

在反对 Proxy 的浏览器环境中，Proxy 是一个全局对象，能够间接应用。Proxy(target, handler)是一个构造函数，target是被代理的对象，最终返回一个代理对象。

为什么须要 Proxy

学习一样货色之前咱们先要想想为什么须要它，在我看来，个别几种状况。

  1. 被代理的对象不想间接被拜访
  2. 管制和批改被代理对象的行为（调用属性、属性赋值、办法调用等等），使之能够进行访问控制和减少性能。

API

API 概览如下：

  • 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) 。

最罕用的办法就是get和set

例子

get

const target = {  name: 'jacky',  sex: 'man',}const handler = {  get(target, key) {    console.log('获取名字/性别')    return Reflect.get(target, key)  },}const proxy = new Proxy(target, handler)console.log(proxy.name)

运行，打印台输入:

获取名字/性别jacky

在获取name属性是先进入get办法，在get办法外面打印了获取名字/性别，而后通过Reflect.get(target, key)的返回值拿到属性值，相当于target[key]

set

const target = {  name: 'jacky',  sex: 'man',}const handler = {  get(target, key) {    console.log('获取名字/性别')    return Reflect.get(target, key)  },  set(target, key, value) {    return Reflect.set(target, key, `强行设置为 ${value}`)  },}const proxy = new Proxy(target, handler)proxy.name = 'monkey'console.log(proxy.name)

运行输入：

获取名字/性别强行设置 monkey

设置proxy.name = 'monkey'，这是批改属性的值，则会触发到set办法， 而后咱们强行更改设置的值再返回，达到拦挡对象属性的设置的目标。

Reflect对象与Proxy对象一样，也是 ES6 为了操作对象而提供的新 API。Reflect.get(target, name, receiver) ：查找并返回target对象的name属性，如果没有该属性，则返回undefined。Reflect.set(target, name, value, receiver) ：设置target对象的name属性等于value。

this 指向

proxy 会扭转 target 中的 this 指向，一旦 Proxy 代理了 target，target 外部的 this 则指向了 Proxy 代理

const target = new Date('2021-01-03')const handler = {  get(target, prop) {    if (prop === 'getDate') {      return target.getDate(target)    }    return Reflect.get(target, prop)  },}const proxy = new Proxy(target, handler)console.log(proxy.getDate())

运行代码，会发现报错，提醒TypeError: proxy.getDate is not a function，即 this 不是 Date 对象的实例，这时须要咱们手动绑定原始对象即可解决：

const target = new Date('2021-01-03')const handler = {  get(target, prop) {    if (prop === 'getDate') {      return target.getDate.bind(target) // 绑定    }    return Reflect.get(target, prop)  },}const proxy = new Proxy(target, handler)console.log(proxy.getDate()) // 3

利用场景

  • 正告或阻止特定操作
  • get 办法取不到对应值能够返回咱们想指定的其它值
  • 数据校验。判断数据是否满足条件

等等...

参考

  • https://es6.ruanyifeng.com/#docs/proxy


ps：

  • 集体技术博文 Github 仓库

感觉不错的话赏个 star，给我继续创作的能源吧！