ES6入门系列 ----- Reflect
程序员文章站
2024-01-04 10:54:04
Reflect 是ES6 为了操作对象而提供的新的API, 目的是: 现阶段某些方法同时在Object , Reflect 上部署, 未来的新方法将只在Reflect对象上部署,也就是说 从Reflect对象上可以获得语言内部的方法。 2. 修改某些Object 方法的返回结果,让其变得更合理。 3 ......
reflect 是es6 为了操作对象而提供的新的api, 目的是:
- 将object 上一些明显属于语言内部的方法,比如 object.defineproperty 放到 reflect对象上
现阶段某些方法同时在object , reflect 上部署, 未来的新方法将只在reflect对象上部署,也就是说
从reflect对象上可以获得语言内部的方法。
2. 修改某些object 方法的返回结果,让其变得更合理。
3.让object的操作都变成函数行为。某些object操作是命令式,比如name in obj 和
delete obj[name], 而reflect.has(obj, name) 和 reflect.deleteproperty(obj, name) 让它们变成了函数行为。
4.reflect 对象的方法与proxy 对象的方法一一对应, 只要是proxy 对象上的方法, 就能在reflect 对象上找到对应的方法。这就使proxy对象可以方便地调用对应reflect的方法来完成默认行为,作为修改行为的基础。无论proxy怎么修改默认行为,我们总可以在reflect上获取默认行为。
看个例子:
const des = { name: 'liu', age: 18 }; const newdes = new proxy(des, { set: function (target, name, value, receiver) { let res = reflect.set(target, name, value, receiver); // 额外行为 if (res) { console.log(res) reflect.set(target, 'age', 80, receiver); } return res } }); console.log(newdes); newdes.name = 'xxxx'; console.log(newdes);
我们对 对象des 的set 方法 做了一层拦截, 每当newdes 设置值的时候,我们先用
reflect.set() 保证默认行为, 默认行为成功后 再执行我们的额外行为,也就是把age 变成80.
看下执行结果:
ok , 默认行为name设置成功, 额外行为age也设置成功,
我们还可以代理对象内部的其他方法:
const des = { name: 'liu', age: 18 }; const newdes = new proxy(des, { set(target, name, value, receiver) { let res = reflect.set(target, name, value, receiver); // 额外行为 if (res) { console.log(res); reflect.set(target, 'age', 80, receiver); } return res }, deleteproperty(target, p) { console.log('delete ' + p); return reflect.deleteproperty(target, p); }, get(target, p, receiver) { console.log('get ' + p); return reflect.get(target, p, receiver); } }); const name = newdes.name; delete newdes.age;
拦截对象的get方法 和 delete 指令
结果:
拦截成功。
推荐阅读
-
ES6入门系列 ----- Reflect
-
ABP入门系列(6)——展现层实现增删改查
-
ES6 逐点突破系列 -- Set Map
-
spring cloud 入门系列二:使用Eureka 进行服务治理
-
Android OpenGL ES 入门系列(五) --- 应用投影和相机视角
-
Mysql入门系列:MYSQL客户机程序2―增加错误检查[组图]_MySQL
-
ES6 系列之 Generator 的自动执行的方法示例
-
ES6入门教程之Class和Module详解
-
【CSS3 入门教程系列】CSS3 Media Queries 实现响应式设计_html/css_WEB-ITnose
-
ES6入门---let和const