proxy
Proxy 对象用于创立一个对象的代理，从而实现基本操作的拦挡和自定义（如属性查找、赋值、枚举、函数调用等）。
new Proxy(target,handler)// target 是proxy 要包装的对象 （能够是数组、函数，也能够是另一个Proxy）//handler 一个通常以函数作为属性的对象，用来定制拦挡行为根本的语法是：
const p = new Proxy(target,handler)次要的办法有:
handler.has() 是针对 in 操作符的代理办法
handler.set() 办法是设置属性值操作的捕捉器。
handler.get() 办法用于拦挡对象的读取属性操作。
handler.defineProperty() 用于拦挡对对象的 Object.defineProperty() 操作。
handler.deleteProperty() 办法用于拦挡对对象属性的 delete 操作。
handler.has()办法
const obj = { name: '微芒不朽', occupation: '前端开发'}const handler = { has(target, key) { //判断是否存在该属性 return key in target }}const p = new Proxy(obj, handler)console.log(p.name) //微芒不朽console.log(p.like) //undefinedconsole.log(p.occupation) //前端开发handler.get()办法
const obj = { name: '微芒不朽', occupation: '前端开发'}const handler = { has(target, key) { //判断是否存在该属性 return key in target }, get(target, key) { if (key in target) { return target[key] } else { return new ReferenceError(key + '属性不存在') } }}const p = new Proxy(obj, handler)console.log(p.name) //微芒不朽console.log(p.like) //ReferenceError: like属性不存在console.log(p.occupation) //前端开发handler.set()办法
const obj = { name: '微芒不朽', occupation: '前端开发'}const handler = { set(target, key) { if (key in target) { return Reflect.set(...arguments) } throw new ReferenceError(key+'属性不存在') }}const p = new Proxy(obj, handler)p.like = '编程' //Uncaught ReferenceError: like属性不存在// console.log(p.like)p.occupation = '测试'console.log(p.occupation) //测试handler.defineProperty() 办法
用于拦挡对对象的 Object.defineProperty() 操作
const obj = { name: '微芒不朽', configurable: true, enumerable: true,}const handler = { defineProperty(target, key, descriptor) { console.log('属性', key) return true; }}const p = new Proxy({}, handler)Object.defineProperty(p, 'like', obj) //属性 like也能够应用 Reflect.defineProperty
const obj = { name: '微芒不朽', configurable: true, enumerable: true,}const handler1 = { defineProperty(target, key, descriptor) { console.log('属性1', descriptor) return Reflect.defineProperty(target, key, descriptor) }}const p1 = new Proxy({}, handler)Object.defineProperty(p1, 'like', obj) //属性 likehandler.deleteProperty() 办法
次要拦挡对象的 delete操作；
const obj = { name: '微芒不朽',}const handler = { deleteProperty(target, key) { console.log('删除' + key) }}const p = new Proxy({}, handler)delete p.name //删除name//也会拦挡 Reflect.deletePropertyReflect.deleteProperty(obj,'name')Proxy.revocable 撤销代理
proxy有一个惟一的静态方法，Proxy.revocable(target, handler)
Proxy.revocable()办法能够用来创立一个可撤销的代理对象。 该办法的返回值是一个对象，其构造为： {"proxy": proxy, "revoke": revoke}
- proxy 示意新生成的代理对象自身，和用个别形式 new Proxy(target, handler) 创立的代理对象没什么不同，只是它能够被撤销掉。
- revoke 撤销办法，调用的时候不须要加任何参数，就能够撤销掉和它一起生成的那个代理对象。
const obj = { name: '微芒不朽',}const handler = {}const { proxy, revoke } = Proxy.revocable(obj, handler)console.log(proxy.name) //微芒不朽revoke() // 取值实现对proxy进行关闭，吊销代理console.log(proxy.name) // Uncaught TypeError: illegal operation attempted on a revoked proxy利用场景
Proxy实现一个格局测验器
场景：验证身份证、电话、姓名和邮箱
const obj = { certno: '420101198101012964', name: '微芒不朽1', tel: '123456789', mail: '13@qq.com',}const validators = { //校验证件号码 certno(val) { return /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(val) }, //校验姓名，只能为汉字 name(val) { return /^[\u0391-\uFFE5]+$/.test(val) }, //测验电话或手机号 tel(val) { return /^1\d{10}$|^0\d{2,3}-?\d{7,8}$/.test(val) }, //测验邮箱 mail() { return /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/.test(val) }}const validatorType = (target, validator) => { return new Proxy(target, { _validator: validator, set(target, key, value, proxy) { let validator = this._validator[key](value) if (validator) { return Reflect.set(target, key, value, proxy) } else { throw Error(`设置${key} 的值为 ${value}，格局不正确`) } } })}const proxy = validatorType(obj, validators)proxy.certno = '420101198101012964'proxy.name = '微芒不朽1' //Uncaught Error: 设置name 的值为 微芒不朽1，格局不正确proxy.tel = '123456789' //Uncaught Error: 设置tel 的值为 123456789，格局不正确proxy.mail = '13@qq.com'proxy 拦挡公有属性
用proxy拦挡日常定义的公有属性，使其不能更改；个别以下划线结尾；
let obj = { _id:'1234567890', name:'微芒不朽'}const p = new Proxy(obj,{ set(target,prop){ if(prop[0]==='_'){ throw Error( `${prop}为公有属性`) } return Reflect.set(target,prop) }})p.name = '加油啊'console.log(p.name) //加油啊p._id = '123'console.log(p._id) //Uncaught Error: _id为公有属性Reactive函数
用来绑定援用数据类型, 例如对象和数组等,实现响应式。 Proxy 实质上是对某个对象的劫持，这样它不仅仅能够监听对象某个属性值的变动，还能够监听对象属性的新增和删除 。而 reactive 是 vue3 中对数据进行劫持的外围 。
//判断是否为对象function isObject(value) { return value != null && (typeof value === 'object' || typeof value === 'function')}function reactive(obj) { if (!isObject(obj)) { return obj } return new Proxy(obj, { get(target, key) { // TODO:收集依赖 return Reflect.get(target, key) }, set(target, key, value) { // TODO:触发依赖 return Reflect.set(target, key, value) } })}const state = reactive({ name: '微芒不朽'})console.log(state) //Proxy代理的对象// Proxy { <target>: {…}, <handler>: {…} }// <target>: Object { name: "微芒不朽" }// name: "微芒不朽"// <prototype>: Object { … }// <handler>: Object { get: get(target, key), set: set(target, key, value)// }// get: function get(target, key)// set: function set(target, key, value)