ES6 Proxy的学习与理解

栏目: JavaScript · 发布时间: 5年前

内容简介:前一段时间在字节跳动时聊到了Proxy。起因是问道Vue中数据绑定的实现,回答通过设置setter和getter实现,问这样有什么缺点,答在对对象的属性的监控方面存在瑕疵,例如通过直接设置数组下标进行赋值,或者对对象直接进行修改,是无法观察到的,必须使用Vue.set添加,或者使用Array.prototype.push等方法。面试官介绍说在Vue3中已经通过Proxy解决了这个问题。Proxy是ES6中添加的内置对象,和Reflect配合功能十分强大。正好今天看到一个问题。根据MDN的文档,Proxy是对

问题

前一段时间在字节跳动时聊到了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.prototype
o 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() // false
proxy.m()  // true

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


以上所述就是小编给大家介绍的《ES6 Proxy的学习与理解》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

删除

删除

[英] 维克托•迈尔-舍恩伯格(Viktor Mayer-Schönberger)著 / 袁杰 译 / 浙江人民出版社 / 2013-1 / 49.90元

《删除》讲述了遗忘的美德,为读者展现了大数据时代的取舍之道。 《删除》从大数据时代信息取舍的目的和方法分别诠释了“被遗忘的权利”。维克托首先回溯了人类追寻记忆的过程,之后提出数字技术与全球网络正在瓦解我们天生的遗忘能力。对此,他考察了促进遗忘终止4大驱动力——数字化,廉价的存储器,易于提取,全球性访问。之后,他提出了当前数字化记忆的两大威胁——信息权力与时间,并给出了应对威胁的6大对策——数......一起来看看 《删除》 这本书的介绍吧!

html转js在线工具
html转js在线工具

html转js在线工具

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具