JavaScript ES6 Proxy学习笔记

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

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

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

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

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

Proxy是一个对象,默认写法是:

1
let foo = new Proxy(target, handler);

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

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

1
2
3
4
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而不是对象本身。

打赏
  • 版权声明: 本博客所有文章除特别声明外,著作权归作者所有。转载请注明出处!
  • Copyrights © 2018-2021 Shawn Zhou
  • Hexo 框架强力驱动 | 主题 - Ayer
  • 访问人数: | 浏览次数:

感谢打赏~

支付宝
微信