JS每日一题：如何理解es6中的Proxy？

tinysun1234 发布于2019-08-23 14:58 / 576人阅读

20190124问:

如何理解es6中的Proxy？

试题解析:对proxy的理解，可能会延伸到vue的双向绑定

Proxy（代理）定义

可以理解为为目标对象架设一层拦截，外界对该对象的访问，都必须通过这层拦截

简单示例:

 const obj = new Proxy({}, {
     get: (target, key, receiver) => {
         return "JS"
         console.log(`get ${key}`)
     },
     set: (target, key, value, receiver) => {
         console.log(`set ${key}`)
     },
 })
 
 obj.name = "JS 每日一题" 
 // set name
 // JS 每日一题
 
 obj.name 
 // 这里进入get的回调函数，所有直接返回 JS

从上面的示例中可以看出，Proxy存在一种机制，可以对外界的读写操作进行改写

Proxy 实例方法

proxy除了代理get,set操作，还能代理其它的操作，如下

handler.getPrototypeOf()

// 在读取代理对象的原型时触发该操作，比如在执行 Object.getPrototypeOf(proxy) 时。

handler.setPrototypeOf()

// 在设置代理对象的原型时触发该操作，比如在执行 Object.setPrototypeOf(proxy, null) 时。

handler.isExtensible()

// 在判断一个代理对象是否是可扩展时触发该操作，比如在执行 Object.isExtensible(proxy) 时。

handler.preventExtensions()

// 在让一个代理对象不可扩展时触发该操作，比如在执行 Object.preventExtensions(proxy) 时。

handler.getOwnPropertyDescriptor()

// 在获取代理对象某个属性的属性描述时触发该操作，比如在执行 Object.getOwnPropertyDescriptor(proxy, "foo") 时。

handler.defineProperty()

// 在定义代理对象某个属性时的属性描述时触发该操作，比如在执行 Object.defineProperty(proxy, "foo", {}) 时。

handler.has()

// 在判断代理对象是否拥有某个属性时触发该操作，比如在执行 "foo" in proxy 时。

handler.get()

// 在读取代理对象的某个属性时触发该操作，比如在执行 proxy.foo 时。

handler.set()

// 在给代理对象的某个属性赋值时触发该操作，比如在执行 proxy.foo = 1 时。

handler.deleteProperty()

// 在删除代理对象的某个属性时触发该操作，比如在执行 delete proxy.foo 时。

handler.ownKeys()

// 在获取代理对象的所有属性键时触发该操作，比如在执行 Object.getOwnPropertyNames(proxy) 时。

handler.apply()

// 在调用一个目标对象为函数的代理对象时触发该操作，比如在执行 proxy() 时。

handler.construct()

// 在给一个目标对象为构造函数的代理对象构造实例时触发该操作，比如在执行new proxy() 时。

为什么要使用Proxy

拦截和监视外部对对象的访问

降低函数或类的复杂度

在复杂操作前对操作进行校验或对所需资源进行管理

题外思考

如何用proxy实现双向绑定?

往期

JS每日一题: 前端的缓存有哪些？都适用什么场景？区别是什么？
JS每日一题: Call，Apply，Bind的使用与区别，如何实现一个bind？
JS每日一题: 说说你对前端模块化的理解
JS每日一题: web安全攻击手段有哪些？以及如何防范

关于JS每日一题

JS每日一题可以看成是一个语音答题社区
每天利用碎片时间采用60秒内的语音形式来完成当天的考题
群主在次日0点推送当天的参考答案

注绝不仅限于完成当天任务，更多是查漏补缺，学习群内其它同学优秀的答题思路

点击加入答题

云服务器 GPU云服务器 es6中的class es6中的promise es6 js 你理解中的云服务器ecs是什么

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101443.html

JS每日一题：如何理解es6中的Proxy？

20190124问: 如何理解es6中的Proxy？试题解析:对proxy的理解，可能会延伸到vue的双向绑定 Proxy（代理）定义可以理解为为目标对象架设一层拦截，外界对该对象的访问，都必须通过这层拦截简单示例: const obj = new Proxy({}, { get: (target, key, receiver) => { return JS ...

PumpkinDylan 2019-08-02 14:09 评论0 收藏0
前端知识点(二)

摘要：在给一个目标对象为构造函数的代理对象构造实例时触发该操作，比如在执行时。 1、元素上下垂直居中的方式有哪些？元素水平垂直居中的方式有哪些？ absolute加margin方案 fixed 加 margin 方案 display:table 方案行内元素line-height方案 flex 弹性布局方案 transform 未知元素宽高解决方案 absolute加mar...

zacklee 2019-08-30 15:55 评论0 收藏0
前端知识点(二)

摘要：在给一个目标对象为构造函数的代理对象构造实例时触发该操作，比如在执行时。 1、元素上下垂直居中的方式有哪些？元素水平垂直居中的方式有哪些？ absolute加margin方案 fixed 加 margin 方案 display:table 方案行内元素line-height方案 flex 弹性布局方案 transform 未知元素宽高解决方案 absolute加mar...

lbool 2019-08-23 14:52 评论0 收藏0
前端知识点(二)

摘要：在给一个目标对象为构造函数的代理对象构造实例时触发该操作，比如在执行时。 1、元素上下垂直居中的方式有哪些？元素水平垂直居中的方式有哪些？ absolute加margin方案 fixed 加 margin 方案 display:table 方案行内元素line-height方案 flex 弹性布局方案 transform 未知元素宽高解决方案 absolute加mar...

Alex 2019-08-02 14:09 评论0 收藏0
JS每日一题:Es6中新增的数据类型有哪些？使用场景？

摘要：问中新增的数据类型有哪些使用场景中新增一种原始数据类型最大的特点是唯一性，值通过函数生成在中对象的属性都是字符串，我们使用他人定义的对象，然后去新增自己的属性，这样容易起冲突覆盖原有的属性也可以看成为一个字符串，不过这个字符能保证是独一无二 20190125问: Es6中新增的数据类型有哪些？使用场景？ es6中新增一种原始数据类型Symbol,最大的特点是唯一性，Symbol值通过S...

jsummer 2019-08-02 14:12 评论0 收藏0