Reflect   是ES6 为了操作对象而提供的新的API, 目的是:

  1. 将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的更多相关文章

  1. ES6入门系列三(特性总览下)

    0.导言 最近从coffee切换到js,代码量一下子变大了不少,也多了些许陌生感.为了在JS代码中,更合理的使用ES6的新特性,特在此对ES6的特性做一个简单的总览. 1.模块(Module) --C ...

  2. ES6入门系列 ----- 对象的遍历

    工作中遍历对象是家常便饭了,遍历数组的方法五花八门, 然而很多小伙伴是不是和我之前一样只会用for ...in.... 来遍历对象呢, 今天给大家介绍五种遍历对象属性的方法: 1, 最常用的for  ...

  3. ES6 入门系列 (一)ES6的前世今生

    要学好javascript , ECMAScript标准比什么都强, ESMAScript标准已经用最严谨的语言和最完美的角度展现了语言的实质和特性. 理解语言的本质后,你已经从沙堆里挑出了珍珠,能经 ...

  4. ES6入门系列四(测试题分析)

    0.导言 ES6中新增了不少的新特性,来点测试题热热身.具体题目来源请看:http://perfectionkills.com/javascript-quiz-es6/. 以下将一题一题来解析what ...

  5. ES6入门系列一(基础)

    1.let命令 Tips: 块级作用域(只在当前块中有效) 不会变量提升(必须先申明在使用) 让变量独占该块,不再受外部影响 不允许重复声明 总之:let更像我们熟知的静态语言的的变量声明指令 ES6 ...

  6. ES6 入门系列 - 函数的扩展

    1函数参数的默认值 基本用法 在ES6之前,不能直接为函数的参数指定默认值,只能采用变通的方法. function log(x, y) { y = y || 'World'; console.log( ...

  7. ES6 入门系列 - let 和 const 命令

    let命令 基本用法 ES6新增了let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效. { let a = ; ; } a // ReferenceEr ...

  8. ES6入门系列二(数值的扩展)

    ES6 在 Number对象上新增了很多方法 1 .    Number.isFinite()判断是否为有限的数字 和全局的isFinite() 方法的区别是 isFinite('1') === tr ...

  9. ES6入门系列 ----- 使用Proxy 实现观察者模式

    观察者模式是指函数自动观察数据对象的变化, 一旦对象有变化,函数就会自动执行. 它定义了一种一对多的依赖关系,我们用Proxy来实现一个简单的观察者模式(PS: 初学我们认为 观察者模式 == 发布订 ...

随机推荐

  1. 如何防止XSS攻击?

    来自: https://www.freebuf.com/articles/web/185654.html 前端安全 随着互联网的高速发展,信息安全问题已经成为企业最为关注的焦点之一,而前端又是引发企业 ...

  2. LeetCode 102. Binary Tree Level Order Traversal02. 二叉树的层次遍历 (C++)

    题目: Given a binary tree, return the level order traversal of its nodes' values. (ie, from left to ri ...

  3. luoguP3172 [CQOI2015]选数

    题意 所求即为: \(\sum\limits_{i_1=L}^{R}\sum\limits_{i_2=L}^{R}...\sum\limits_{i_k=L}^{R}[\gcd(i_1,i_2,... ...

  4. 迪杰斯特拉算法完整代码(Java)

    package com.rao.graph; import java.util.*; /** * @author Srao * @className Dijkstra * @date 2019/12/ ...

  5. pycharm配置mysql数据库连接访问

    如图,这是打开后的默认界面.找到界面的“Data base”选项并点击. 这里可以看到当前项目配置的数据库,如果为空,表示未配置数据库.我们可以点击上方“+”号来配置,点击“+”号.在下拉框中我们选择 ...

  6. SQL Server 迁移数据库 (二)分离和附加

    分离和附加其实比导入和导出,步骤要少一些,但是数据量大的话,跨服务器拷贝数据文件可能要慢一些 1. 分离数据库 这里最好选择断开链接,断开之前要确保你记得数据库的路径,一般默认都是C:\Program ...

  7. 【day03】php

    一.类型判别函数库 1.安装:类型判别函数库是PHPCORE的组成部分,不用安装 2.  (1)is_integer|is_int|is_long     描述:  检测变量是否是整数     格式: ...

  8. c++的CreateFile导致内存不能为written错误

    LPCWSTR szFileName; szFileName=argv[2]; //LPCWSTR szFileName=L"test.txt";//文件名字可以根据自己的需要修改 ...

  9. 戴尔灵越14燃5488安装LTSC2019

     戴尔笔记本应该改成ahci模式之后再进行分区和重装系统操作,否则很难折腾的 戴尔灵越14燃5488不能安装LTSB2016,因为显卡驱动不支持,安装LTSC2019可以,亲测. 这款笔本似乎NVME ...

  10. [LeetCode] 884. Uncommon Words from Two Sentences 两个句子中不相同的单词

    We are given two sentences A and B.  (A sentence is a string of space separated words.  Each word co ...