- 积分
- 6429
- 下载币
- 个
- 帖子
- 主题
- 最后登录
- 1970-1-1
- 在线时间
- 小时
- 注册时间
- 2020-6-18
- 好友
- 听众
|
发表于 2020-12-28 13:44:31
|
显示全部楼层
|阅读模式
发布于:福建省福州市 电信
Proxy
在2020年来看Proxy早已经不是一个陌生的词了,他能做的是有很多,尤其在Vue3.0通过Proxy来重构之后,很多面试官喜欢问这个Proxy以及和Object.defineProperty的对比。
Proxy是专门为对象设置访问代理器的,通过Proxy可以轻松监视到对象的读写过程,相比于defineProperty,Proxy他的功能要更为强大甚至使用起来也更为方便。
这里我们定义一个person对象,我们通过new Proxy的方式来去为我们的person来创建一个代理对象。
Proxy构造函数的第一个参数就是我们需要代理的对象,这里是person,第二个参数也是一个对象,我们可以把这个对象称之为代理的处理对象,这个对象中可以通过get方法来去监视属性的访问,通过set方法来去介绍对象当中设置属性这样的一个过程。
- const person = {
- name: 'yd',
- age: 18
- }
- const personProxy = new Proxy(person, {
- get() {},
- set() {}
- })
复制代码
先来看get方法,这个方法最简单可以接收两个参数,第一个就是所代理的目标对象,第二个就是外部所访问的这个属性的属性名。这个方法的返回值将会作为外部去访问这个属性得到的结果。
- {
- get(target, property) {
- console.log(target, property);
- return property in target ? target[property] : undefined;
- }
- }
复制代码
再来看下set方法,这个方法默认接收三个参数, 分别是代理目标对象,以及我们要写入的属性名称还有最后我们要写入的属性值。我们可以做一些校验,比如说如果设置的是age,他的值就必须是整数,否则就抛错。
- {
- set(target, property, value) {
- console.log(target, property, value);
- if (property === 'age') {
- if (!Number.isInteger(value)) {
- throw new TypeError(``${value} must be a integer);
- }
- }
- target[property] = value;
- }
- }
复制代码
相比于Object.defineProperty, Proxy到底有哪些优势。
首先最明显的优势就是在于Proxy要更为强大一些,那这个强大具体体现在Object.defineProperty只能监听到对象属性的读取或者是写入,而Proxy除读写外还可以监听对象中属性的删除,对对象当中方法的调用等等。
第二点优势就是对于数组对象进行监视,通常我们想要监视数组的变化,基本要依靠重写数组方法,这也是Vue的实现方式,proxy可以直接监视数组的变化。以往我们想要通过Object.defineProperty去监视数组的操作最常见的方式是重写数组的操作方法,这也是Vue.js中所使用的方式,大体的方式就是通过自定义的方法去覆盖掉数组原型对象上的push,shift之类的方法,以此来劫持对应的方法调用的过程。
本文转自微信公众号文章:从面试官角度看一次前端面试经历(6 个考察点)
https://mp.weixin.qq.com/s/4wt-ulMx6EKcV75W5ioPrw |
|