语法

• target 要使用 Proxy 包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理
• handler 一个通常以函数作为属性的对象，用来定制拦截行为

const proxy = new Proxy(target, handle)

举个例子

<script setup lang="ts">
const proxy = {}
const obj  = new Proxy(proxy, {get(target, key, receiver) {console.log('get', target,key)// return 10return Reflect.get(target, key, receiver)},set(target, key, value, receiver) {console.log('set', key, value)// return 20return Reflect.set(target, key, value, receiver)}
})
const test1 = () => {obj.a = 1}
const test2 = () => {console.log(obj.a)
}</script><template><div><button @click="test1">test1</button><button @click="test2">test2</button></div>
</template>

需要注意的是，代理只会对proxy对象生效，如上方的origin就没有任何效果

#Handler 对象常用的方法

方法	描述
handler.has()	in 操作符的捕捉器。
handler.get()	属性读取操作的捕捉器。
handler.set()	属性设置操作的捕捉器。
handler.deleteProperty()	delete 操作符的捕捉器。
handler.ownKeys()	Object.getOwnPropertyNames 方法和 Object.getOwnPropertySymbols 方法的捕捉器。
handler.apply()	函数调用操作的捕捉器。
handler.construct()	new 操作符的捕捉器

#handler.get

get我们在上面例子已经体验过了，现在详细介绍一下，用于代理目标对象的属性读取操作

授受三个参数 get(target, propKey, ?receiver)

• target 目标对象
• propkey 属性名
• receiver Proxy 实例本身

举个例子

const person = {like: "vuejs"
}const obj = new Proxy(person, {get: function(target, propKey) {if (propKey in target) {return target[propKey];} else {throw new ReferenceError("Prop name \"" + propKey + "\" does not exist.");}}
})obj.like // vuejs
obj.test // Uncaught ReferenceError: Prop name "test" does not exist.

上面的代码表示在读取代理目标的值时，如果有值则直接返回，没有值就抛出一个自定义的错误

注意:

• 如果要访问的目标属性是不可写以及不可配置的，则返回的值必须与该目标属性的值相同
• 如果要访问的目标属性没有配置访问方法，即get方法是undefined的，则返回值必须为undefined

如下面的例子

const obj = {};
Object.defineProperty(obj, "a", { configurable: false, enumerable: false, value: 10, writable: false 
})const p = new Proxy(obj, {get: function(target, prop) {return 20;}
})p.a // Uncaught TypeError: 'get' on proxy: property 'a' is a read-only and non-configurable..

#可撤消的Proxy

proxy有一个唯一的静态方法，Proxy.revocable(target, handler)

Proxy.revocable()方法可以用来创建一个可撤销的代理对象

该方法的返回值是一个对象，其结构为： {"proxy": proxy, "revoke": revoke}

• proxy 表示新生成的代理对象本身，和用一般方式 new Proxy(target, handler) 创建的代理对象没什么不同，只是它可以被撤销掉。
• revoke 撤销方法，调用的时候不需要加任何参数，就可以撤销掉和它一起生成的那个代理对象。

该方法常用于完全封闭对目标对象的访问, 如下示例

const target = { name: 'vuejs'}
const {proxy, revoke} = Proxy.revocable(target, handler)
proxy.name // 正常取值输出 vuejs
revoke() // 取值完成对proxy进行封闭，撤消代理
proxy.name // TypeError: Revoked

 

Proxy的应用场景

Proxy的应用范围很大，简单举几个例子：

#校验器

  const target = {_id: '1024',name:  'vuejs'
}const validators = {  name(val) {return typeof val === 'string';},_id(val) {return typeof val === 'number' && val > 1024;}
}const createValidator = (target, validator) => {return new Proxy(target, {_validator: validator,set(target, propkey, value, proxy){console.log('set', target, propkey, value, proxy)let validator = this._validator[propkey](value)if(validator){return Reflect.set(target, propkey, value, proxy)}else {throw Error(`Cannot set ${propkey} to ${value}. Invalid type.`)}}})
}const proxy = createValidator(target, validators)proxy.name = 'vue-js.com' // vue-js.com
proxy.name = 10086 // Uncaught Error: Cannot set name to 10086. Invalid type.
proxy._id = 1025 // 1025
proxy._id = 22  // Uncaught Error: Cannot set _id to 22. Invalid type 

#私有属性

在日常编写代码的过程中，我们想定义一些私有属性，通常是在团队中进行约定，大家按照约定在变量名之前添加下划线 _ 或者其它格式来表明这是一个私有属性，但我们不能保证他能真私‘私有化’，下面使用Proxy轻松实现私有属性拦截

const target = {_id: '1024',name:  'vuejs'
}const proxy = new Proxy(target, {get(target, propkey, proxy){if(propkey[0] === '_'){throw Error(`${propkey} is restricted`)}return Reflect.get(target, propkey, proxy)},set(target, propkey, value, proxy){if(propkey[0] === '_'){throw Error(`${propkey} is restricted`)}return Reflect.set(target, propkey, value, proxy)}
})proxy.name // vuejs
proxy._id // Uncaught Error: _id is restricted
proxy._id = '1025' // Uncaught Error: _id is restricted

Proxy 使用场景还有很多很多，不再一一列举，如果你需要在某一个动作的生命周期内做一些特定的处理，那么Proxy 都是适合的