ES6入门系列 ----- Reflect
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的更多相关文章
- ES6入门系列三(特性总览下)
0.导言 最近从coffee切换到js,代码量一下子变大了不少,也多了些许陌生感.为了在JS代码中,更合理的使用ES6的新特性,特在此对ES6的特性做一个简单的总览. 1.模块(Module) --C ...
- ES6入门系列 ----- 对象的遍历
工作中遍历对象是家常便饭了,遍历数组的方法五花八门, 然而很多小伙伴是不是和我之前一样只会用for ...in.... 来遍历对象呢, 今天给大家介绍五种遍历对象属性的方法: 1, 最常用的for ...
- ES6 入门系列 (一)ES6的前世今生
要学好javascript , ECMAScript标准比什么都强, ESMAScript标准已经用最严谨的语言和最完美的角度展现了语言的实质和特性. 理解语言的本质后,你已经从沙堆里挑出了珍珠,能经 ...
- ES6入门系列四(测试题分析)
0.导言 ES6中新增了不少的新特性,来点测试题热热身.具体题目来源请看:http://perfectionkills.com/javascript-quiz-es6/. 以下将一题一题来解析what ...
- ES6入门系列一(基础)
1.let命令 Tips: 块级作用域(只在当前块中有效) 不会变量提升(必须先申明在使用) 让变量独占该块,不再受外部影响 不允许重复声明 总之:let更像我们熟知的静态语言的的变量声明指令 ES6 ...
- ES6 入门系列 - 函数的扩展
1函数参数的默认值 基本用法 在ES6之前,不能直接为函数的参数指定默认值,只能采用变通的方法. function log(x, y) { y = y || 'World'; console.log( ...
- ES6 入门系列 - let 和 const 命令
let命令 基本用法 ES6新增了let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效. { let a = ; ; } a // ReferenceEr ...
- ES6入门系列二(数值的扩展)
ES6 在 Number对象上新增了很多方法 1 . Number.isFinite()判断是否为有限的数字 和全局的isFinite() 方法的区别是 isFinite('1') === tr ...
- ES6入门系列 ----- 使用Proxy 实现观察者模式
观察者模式是指函数自动观察数据对象的变化, 一旦对象有变化,函数就会自动执行. 它定义了一种一对多的依赖关系,我们用Proxy来实现一个简单的观察者模式(PS: 初学我们认为 观察者模式 == 发布订 ...
随机推荐
- 【洛谷P3756】[CQOI2017]老C的方块(最小割)
洛谷 题意: 给出一个网格图类似于这样: 现在给出一个\(n*m\)大小的网格,之后会给出一些点,若某些点相连形成了如下的几个图案,那么就是不好的. 现在可以删去一些点,但删除每个点都有一些代价,问最 ...
- centos7-cockpit
yum install cockpit* -y systemctl start cockpit.service systemctl enable cockpit.service 修改默认端口9090 ...
- 修改woocommerce列表产品显示数量
WooCommerce列表产品数量默认显示为10,如果是显示3列或4列,则最后一行会有空白留出,为了美观,往往我们要设置显示合适的产品数量.因此,只要把如下代码复制到当前主题的functions.ph ...
- nginx 配置使用index.php作为目录的默认加载文件
配置如下: 在server增加一行: index index.php index.html index.htm default.php default.htm default.html 增加后如下: ...
- LoadRunner Controller集合点策略灰色问题 解决
1.脚本里已经添加了集合点,但是在Controller里集合点策略是灰色的无法点击 2.问题解决: 将下图的勾选项去掉即可(系统默认是勾选上的) 去掉勾选后可以选择了:
- 图学Kubernetes
所有图片来自:Kubernetes Patterns: Reusable Elements for Designing Cloud-Native Applications 本文图片摘要曾经在某大厂内网 ...
- LG5338/BZOJ5509/LOJ3105 「TJOI2019」甲苯先生的滚榜 Treap
问题描述 LG5338 LOJ3105 BZOJ5509 题解 建立一棵\(\mathrm{Treap}\),把原来的\(val\)换成两个值\(ac,tim\) 原来的比较\(val_a<va ...
- oracle sql语言模糊查询
'^' 匹配输入字符串的开始位置,在方括号表达式中使用,此时它表示不接受该字符集合.'$' 匹配输入字符串的结尾位置.如果设置了 RegExp 对象的 Multiline 属性,则 $ 也匹配 '\n ...
- MySQL使用的几条注意事项和1449错误解决方案
一.如何在Windows终端连接MySQL? 使用cmd进入终端,然后要进入到你安装MySQL的bin目录下(如果没有的话,会出现该命令无效之类的错误),然后使用命令mysql -u root -p, ...
- 关于App收集个人信息基本规范,这里公开征求你的意见!
关于App收集个人信息基本规范,这里公开征求你的意见! https://www.thepaper.cn/newsDetail_forward_4122573 以后国家开始规范App收集个信息基本规范, ...