Reflect的作用
- Reflect也是ES6新增的一个API,它是一个对象,字面的意思是反射。
- 那么这个Reflect有什么用呢?
- 它主要提供了很多
操作JavaScript对象的方法
,有点像Object中操作对象的方法
; - 比如Reflect.getPrototypeOf(target)类似于 Object.getPrototypeOf();
- 比如Reflect.defineProperty(target, propertyKey, attributes)类似于Object.defineProperty() ;
- 如果我们有Object可以做这些操作,那么为什么还需要有Reflect这样的新增对象呢?
- 这是因为在早期的ECMA规范中没有考虑到这种对 对象本身 的操作
如何设计会更加规范,所以将这些API放到了Object上面
; - 但是
Object作为一个构造函数
,这些操作实际上放到它身上并不合适
; - 另外还包含一些
类似于 in、delete操作符
,让JS看起来是会有一些奇怪的; - 所以在ES6中
新增了Reflect
,让我们这些操作都集中到了Reflect对象上;
- 那么Object和Reflect对象之间的API关系,可以参考MDN文档:
Reflect的常见方法
Reflect中有哪些常见的方法呢?它和Proxy是一一对应的,也是13个:
Reflect.getPrototypeOf(target) 类似于 Object.getPrototypeOf() Reflect.setPrototypeOf(target, prototype) 设置对象原型的函数. 返回一个 Boolean, 如果更新成功,则返 回true。 Reflect.isExtensible(target) 类似于 Object.isExtensible() Reflect.preventExtensions(target) 类似于 Object.preventExtensions()。返回一个Boolean。 Reflect.getOwnPropertyDescriptor(target, propertyKey) 类似于 Object.getOwnPropertyDescriptor()。如果对象中存在该属性,则返回对应的属性描述符, 否则返回 undefined. Reflect.defineProperty(target, propertyKey, attributes) 和 Object.defineProperty() 类似。如果设置成功就会返回 true Reflect.ownKeys(target) 返回一个包含所有自身属性(不包含继承属性)的数组。(类似于Object.keys(), 但不会受enumerable影响). Reflect.has(target, propertyKey) 判断一个对象是否存在某个属性,和 in 运算符 的功能完全相同。 Reflect.get(target, propertyKey[, receiver]) 获取对象身上某个属性的值,类似于 target[name]。 Reflect.set(target, propertyKey, value[, receiver]) 将值分配给属性的函数。返回一个Boolean,如果更新成功,则返回true。 Reflect.deleteProperty(target, propertyKey) 作为函数的delete操作符,相当于执行 delete target[name]。 Reflect.apply(target, thisArgument, argumentsList) 对一个函数进行调用操作,同时可以传入一个数组作为调用参数。和 Function.prototype.apply() 功能类似。 Reflect.construct(target, argumentsList[, newTarget]) 对构造函数进行 new 操作,相当于执行 new target(...args)。
Reflect的使用
那么我们可以将之前Proxy案例中对原对象的操作,都修改为Reflect来操作:
const obj = { name: "why", age: 18 } const objProxy = new Proxy(obj, { get: function(target, key, receiver) { console.log("get---------") return Reflect.get(target, key) }, set: function(target, key, newValue, receiver) { console.log("set---------") target[key] = newValue const result = Reflect.set(target, key, newValue) if (result) { } else { } } }) objProxy.name = "kobe" console.log(objProxy.name)
Receiver的作用
- 我们发现在使用getter、setter的时候有一个receiver的参数,它的作用是什么呢?
- 如果我们的源对象(obj)有setter、getter的访问器属性,那么可以通过receiver来改变里面的this;