js中的Reflect入门讲解

这个玩意和那个 Proxy 对象一样，是es6为了操作对象而提供的Api, 个人理解吧，应该是为了防止你直接操作对象(object, 函数)，做出的一个代替方案；

比如之前使用的 Obejct.defineProperty(),Object.getOwnProperty(), Object.setPrototype(); 等等这些语言层面的 api 的替代品吧

特别是那个defineProperty 不是用在vue中的双向数据绑定使用的吗，用过vue的童鞋肯定知道了，我已经很久没用过了，也不会vue了，渐渐淡忘

1. 先上个小例子吧

下面的代码会输出一个 true 就是 name属性在obj这个对象中

var obj = {name: 'zyc', job: '前端开发'};
console.log('name' in obj);

换成 Reflect 的写法就是

Reflect.has(target, key); // 第一个是目标对象第二个是参数是不是更直观明了

var obj = {name: 'zyc', job: '前端开发'};
console.log(Reflect.has(obj, 'name'));

2. 其实吧 Reflect 也是很方便

之前我们要是使用 Object 更改对象的一些属性之后可能需要通过 try catch 来进行捕获错误改成 Reflect 之后如果更改失败会给我们返回一个 false 这样其实更加方便了

3. Reflect的api 静态方法对常用的方法进行解释哈

3.1 Reflect.get(target, property, receiver); // 很简单其实就是获取对象的某个属性值第三个参数表示一个接受着一般配合proxy代理对象使用等同于 obj.name;

如果目标对象配置个 getter 函数那么 this 将指向那个 receiver 所以下面输出了小明王倩

var obj = {name: 'zyc', job: '前端开发', get foo() { return this.name + this.job;}};
console.log(Reflect.get(obj, 'foo', { name: '小明', job: '王倩' })); // 输出 小明王倩

注意: 如果第一个参数不是对象的话会报错

3.2 Reflect.set(target, property, value, receiver); // 设置某个属性值等同于如 obj.name = "xxx"

3.3 Reflect.has(target, property); // 判断属性是否在目标对象上等同于 key in target

3.4 Reflect.deleteProperty(target, property); // 删除对象上的某个属性等同于 delete obj[property]

3.5 Reflect.construct(target, args); // 使用构造函数等同于 new Target(...args); 类似apply的那个用法

function Person(name, age) {this.name = name;this.age = age;
}
var a = new Person('小明', 22);
var b = Reflect.construct(Person, ['小明', 22]);
console.log(b);

3.6 Reflect.getPrototypeOf(obj); // 用于读取这个对象的 __proto__ 等同于 Object.getPrototypeOf()

3.7 Reflect.setPrototypeOf(obj); // 用于设置这个对象的 __proto__ 等同于 Object.setPrototypeOf()

3.8 Reflect.apply(func, this, args); // 调用某个函数并制定this作用域等同于 Function.prototype.apply()

举个例子比如查找数组中的最小或最大值

以前的用法可能是

Math.max.apppy(Math, ...args); 换成 Reflect的话就是

var arr = [2, 5, 6, 9, 11];console.log(Reflect.apply(Math.max, Math, arr));   // 输出 11

3.9 Reflect.defineProperty(target, property, value); // 给某个对象添加新的属性值或者覆盖之前的属性值

3.10 Reflect.ownKeys(); // 获取对象的键值返回一个数组等同于 Object.keys();

有些不常用的我就没有说出来了就是简单了解了解哈

关注我持续更新前端知识努力成为大佬

js中的Reflect入门讲解相关推荐

web3.js 中文文档入门
web3.js 中文文档 v1.3.4 入门(Getting Started) web3.js是包含以太坊生态系统功能的模块集合. web3-eth用于以太坊区块链和智能合约. web3-shh是针对 ...
js中的面向对象入门
http://www.cnblogs.com/chenmeng0818/p/6508755.html 什么是对象我们先来看高程三中是如何对对象进行定义的 "无序属性的集合,其属性可以包括基 ...
hadoop中HBase子项目入门讲解
HBase 是Hadoop的一个子项目,HBase采用了Google BigTable的稀疏的,面向列的数据库实现方式的理论,建立在hadoop的hdfs上,一方面里用了hdfs的高可靠性和可伸缩行, ...
js中的正则表达式入门
什么是正则表达式呢? 正则表达式(regular expression)描述了一种字符串匹配的模式,可以用来检查一个字符串是否含有某种子串.将匹配的子串做替换或者从某个字符串中取出符合某个条件的子串等 ...
Node.js中的egg入门、egg路由、egg控制器、egg服务、egg中间件
目录 1 egg入⻔ 1.1 初始化 1.2 目录结构 1.3 内置对象 Application Context Request Response Controller Service Helper ...
js中FileReader对象入门-fileReader中的事件
内容摘自<HTML5应用开发与实践> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
Js中Reflect对象
Js中Reflect对象 Reflect是ES6起JavaScript内置的对象,提供拦截JavaScript操作的方法,这些方法与Proxy对象的handlers中的方法基本相同. 描述 Refle ...
D3.js的v5版本入门教程（第一章）—— 如何在项目中使用D3.js
D3.js的v5版本入门教程(第一章) 1.需要的一些工具这个其实随便!最简单的就是建一个.txt文件就可以敲起代码来!作者本人用的是myeclipse(主要需要安装tomcat),因为写的是前端, ...
【Promise】入门-同步回调-异步回调-JS中的异常error处理-Promis的理解和使用-基本使用-链式调用-七个关键问题
文章目录 1. 预备知识 1.1 实例对象与函数对象 1.2 两种类型的回调函数 1. 同步回调 2. 异步回调 1.3 JS中的异常error处理 1. 错误的类型 2. 错误处理(捕获与抛出) 3 ...

js中的Reflect入门讲解

js中的Reflect入门讲解相关推荐

最新文章

热门文章