JS每日一题:如何理解es6中的Proxy?

栏目: JavaScript · 发布时间: 5年前

内容简介:如何理解es6中的Proxy?试题解析:对proxy的理解,可能会延伸到vue的双向绑定可以理解为为目标对象架设一层拦截,外界对该对象的访问,都必须通过这层拦截

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点推送当天的参考答案

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

点击加入答题


以上所述就是小编给大家介绍的《JS每日一题:如何理解es6中的Proxy?》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

淘宝十年产品事

淘宝十年产品事

苏杰 / 电子工业出版社 / 2013-10-15 / 55.00

产品经理发展到一定阶段,再要成长,光靠学习一些知识、技能已经不够,必须通过经典案例来学习,而本书,就提供了小到页面细节、大到平台架构的丰富案例。电商从业者,无法无视“淘宝”这个标杆的存在,本书可帮助大家做出更好的选择。愿意思考的人们,也可以从“淘宝”这个产品,或者说社会 现象、经济现象里,找到每天都能体会到的那些变化的原因,从而想得更明白,活得更通透。 本书细数淘宝成立十年来经历的重大变化,......一起来看看 《淘宝十年产品事》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

MD5 加密
MD5 加密

MD5 加密工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具