每天3分钟,重学ES6-ES12(十九)Proxy-Reflect(二)

简介: 每天3分钟,重学ES6-ES12(十九)Proxy-Reflect

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;
相关文章
|
5月前
|
缓存 JavaScript 数据安全/隐私保护
js开发:请解释什么是ES6的Proxy,以及它的用途。
`ES6`的`Proxy`对象用于创建一个代理,能拦截并自定义目标对象的访问和操作,应用于数据绑定、访问控制、函数调用的拦截与修改以及异步操作处理。
66 3
|
2月前
|
JavaScript 前端开发
ES6新特性: Proxy
ES6新特性: Proxy
|
前端开发
前端学习笔记202306学习笔记第四十一天-Es6-proxy得使用2
前端学习笔记202306学习笔记第四十一天-Es6-proxy得使用2
29 0
ES6: Proxy概念及用法
ES6: Proxy概念及用法
49 0
|
前端开发
前端学习笔记202306学习笔记第四十一天-Es6-proxy得使用1
前端学习笔记202306学习笔记第四十一天-Es6-proxy得使用1
37 0
|
存储
每天3分钟,重学ES6-ES12(十九)Proxy-Reflect(一)
每天3分钟,重学ES6-ES12(十九)Proxy-Reflect
80 0
|
缓存 JavaScript 算法
每天3分钟,重学ES6-ES12(十八) CJS
每天3分钟,重学ES6-ES12(十八) CJS
83 0
|
前端开发 JavaScript
每天3分钟,重学ES6-ES12系列文章汇总
每天3分钟,重学ES6-ES12系列文章汇总
56 0
|
前端开发 API
每天3分钟,重学ES6-ES12(十一)Promise的类方法
每天3分钟,重学ES6-ES12(十一)Promise的类方法
82 0
|
JavaScript 前端开发
每天3分钟,重学ES6-ES12(十八)ES Module(二)
每天3分钟,重学ES6-ES12(十八)ES Module
71 0