JavaScript ES6 Proxy学习笔记

好久没来更新博客了，之前因为复习周和找实习发生了很多事情，安定下来后需要好好补补了。

最近使用了vue3之后，发现很多地方都用到了Proxy，有必要了解一下。

本笔记摘自《ECMAScript6标准入门》第12章。

Proxy，听名字就知道，它是与代理相关的东西。在ES6中，Proxy用于修改某些操作的默认行为，属于元编程的一种，在语言层面上进行修改。

既然说到代理，那Proxy的工作方式就离不了和代理有关系。其实确实是这样，Proxy在访问目标对象前架设了一层拦截或过滤，如果外界需要访问一个对象，必须先走架设在对象之上的Proxy，这个机制可以对外界的访问进行过滤和改写，也就做到了修改默认行为的效果。

Proxy是一个对象，默认写法是：

let foo = new Proxy(target, handler);

其中，target是一个对象，代表foo这个变量本来就应该包含的内容，handler也是一个对象，其中需要设置对象的get和set方法，也就是针对target中内容的读取和写入时，会触发的事情。其实，Proxy可以拦截的操作不仅只有get和set，这里仅作简单举例。每一个拦截的方法都有其参数的要求，可以查询文档了解其具体使用方法。

如果用一种不太规则的写法解释Proxy的定义，可能像下面这样：

let target = {...};
let handler = {...};
let foo = target;
foo.添加拦截(handler);

Proxy实例可以作为其他对象的原型对象，沿着原型链走。Proxy支持的拦截方法有：

• get：用于拦截某个属性的读取操作
• set：用于拦截某个属性的赋值操作
• has：用于拦截HasProperty操作，判断对象是否具有某个属性时会生效的操作，典型的操作比如in运算符
• defineProperty：拦截同名操作
• ownKeys：拦截对象自身属性的读取操作
• getOwnPropertyDescriptor：拦截同名操作，返回一个属性描述对象或者undefined
• deleteProperty：用于拦截delete操作，如果这个方法返回了false或者抛出错误，则本次delete会失效
• preventExtensions：拦截同名方法，只能返回bool值
• getPrototypeOf：拦截获取对象原型的操作
• isExtensible：拦截同名操作
• setPrototypeOf：拦截同名操作
• apply：拦截函数的调用，call和apply的操作
• ``construct`：拦截new命令

使用proxy会带来一个this问题，也就是它并非透明代理，而是在目标对象的外面套了一层壳，使用this访问得到的是Proxy而不是对象本身。

打赏