ES6新特性 Proxy Myth丶恋晨 2022-02-22 19:30 160阅读 0赞 ## intro ## `var proxy = new Proxy(target, handler);` `target` 被代理的对象|目标 用Proxy包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理） `handler` 处理器(声明了代理target的指定行为) 一个对象，其属性是当执行一个操作时定义代理的行为的函数。 * 官方解释 `Proxy`对象用于定义基本操作的自定义行为(如属性查找，赋值，枚举，函数调用等)。 * `handler` 包含陷阱（traps）的占位符对象。 * `traps` 提供属性访问的方法。这类似于操作系统中陷阱的概念。 * `target` 代理虚拟化的对象。它通常用作代理的存储后端。 根据目标验证关于对象不可扩展性或不可配置属性的不变量（保持不变的语义）。 ## 代理的使用(使用构造方法) ## 读|写属性操作的代理 var target = { name: "JT", age: 22 } var handler = { get: function(target, property) { console.log(`读属性操作的代理 执行 ${property}`); return target[property]; // 推荐使用[]，而非.访问其成员。 }, set: function(target, property, value) { console.log(`写属性操作的代理 执行 ${property} ${value}`); target[property] = value; // 若为"strict mode"则需要返回值(表示写操作是否成功执行)。 } } var proxy = new Proxy(target, handler); // 定义代理对象(不可撤销的代理) console.log(proxy); // Proxy {name: "JT", age: 22} console.log(proxy.name); // 读操作 会触发handler.get() // 读属性操作的代理 执行 name // JT proxy.age = 88; // 写操作 会触发handler.set() // 写属性操作的代理 执行 age 88 // 88 console.log(proxy); // Proxy {name: "JT", age: 88} ![proxy-constructor][] `target`和`handlder`不可为`null`，但可为空对象`{}`。 若`handdler === {}`，相当于**未设置拦截|代理操作**，会直接访问被代理对象|目标对象`target`。 以上是`handler.get(target, property, ?receiver)` 及`handler.set(target, property, value, ?receiver)`。 `handler`中还有其他11个代理方法，用于拦截一些基本操作。 详见：[JS中Proxy对象的handler参数详解][JS_Proxy_handler] ## 代理的废除(`revocable`) ## `Proxy.revocable(target, handler)` * 参数 * `target` * `handler` * 返回值：一个对象`{"proxy":proxy, "revoke":revoke}`。 * `proxy` 表示新生成的代理对象本身，和一般方式用`new Proxy(target, handler)`创建的代理对象的唯一不同之处：这样的代理对象可以被撤销掉。 * `revoke` 撤销方法。用于撤销和他一起生成的那个代理对象。 当撤销某个代理对象后(`proxy.revoke()`)，该代理对象将变得不可用。 在该代理对象上执行任何可代理操作(**13种**)都会跑出`TypeError`异常。 ## 代理的使用(通过`Proxy.revocable(target, handler)`) ## var target = {}; // 空target var handler = { // 读属性操作的代理 get(target, name) { console.log("读属性操作的代理..."); return `test: ${name}`; } }; var revocable = Proxy.revocable(target, handler); console.log(revocable); // {proxy: Proxy, revoke: ƒ} var proxy = revocable.proxy; // 获取代理对象 console.log(proxy.eat); // 使用代理对象 console.log(proxy.foo); revocable.revoke(); // 撤销代理对象 // console.log(proxy.eat) // TypeError: Cannot perform 'get' on a proxy that has been revoked // delete proxy.eat; // TypeError: Cannot perform 'deleteProperty' on a proxy that has been revoked ![proxy-revocable][] [proxy-constructor]: /images/20220222/8896968778d447948ab70ef770c58d87.png [JS_Proxy_handler]: https://blog.csdn.net/wuyujin1997/article/details/89137999 [proxy-revocable]: /images/20220222/f61fb2d8700e47d19d9e394263e1aadd.png
相关 ES6新特性 ES6， 全称 ECMAScript 6.0 ，是 JavaScript 的下⼀个版本标准，2015.06 发版。ES6 主要是为了解决 ES5 的先天不⾜，⽐如 Jav... 矫情吗；*/ 2024年04月21日 08:03/ 0 赞/ 84 阅读
相关 ES6新特性 文章目录 一、ECMASript 介绍 二、ES6 新特性 2.1 let、const 关键字 2.2 变量的解构赋值 ゝ一世哀愁。/ 2022年09月06日 15:27/ 0 赞/ 288 阅读
相关 es6新特性 1.let && const •都是块级作用域 •不能重复定义 •避免了变量提升 ① let命令也用于声明对象，但是作用域为局部。 ![在这里插入图片描述][ 红太狼/ 2022年03月07日 21:24/ 0 赞/ 378 阅读
相关 ES6新特性 Proxy intro `var proxy = new Proxy(target, handler);` `target` 被代理的对象|目标 用Proxy包装的目标对象（ Myth丶恋晨/ 2022年02月22日 19:30/ 0 赞/ 161 阅读
相关 es6新特性 es6语法 > es6语法用起来是十分方便的，但是有些浏览器还是不支持，但是做大型项目中基本上要用到转码器（babel转码器），可以把es6语法转为es5直接使用。 T 落日映苍穹つ/ 2022年01月25日 15:30/ 0 赞/ 379 阅读
相关 ES6新特性 转：[https://www.jianshu.com/p/87008f4f8513][https_www.jianshu.com_p_87008f4f8513] co Bertha 。/ 2022年01月12日 02:19/ 0 赞/ 352 阅读
相关 ES6新特性 转自：[https://www.jianshu.com/p/87008f4f8513][https_www.jianshu.com_p_87008f4f8513] 1.con 冷不防/ 2021年12月18日 07:07/ 0 赞/ 355 阅读
相关 es6新特性 https://www.cnblogs.com/minghui007/p/8177925.html 转载于:https://www.cnblogs.com/LWWTT/p/1 野性酷女/ 2021年11月02日 14:58/ 0 赞/ 516 阅读
相关 ES6新特性 1.变量声明let和const 在ES6以前，var关键字声明变量。无论声明在何处，都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部)。这就是函数变量提升例如: 我会带着你远行/ 2021年10月29日 07:08/ 0 赞/ 527 阅读
相关 ES6新特性 1.声明变量的关键字：const 和 let JavaScript ES6中引入了另外两个声明变量的关键字：const和let。在ES6中，我们将很少能看到var了。 co 电玩女神/ 2021年09月17日 01:12/ 0 赞/ 515 阅读
矫情吗；*
红太狼
Myth丶恋晨
Bertha 。
野性酷女
我会带着你远行
还没有评论，来说两句吧...