ES6新增API - Reflect

116 阅读 0 评论 77 点赞

我是靠谱客的博主优美茉莉，这篇文章主要介绍ES6新增API - Reflect，现在分享给大家，希望可以做个参考。

前言

小伙伴们大家好。前两篇文章中为大家分享了es6中新增的Proxy。今天将继续给大家分享ES6中新增的知识点 - Reflect。什么是Reflect呢，Reflect又是干什么的？下面为大家揭晓。

Reflect

ES6为了能够更好的操作对象而新增了Reflect，它是JS中的一个全局的普通的对象，它的原型就是Object。Reflect翻译过来是反射的意思，那么为什么会取名为Reflect呢？是因为Reflect提供了一系列方法，开发者可以通过调用这些方法访问一些js底层的功能，由于它类似于其它语言的反射，因此取名为Reflect。

Reflect对象的设计有如下几个目的：

1.将Object一些明显属于内部的方法（如Object.defineProperty）放到Reflect对象上。后面就可以直接通过Reflect来访问这些方法。（目前一些方法同时存在于Reflect和Object上，将来再定义一些新的方法将只会部署到Reflect上，后面使用也是直接通过Reflect来使用）
2.修改Object方法的返回结果，让其显得更合理。比如，Object.defineProperty(obj,name,desc)在无法定义属性时会抛出错误，而通过Reflect.defineProperty(obj,name,desc)来操作则返回false而不是抛出错误。
3.让Object的操作都变成函数行为，比如删除某个属性或者判断某个属性在Object中是否存在时，Object用的是：delete obj[xxx] 和 xxx in obj。而使用Reflect则是：Reflect.deleteProperty(obj, xxx) 和 Reflect.has(obj, xxx)。
4.Reflect对象中的方法与Proxy中的方法是一一对应的。只要是在Proxy对象中的方法在Reflect中都能找到。这样Proxy对象就可以通过调用Reflect中对应的方法完成默认行为，作为修改行为的基础。也就是说不管Proxy怎么修改默认行为，都可以通过Reflect来获取默认行为。

下面来看几个相关案例

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
// 1. Object中的一些方法放到Reflect上
let obj = {};
Object.defineProperty(obj,'name',{
	get(target,key){
		return 'Yannis'	
	}
});
Reflect.defineProperty(obj,'age',{
	get(target,key){
		return 28
	}
})

console.log(obj.name, obj.age);// Yannis 20
//两个对象都能给obj添加属性

// 2.让Object中某些方法的返回结果更合理
//defineProperty方法在Object中的实现
try{
	Object.defineProperty(target, property, handler)
} catch(e){
	//xxx
}

//defineProperty方法在Reflect中的实现
if(Reflect.defineProperty(target, property, handler)){
	// success
}else{
	//fail
}

// 3. 让Object中的某些操作变成函数行为
//判断属性是否存在
'name' in obj
Reflect.has(obj,'name')
//删除某个属性
delete obj['name']
Reflect.deleteProperty(obj, 'name')

// 4. Reflect中的方法与Proxy中的是一一对应的
new Proxy(obj, {
	get(target,key){
		return Reflect.get(target,key)		
	}
})

Reflect对象的13个静态方法

Reflect对象为我们提供了13个静态方法，这些方法大部分与Object对象中同名的方法的作用是相同的。并且它们与Proxy中的13方法是一一对应的，如下是13个方法的简单介绍：

Reflect.get(target, key, receiver)：对象属性的读取
Reflect.set(target, key, value, receiver)：对象属性的设置
Reflect.has(target, key)：判断属性是否存在，如key in obj，返回一个布尔值。
Reflect.deleteProperty(target, key)：删除对象的属性，相当于Object中的delete obj[key]返回一个布尔值。
Reflect.ownKeys(target)：相当于Object.getOwnPropertyNames(obj)、Object.getOwnPropertySymbols(obj)之和
Reflect.getOwnPropertyDescriptor(target, key)：基本等同于Object.getOwnPropertyDescriptor(target, key)
Reflect.defineProperty(target, propKey, propDesc)：相当于Object.defineProperty(proxy, propKey, propDesc）用于定义对象属性
Reflect.preventExtensions(target)：对应Object.preventExtensions(obj)用于让对象变得不可扩展
Reflect.getPrototypeOf(target)：对应Object.getPrototypeOf(obj)用于读取对象的__proto__属性
Reflect.isExtensible(target)：对应Object.isExtensible(obj)标识当前对象是否可扩展
Reflect.setPrototypeOf(target, proto)：对应Object.setPrototypeOf(target, proto)设置目标对象的原型
Reflect.apply(target, object, args)：对应Function.prototype.apply.call(func, thisArg, args)用于绑定this对象后执行给定函数
Reflect.construct(target, args)：相当于new target(…args)提供了不使用new来调用构造函数的方法

总结

本节为大家分享了关于ES6中新增的Reflect API，通过学习我们知道了ES6新增Reflect的目的，以及如何使用Reflect。最后还对Reflect中提供的13个静态方法做了简单介绍。下一节中将对这13个方法中一些常用的方法做一个展开分享。本次分享就到这里了。

喜欢的小伙伴欢迎点赞留言加关注哦！