ES6之Proxy的get方法详解
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属性，使用的时候仍旧会抛出错误。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
ES6 Proxy实现Vue的变化检测问题
Vue变化检测Object使用DefineProperty.数组使用方法拦截实现.最近,Vue3.0将采用ES6 Proxy的形式重新实现Vue的变化检测,在官方还没给出新方法之前,我们先实现一个基于Proxy的变化检测. 模块划分 参照之前Vue变化检测的代码,将Vue 变化检测的功能分为以下几个部分. Observer Dep Watcher Utils 首先,我们要确定的问题是,将Dep依赖搜集存在哪里.Vue 2.x里,Object的依赖收集放在defineRactive,Array的依
-
实例解析ES6 Proxy使用场景介绍
ES6 中的箭头函数.数组解构.rest 参数等特性一经实现就广为流传,但类似 Proxy 这样的特性却很少见到有开发者在使用,一方面在于浏览器的兼容性,另一方面也在于要想发挥这些特性的优势需要开发者深入地理解其使用场景.就我个人而言是非常喜欢 ES6 的 Proxy,因为它让我们以简洁易懂的方式控制了外部对对象的访问.在下文中,首先我会介绍 Proxy 的使用方式,然后列举具体实例解释 Proxy 的使用场景. Proxy,见名知意,其功能非常类似于设计模式中的代理模式,该模式常用于三个方面:
-
ES6中Proxy与Reflect实现重载(overload)的方法
本文实例讲述了ES6中Proxy与Reflect实现重载(overload)的方法.分享给大家供大家参考,具体如下: Proxy与Reflect实现重载(overload) 从语法角度讲JavaScript不支持重载.原因很简单,JS中函数可以传入任意类型.任意个数的参数,通通可以通过在函数内使用this.arguments获得.这样,就无法实现同名函数参数列表不同实现不同功能.当然,在实际使用过程中,可以人为去检测传入实参的个数及类型,来进行不同操作.但是,我认为这不能叫做重载. ES6带来了
-
详解ES6中的代理模式——Proxy
什么是代理模式 代理模式(英语:Proxy Pattern)是程序设计中的一种设计模式. 所谓的代理者是指一个类别可以作为其它东西的接口.代理者可以作任何东西的接口:网络连接.内存中的大对象.文件或其它昂贵或无法复制的资源. 著名的代理模式例子为引用计数(英语:reference counting)指针对象. 当一个复杂对象的多份副本须存在时,代理模式可以结合享元模式以减少内存用量.典型作法是创建一个复杂对象及多个代理者,每个代理者会引用到原本的复杂对象.而作用在代理者的运算会转送到原本对象.一
-
详细探究ES6之Proxy代理
前言 在ES6中,Proxy构造器是一种可访问的全局对象,使用它你可以在对象与各种操作对象的行为之间收集有关请求操作的各种信息,并返回任何你想做的.ES6中的箭头函数.数组解构.rest 参数等特性一经实现就广为流传,但类似 Proxy 这样的特性却很少见到有开发者在使用,一方面在于浏览器的兼容性,另一方面也在于要想发挥这些特性的优势需要开发者深入地理解其使用场景.就我个人而言是非常喜欢 ES6 的 Proxy,因为它让我们以简洁易懂的方式控制了外部对对象的访问.在下文中,首先我会介绍 Prox
-
ES6知识点整理之Proxy的应用实例详解
本文实例讲述了ES6知识点整理之Proxy的应用.分享给大家供大家参考,具体如下: Proxy 用于修改对象某些操作的默认行为,可以对外界的访问进行过滤和改写,其概念类似于元编程. Proxy 让我们可以对任何对象的绝大部分行为进行监听和干涉,实现更多的自定义程序行为.在目标对象之前架设一层"拦截",外界对该对象的访问,都必须先通过这层拦截. 目前[兼容性]存在一定的问题,目前在chrome和ff浏览器中的非严格模式下可用,一些先进的技术即使在目前不能广泛应用,但随着时间的流逝,都将会
-
ES6中Proxy代理用法实例浅析
本文实例讲述了ES6中Proxy代理用法.分享给大家供大家参考,具体如下: ES6中提出了一个新的特性,就是proxy,用来拦截在一个对象上的指定操作.这个功能非常的有用.举一个例子来说: var engineer = { name: 'Joe Sixpack', salary: 50 }; var interceptor = { set: function (receiver, property, value) { console.log(property, 'is changed to',
-
JavaScript中的ES6 Proxy的具体使用
场景 就算只是扮演,也会成为真实的自我的一部分.对人类的精神来说,真实和虚假其实并没有明显的界限.入戏太深不是一件好事,但对于你来说并不成立,因为戏中的你才是真正符合你的身份的你.如今的你是真实的,就算一开始你只是在模仿着这种形象,现在的你也已经成为了这种形象.无论如何,你也不可能再回到过去了. Proxy 代理,在 JavaScript 似乎很陌生,却又在生活中无处不在.或许有人在学习 ES6 的时候有所涉猎,但却并未真正了解它的使用场景,平时在写业务代码时也不会用到这个特性. 相比于文绉绉的
-
浅谈es6语法 (Proxy和Reflect的对比)
如下所示: { //原始对象 let obj={ time:'2017-03-11', name:'net', _r:123 }; //(代理商)第一个参数代理对象,第二个参数真正代理的东西 let monitor=new Proxy(obj,{ // 拦截对象属性的读取 get(target,key){ return target[key].replace('2017','2018') }, // 拦截对象设置属性 set(target,key,value){ if(key==='name')
-
ES6之Proxy的get方法详解
Proxy是在ES2015(ES6)中新添加内置对象,用于自定义一些基本操作. 这篇文章是我在学习Proxy的时候对于get方法的一些心得. 作为ES2015新定义的内置对象,Proxy 能够拦截并且自定义对象以及函数的一些基本操作,具有很高的优先级和便利性,能够让我们在写代码的时候多出一种解决难题的途径. Proxy的get方法用于拦截对象属性的读取操作,例如 obj.key 和 obj.[key].在给Proxy的handler参数中设置get方法后,每当进行读取操作时,会优先调用该get方
-
关于ES6中数组新增的方法详解
目录 在ES6之前,创建数组的方式有2种: Array.find((item,indexArr,arr)=>{}) 掌握 Array.findIndex((item, index, Arr) => {}) 掌握 Array.flat()用于拉平嵌套的数组[推荐-超级好用] Array.at()返回对应下标的值[超级好用] Array.from() [掌握] Array.of() 了解 Array.includes的使用 扩展运算符 (...) 数组的空位 总结 在ES6之前,创建数组的方式有2
-
让微信小程序支持ES6中Promise特性的方法详解
遇到的问题 微信开发者工具更新版本后, 移除了开发者工具对 ES6 中 Promise 特性原生的支持, 理由是因为实体机器是不支持 Promise 的, 所以我们需要引入第三方的 Promise 库 微信更新日志 解决方案 下载第三方库 在这里我引入的是 Bluebird 库, 可以到Bluebird官网 下载需要的文件,也可以通过本地下载 Bluebrid 提供了两种已经构建好的完整的 Promise 库文件, 未经压缩的 bluebird.js 和已压缩的 bluebird.min.js
-
javascript ES6中set集合、map集合使用方法详解与源码实例
set与map理解 ES6中新增,set集合和map集合就是一种数据的存储结构(在ES6之前数据存储结构只有array,object),不同的场景使用不同的集合去存储数据 set集合 Set 对象允许你存储任何类型的唯一值,无论是原始值或者是对象引用. set集合语法: //创建一个set集合,传参为一个可迭代的对象 const s1 = new Set(iterable); API 名称 类型 简介 Set.add() 原型方法 添加数据 Set.has() 原型方法 判断是否存在一个数据 S
-
ES6新增数据结构WeakSet的用法详解
WeakSet和Set类似,同样是元素不重复的集合,它们的区别是WeakSet内的元素必须是对象,不能是其它类型. 特性: 1.元素必须是对象. 添加一个number类型的元素. const ws = new WeakSet() ws.add(1) 结果是报类型错误. TypeError: Invalid value used in weak set 添加一个对象. const ws = new WeakSet() var a = {p1:'1', p2:'2'} ws.add(a) conso
-
详解JS数组Reduce()方法详解及高级技巧
基本概念 reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值. reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素,接受四个参数:初始值(或者上一次回调函数的返回值),当前元素值,当前索引,调用 reduce 的数组. 语法: arr.reduce(callback,[initialValue]) callback (执行数组中每个值的函数,包含四个参数) previousValue (上
-
CentOS 7.2 下编译安装PHP7.0.10+MySQL5.7.14+Nginx1.10.1的方法详解(mini版本)
一.安装前的准备工作 1.yum update #更新系统 2.yum install gcc gcc-c++ autoconf automake cmake bison m4 libxml2 libxml2-devel libcurl-devel libjpeg-devel libpng-devel libicu-devel #安装php.MySQL.Nngix所依赖的包 3.下载以下包 #我把所有源文件都下载在root目录,读者可自行修改源文件存放目录 3.1 libmcrypt-2.5.8
-
Android VideoCache视频缓存的方法详解
Android VideoCache视频缓存的方法详解 项目中遇到视频播放,需要加载网络url,不可能每次都进行网络加载,当然了,就需要用到我们的缓存机制 AndroidVideoCache AndroidVideoCache是一个视频/音频缓存库,利用本地代理实现了边下边播,使用起来非常简单. HttpProxyCacheServer是主要类,是一个代理服务器,可以配置缓存文件的数量.缓存文件的大小.缓存文件的目录和缓存文件命名算法,文件缓存均基于LRU算法,利用Builder来配置: //配
-
基于Vue的ajax公共方法(详解)
为了减少代码的冗余,决定抽离出请求ajax的公共方法,供同事们使用. 我使用了ES6语法,编写了这个方法. /** * @param type 请求类型,分为POST/GET * @param url 请求url * @param contentType * @param headers * @param data * @returns {Promise<any>} */ ajaxData: function (type, url, contentType, headers, data) {
-
JAVA发送http get/post请求，调用http接口、方法详解
三个例子 -JAVA发送http get/post请求,调用http接口.方法 例1:使用 HttpClient (commons-httpclient-3.0.jar jar下载地址:http://xiazai.jb51.net/201904/yuanma/commons-httpclient-3.0.rar import java.io.ByteArrayInputStream; import java.io.ByteArrayOutputStream; import java.io.IOE