博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
ES6 Proxy的学习与理解
阅读量:6418 次
发布时间:2019-06-23

本文共 949 字,大约阅读时间需要 3 分钟。

问题

前一段时间在字节跳动时聊到了Proxy。起因是问道Vue中数据绑定的实现,回答通过设置setter和getter实现,问这样有什么缺点,答在对对象的属性的监控方面存在瑕疵,例如通过直接设置数组下标进行赋值,或者对对象直接进行修改,是无法观察到的,必须使用Vue.set添加,或者使用Array.prototype.push等方法。

面试官介绍说在Vue3中已经通过Proxy解决了这个问题。Proxy是ES6中添加的内置对象,和Reflect配合功能十分强大。正好今天看到一个。

理解

根据MDN的文档,Proxy是对原对象的包装。可以包装的内容包括一系列get、set等,值得注意的是getPrototypeOf同样是一种可以拦截的操作。同时,对于未定义的操作保持原结果。

在instanceof的页面,可以看到如下示例

function C() {}function D() {}var o = new C();// true, because: Object.getPrototypeOf(o) === C.prototypeo instanceof C;

那么,在上面那个问题中,既然未定义proxy的getPrototypeOf,那它就该与原对象保持一致。使用以下代码进行验证:

Object.getPrototypeOf(proxy) === Array.prototype //true

进一步思考

那么,是不是对于一切行为,在不做任何拦截的情况下,就能保证与目标对象的行为完全一致呢?很显然,这是不可能的。例如

a = {}b = new Proxy(a, {})console.log(a === b) //false

以及this的指向问题(案例来自)

const target = {  m: function () {    console.log(this === proxy);  }};const handler = {};const proxy = new Proxy(target, handler);target.m() // falseproxy.m()  // true

虽然大部分情况下这应该不会成为大的障碍,但遇到错误的时候可以从这里入手寻找问题。

转载地址:http://dmpra.baihongyu.com/

你可能感兴趣的文章
小程序模板嵌套以及相关遍历数据绑定
查看>>
Systemd入门教程:命令篇(转)
查看>>
spring事务学习(转账案例)(二)
查看>>
[官方教程] [ES4封装教程]1.使用 VMware Player 创建适合封装的虚拟机
查看>>
http协议与http代理
查看>>
【iOS开发-91】GCD的同步异步串行并行、NSOperation和NSOperationQueue一级用dispatch_once实现单例...
查看>>
Redis+Spring缓存实例
查看>>
Storm集群安装详解
查看>>
centos7.x搭建svn server
查看>>
原码编译安装openssh6.7p1
查看>>
easyui-datetimebox设置默认时分秒00:00:00
查看>>
蚂蚁分类信息系统5.8多城市UTF8开源优化版
查看>>
在django1.2+python2.7环境中使用send_mail发送邮件
查看>>
“Metro”,移动设备视觉语言的新新人类
查看>>
PHP源代码下载(本代码供初学者使用)
查看>>
Disruptor-NET和内存栅栏
查看>>
Windows平台ipod touch/iphone等共享笔记本无线上网设置大全
查看>>
播放加密DVD
查看>>
产品设计体会(3013)项目的“敏捷沟通”实践
查看>>
RHEL6.3基本网络配置(1)ifconfig命令
查看>>