ES6 Proxy的学习与理解

LinkedME2016 发布于2019-08-23 15:15 / 1423人阅读

摘要：是中添加的内置对象，和配合功能十分强大。理解根据的文档，是对原对象的包装。可以包装的内容包括一系列等，值得注意的是同样是一种可以拦截的操作。同时，对于未定义的操作保持原结果。

问题

前一段时间在字节跳动时聊到了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

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

混合云超融合服务器深度学习与理解深度学习的理解深度学习理解如何理解深度学习

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101747.html

ES6之Proxy学习

摘要：在中构造器的典型特点就是首字母大写，我们通过原对象代理列表格式去创建对象创建的这个对象我们称之为代理对象。就是原对象是当前的属性名是代理对象。理解为明星的经理人消极怠工原封不动地转告外界的信息给明星本身。但是要注意与是两个不同的对象。 ES6之Proxy proxy的中文有代理的意思。在其他的程序设计语言中这个单词也具有类似的含义。它是什么 Proxy是一个构造器。在js中构造器的典...

UnixAgain 2019-08-23 12:09 评论0 收藏0
【资源集合】 ES6 元编程（Proxy & Reflect & Symbol）

摘要：理解元编程和是属于元编程范畴的，能介入的对象底层操作进行的过程中，并加以影响。元编程中的元的概念可以理解为程序本身。中，便是两个可以用来进行元编程的特性。在之后，标准引入了，从而提供比较完善的元编程能力。导读几年前 ES6 刚出来的时候接触过元编程（Metaprogramming）的概念，不过当时还没有深究。今天在应用和学习中不断接触到这概念，比如 mobx 5 中就用到了 Pr...

aikin 2019-08-23 11:28 评论0 收藏0
JS每日一题：如何理解es6中的Proxy？

20190124问: 如何理解es6中的Proxy？试题解析:对proxy的理解，可能会延伸到vue的双向绑定 Proxy（代理）定义可以理解为为目标对象架设一层拦截，外界对该对象的访问，都必须通过这层拦截简单示例: const obj = new Proxy({}, { get: (target, key, receiver) => { return JS ...

tinysun1234 2019-08-23 14:58 评论0 收藏0
JS每日一题：如何理解es6中的Proxy？

20190124问: 如何理解es6中的Proxy？试题解析:对proxy的理解，可能会延伸到vue的双向绑定 Proxy（代理）定义可以理解为为目标对象架设一层拦截，外界对该对象的访问，都必须通过这层拦截简单示例: const obj = new Proxy({}, { get: (target, key, receiver) => { return JS ...

PumpkinDylan 2019-08-02 14:09 评论0 收藏0
理解Javascript的Proxy

摘要：关于在计算机领域是一个很普遍的概念，中文通常翻译为代理，代理一般用于描述某人或某事代表他人行事。常见的概念有代理服务器反向代理代理模式等。所以至少可以起到两方面的作用进行访问控制和增加功能。理解了上面两个问题，学习的就简单多了。关于Proxy Proxy在计算机领域是一个很普遍的概念，中文通常翻译为代理，代理一般用于描述某人或某事代表他人行事。常见的概念有Proxy Server（代...

adie 2019-08-23 11:41 评论0 收藏0