ES6之Proxy的get方法详解


Posted in Javascript onOctober 11, 2019

Proxy是在ES2015(ES6)中新添加内置对象,用于自定义一些基本操作。

这篇文章是我在学习Proxy的时候对于get方法的一些心得。

作为ES2015新定义的内置对象,Proxy 能够拦截并且自定义对象以及函数的一些基本操作,具有很高的优先级和便利性,能够让我们在写代码的时候多出一种解决难题的途径。

Proxy的get方法用于拦截对象属性的读取操作,例如 obj.key 和 obj.[key]。在给Proxy的handler参数中设置get方法后,每当进行读取操作时,会优先调用该get方法,我们可以在这个方法函数中对读取行为进行拦截。请看下面的代码:

const obj = { key: 1 }
const proxy = new Proxy(obj, {
 get: function(target, property, receiver) {
  console.log('get', property)
  return target[property]
 }
})
console.log(proxy.key)
// get key
// 1

get方法的参数一共有三个:target是实例化Proxy时使用的对象,在这个例子中是obj;而property是这次读取操作中想要获取的属性名,在这个例子中是key;最后一个参数receiver则是这个实例化的Proxy自身,即proxy。
在这个例子中,我在get方法的最后返回了target[property],这是为了能够让读取操作能够进行下去。由于Proxy的get方法是最先被调用的,所以这里返回的内容就是我们读取操作能够获得的结果;如果我们在这里不返回任何值,那么就会得到undefined。

receiver和死循环

要注意的是,千万不要在get方法中读取receiver的属性,因为receiver实质上就是proxy自身,所以receiver.key这句代码就等同于proxy.key,会重新调用get方法导致死循环。

const obj = { key: 1 }
const proxy = new Proxy(obj, {
 get: function(target, property, receiver) {
  console.log(receiver.key)
  return target[property]
 }
})
console.log(proxy.key)
// 死循环!

原型链上的getter

有时候,我们会在对象之中使用getter和setter来定制属性的赋值和读取。在这时,如果proxy的get方法内部有使用到target[property]的话,target[property]的值会受到目标对象的getter的影响。因此调用get方法的时候请注意在目标对象中是否有用到getter。

const obj = {
 get key() {
  return 'string'
 },
 set key(value) {
  console.log(`key is ${value}, it is a ${typeof value}`)
 }
}
const proxy = new Proxy(obj, {
 get: function(target, property, receiver) {
  if(typeof target[property] !== 'string') {
   return target[property]
  } else {
   throw new TypeError(`The type of ${property} is String!`)
  }
 }
})
proxy.key = 100
console.log(proxy, obj)
// key is 100, it is a number
// The type of key is String!

在上方的例子中,如果访问obj的非数字类型的属性,就会抛出一个错误,但是由于obj中getter的原因,无论我给key属性赋什么值,在访问key属性的时候肯定会抛出错误。

如果仅仅要注意目标对象中的getter还算容易的,但是如果目标对象继承自其他对象,那么事情就变得有些麻烦了,请看下面的例子:

const parentObj = {
 get key() {
  return 'string'
 },
 set key(value) {
  console.log(`key is ${value}, it is a ${typeof value}`)
 }
}
const obj = Object.create(parentObj)
const proxy = new Proxy(obj, {
 get: function (target, property, receiver) {
  if (typeof target[property] !== 'string') {
   return target[property]
  } else {
   throw new TypeError(`The type of ${property} is String!`)
  }
 }
})
proxy.key = 100 
console.log(proxy.key)
// key is 100, it is a number
// The type of key is String!

如代码所示,目标对象obj继承自parentObj,而parentObj中使用了getter方法,那么使用proxy的get方法仍旧会报错。实际运用中原型链可能会很长,getter可能会存在于原型链的任何一个地方中,所以在使用Proxy的get方法时请一定要注意。

但是如果把parentObj上的key遮蔽掉,就不会发生抛出错误的情况了。比如在创建obj的时候申明的key,代码如下:

const parentObj = {
 get key() {
  return 'string'
 },
 set key(value) {
  console.log(`key is ${value}, it is a ${typeof value}`)
 }
}
const obj = Object.create(parentObj, {
 key: {
  value: null,
  writable: true
 }
})
const proxy = new Proxy(obj, {
 get: function (target, property, receiver) {
  if (typeof target[property] !== 'string') {
   return target[property]
  } else {
   throw new TypeError(`The type of ${property} is String!`)
  }
 }
})
proxy.key = 100 
console.log(proxy.key)
// 100

同样的,我们也可以使用Object.defineProperty()和Object.assign()这两个方法来达到相同的目的:

Object.defineProperty(obj, 'key', {
 value: null,
 writable: true
})
obj = Object.assign({}, obj, { key: null })

但是要注意使用Object.assign()的时候不能这么些:

obj = Object.assign(obj, { key: null })

这样写法无法遮蔽掉parentObj上的key属性,使用的时候仍旧会抛出错误。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js实现通用的微信分享组件示例
Mar 10 Javascript
获取当前点击按钮的id用this.id实现
Mar 17 Javascript
js限制input标签中只能输入中文
Jun 26 Javascript
AngularJS ng-bind-html 指令详解及实例代码
Jul 30 Javascript
AngularJS中过滤器的使用与自定义实例代码
Sep 17 Javascript
jQuery根据ID、CLASS、等获取对象的实例
Dec 04 Javascript
JavaScript中Promise的使用详解
Feb 26 Javascript
JS得到当前时间的方法示例
Mar 24 Javascript
详解jquery选择器的原理
Aug 01 jQuery
vue实现简单的日历效果
Sep 24 Javascript
支付宝小程序实现省市区三级联动
Jun 21 Javascript
vuecli项目构建SSR服务端渲染的实现
Oct 30 Javascript
vue组件 keep-alive 和 transition 使用详解
Oct 11 #Javascript
jquery将json转为数据字典的实例代码
Oct 11 #jQuery
JavaScript实现抖音罗盘时钟
Oct 11 #Javascript
javascript刷新父页面方法汇总详解
Oct 10 #Javascript
element form 校验数组每一项实例代码
Oct 10 #Javascript
使用Vue-cli3.0创建的项目 如何发布npm包
Oct 10 #Javascript
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 #jQuery
You might like
php5.3 不支持 session_register() 此函数已启用的解决方法
2013/11/12 PHP
php中的四舍五入函数代码(floor函数、ceil函数、round与intval)
2014/07/14 PHP
PHP基于关联数组20行代码搞定约瑟夫问题示例
2017/11/07 PHP
PHP实现的装箱算法示例
2018/06/23 PHP
50个优秀经典PHP算法大集合 附源码
2020/08/26 PHP
用javascript实现的激活输入框后隐藏初始内容
2007/06/29 Javascript
一个JS小玩意 几个属性相加不能超过一个特定值.
2009/09/29 Javascript
JQuery获取样式中的background-color颜色值的问题
2013/08/20 Javascript
原始XMLHttpRequest方法详情回顾
2013/11/28 Javascript
JS基于面向对象实现的拖拽库实例
2015/09/24 Javascript
jQuery原理系列-css选择器的简单实现
2016/06/07 Javascript
js实现百度地图定位于地址逆解析,显示自己当前的地理位置
2016/12/08 Javascript
nodejs利用http模块实现银行卡所属银行查询和骚扰电话验证示例
2016/12/30 NodeJs
利用jquery实现实时更新歌词的方法
2017/01/06 Javascript
jQuery插件HighCharts绘制2D带Label的折线图效果示例【附demo源码下载】
2017/03/08 Javascript
判断颜色是否合法的正则表达式(详解)
2017/05/03 Javascript
详解基于mpvue的小程序markdown适配解决方案
2018/05/08 Javascript
js实现div色块碰撞
2020/01/16 Javascript
Python中下划线的使用方法
2015/03/27 Python
对pandas的dataframe绘图并保存的实现方法
2017/08/05 Python
python实现简单tftp(基于udp协议)
2018/07/30 Python
Python数据可视化教程之Matplotlib实现各种图表实例
2019/01/13 Python
python中selenium操作下拉滚动条的几种方法汇总
2019/07/14 Python
python tkinter窗口最大化的实现
2019/07/15 Python
通过python检测字符串的字母
2020/02/18 Python
如何在django中运行scrapy框架
2020/04/22 Python
施华洛世奇韩国官网:SWAROVSKI韩国
2018/06/05 全球购物
在Java开发中如何选择使用哪种集合类
2016/08/09 面试题
数据库面试要点基本概念
2013/10/31 面试题
预备党员党校学习自我评价分享
2013/11/12 职场文书
优秀学生干部个人事迹材料
2014/06/02 职场文书
师德师风剖析材料
2014/09/30 职场文书
2015年幼儿园师德师风建设工作总结
2015/10/23 职场文书
心理健康教育培训研修感言
2015/11/18 职场文书
中小学教师继续教育心得体会
2016/01/19 职场文书
Python采集壁纸并实现炫轮播
2022/04/30 Python