ES6 Proxy的学习与理解

发布时间:2019-08-09 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了ES6 Proxy的学习与理解脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

问题

前一段时间在字节跳动时聊到了Proxy。起因是问道@L_360_0@中数据绑定的实现,回答通过设置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的学习与理解全部内容,希望文章能够帮你解决ES6 Proxy的学习与理解所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。