You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
letobj={name: 'Eason',age: 30}lethandler={get(target,key,receiver){console.log('get',key)returnReflect.get(target,key,receiver)},set(target,key,value,receiver){console.log('set',key,value)returnReflect.set(target,key,value,receiver)}}letproxy=newProxy(obj,handler)proxy.name='Zoe'// set name Zoeproxy.age=18// set age 18
支持数组
etarr=[1,2,3]letproxy=newProxy(arr,{get(target,key,receiver){console.log('get',key)returnReflect.get(target,key,receiver)},set(target,key,value,receiver){console.log('set',key,value)returnReflect.set(target,key,value,receiver)}})proxy.push(4)// 能够打印出很多内容// get push (寻找 proxy.push 方法)// get length (获取当前的 length)// set 3 4 (设置 proxy[3] = 4)// set length 4 (设置 proxy.length = 4)
Object.defineProperty的三个问题
Vue 重写mutation method
Proxy的应用场景
5.对象的属性设定时校验
因为我们故意设置了 response.data = undefined,因此会进入 dealError 方法,参数 key 的值为 data。
虽然从代码量来看比上面的 if 检查更长,但 isOK, handler 和 new Proxy 的定义都是可以复用的,可以移动到一个单独的文件,仅暴露几个方法即可。所以实际的代码只有 dealError 的定义和最后的一个 if 而已。
更多应用场景
设置对象默认值 - 创建一个对象,它的某些属性自带默认值。
优化的枚举类型 - 枚举类型的 key 出错时立刻报错而不是静默的返回 undefined,因代码编写错误导致的重写、删除等也可以被拦截。
追踪对象和数组的变化 - 在数组和对象的某个元素/属性发生变化时抛出事件。这可能适用于撤销,重做,或者直接回到某个历史状态。
给对象的属性访问增加缓存,提升速度 - 在对对象的某个属性进行设置时记录值,在访问时直接返回而不真的访问属性。增加 TTL 检查机制(Time To Live,存活时间)防止内存泄露。
支持 in 关键词的数组 - 通过设置 has 方法,内部调用 array.includes。使用的时候则直接 console.log(‘key’ in someArr)。
实现单例模式 - 通过设置 construct 方法,在执行 new 操作符总是返回同一个单例,从而实现单例模式。
Cookie 的类型转换 - document.cookie 是一个用 ; 分割的字符串。我们可以把它转化为对象,并通过 Proxy 的 set 和 deleteProperty 重新定义设置和删除操作,用以对外暴露一个可操作的 Cookie 对象,方便使用。
The text was updated successfully, but these errors were encountered: