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 相关文章推荐
JavaScript中使用replace结合正则实现replaceAll的效果
Jun 04 Javascript
js和jquery设置disabled属性为true使按钮失效
Aug 07 Javascript
将HTML格式的String转化为HTMLElement的实现方法
Aug 07 Javascript
JS实现超精简的链接列表在固定区域内滚动效果代码
Nov 04 Javascript
在JavaScript中模拟类(class)及类的继承关系
May 20 Javascript
js继承实现方法详解
Dec 16 Javascript
js实现简单的计算器功能
Jan 16 Javascript
js实现文本上下来回滚动
Feb 03 Javascript
JavaScript表单验证的两种实现方法
Feb 11 Javascript
图片加载完成再执行事件的实例
Nov 16 Javascript
JavaScript进制转换实现方法解析
Jan 18 Javascript
多个Vue项目部署到服务器的步骤记录
Oct 22 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
web方式ftp
2006/10/09 PHP
一个php作的文本留言本的例子(二)
2006/10/09 PHP
yii去掉必填项中星号的方法
2015/12/28 PHP
PHP递归实现层级树状展开
2016/04/01 PHP
JavaScript中instanceof与typeof运算符的用法及区别详细解析
2013/11/19 Javascript
jQuery中事件对象e的事件冒泡用法示例介绍
2014/04/25 Javascript
js调试工具Console命令详解
2014/10/21 Javascript
jquery实现标签上移、下移、置顶
2015/04/26 Javascript
js+canvas绘制五角星的方法
2016/01/28 Javascript
js随机生成26个大小写字母
2016/02/12 Javascript
Bootstrap每天必学之按钮(Button)插件
2016/04/25 Javascript
15个值得开发人员关注的jQuery开发技巧和心得总结【经典收藏】
2016/05/25 Javascript
easyui取消表单实时验证,提交时统一验证的简单实例
2016/11/07 Javascript
jQuery实现的模拟弹出窗口功能示例
2016/11/24 Javascript
JavaScript trim 实现去除字符串首尾指定字符的简单方法
2016/12/27 Javascript
完美实现js选项卡切换效果(二)
2017/03/08 Javascript
JSONP基础知识详解
2017/03/19 Javascript
详解angularjs利用ui-route异步加载组件
2017/05/21 Javascript
浅谈JavaScript作用域和闭包
2017/09/18 Javascript
vue实现未登录跳转到登录页面的方法
2018/07/17 Javascript
axios全局注册,设置token,以及全局设置url请求网段的方法
2018/09/25 Javascript
js如何获取图片url的Blob值并预览示例代码
2019/03/07 Javascript
element-ui组件中input等的change事件中传递自定义参数
2019/05/22 Javascript
在vue-cli中引入lodash.js并使用详解
2019/11/13 Javascript
详解python中executemany和序列的使用方法
2017/08/12 Python
详解Python3序列赋值、序列解包
2019/05/14 Python
keras分类之二分类实例(Cat and dog)
2020/07/09 Python
德国最大的设计师鞋网上商店:Budapester
2017/12/07 全球购物
亚洲在线旅行门户网站:Expedia.com.hk(智游网)
2020/04/14 全球购物
优质的学校老师推荐信
2013/10/28 职场文书
应届实习生的自我评价范文
2014/01/05 职场文书
欢送退休感言
2014/02/08 职场文书
企业安全生产标语
2014/06/06 职场文书
学用政策心得体会
2014/09/10 职场文书
统计学教授推荐信
2014/09/18 职场文书
公司车辆管理制度
2015/08/04 职场文书