Proxy 对象的全面了解与深入学习指南

1、Proxy 对象到底是什么？

proxy 对象到底是什么呢？proxy 的意思是 代理，proxy对象的作用是：通过proxy 创建1个代理对象，然后通过操作代理对象允许你对指定的对象的一些行为进行自定义处理。

Proxy(target,handler); Proxy构造函数接收2个对象，第1个参数就是要处理的对象，第2个参数就是要自定义处理的方法的合集(也就是个对象)。

很抽象？其实就和js中的Object.defineProperty很像(也就是访问器属性,vue2.x的底层就是用它来实现的)。

Object.defineProperty 定义访问器属性，可以对某个属性的读写行为进行控制，在Proxy中也可以做到，而且Proxy更灵活和强大，它能做到很多访问器属性做不到的事情。

比如，监听属性删除事件(delete obj.prop;),in 事件('id' in obj;), apply 调用等。

先来看看，proxy对象有哪些内容。

看看打印的proxy是什么鬼，如下图。

可以看到，proxy对象中，包含了Handler属性和Target属性和IsRevoked，它们的值分别是我们传入的handler以及 targetObj和false。

这个isRevoked表示是否可撤销，生成可撤销的proxy对象用Proxy.revocable()方法，具体可去MDN查看文档。

2、通过Proxy 对象操作原对象

上面我们创建了1个proxy对象，现在我们尝试通过操作proxy对象来操作原对象，操作proxy对象就和操作原生对象一样即可。(其实是proxy对象内部做了映射。)

3、set方法和get方法

好，现在我们可以开始干预原来对象的行为了，具体我们通过实现以下方法达到干预对象行为的目的。

• handler.apply

• handler.construct       干预构造函数的new 行为

• handler.defineProperty  干预对象的数据属性或者访问器属性定义

• handler.deleteProperty  干预对象的属性删除行为

• handler.get             干预对象的属性读取行为

• handler.getOwnProperty  干预对象的属性的特征值

• handler.has             干预对象的in行为(prop in obj)

• handler.isExtensible

• handler.ownKeys

• handler.set             干预对象的属性设置行为

• ...

先来干预get行为(属性读取行为)

接下来把某些属性变为 “私有” ，如不允许读取id属性

定义set方法，不允许修改id,name,age属性

4、干预删除行为(对delete obj.prop语句生效)

同样的，我们对删除对象属性的行为进行干预，不允许删除id,name,age属性。

5、干预prop in obj行为(判断对象是否有某个属性)

上面我们不允许获取对象的id值，也不可以修改和删除，现在我们把它隐藏掉。

6、总结

同样的，proxy还能干预对象的行为还有很多，这里就不一一介绍了。

以上就是Proxy 对象的全面了解与深入学习指南的详细内容！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。