概述大家好,我是一碗周,一个不想被喝(内卷)的前端。如果写的文章有幸可以得到你的青睐,万分有幸~
Reflect是ECMAscript2015提供的一个对象,它提供了一些拦截Javascript *** 作的静态方法,这些方法与Proxy中的handlers中的方法一致。
Reflect并不是一个构造函数,也就是说它不能够被实例化。
Proxy对象中的每一个拦截 *** 作(例如:get、delete等),内部都对应的调用了Reflect的方法。它提供的静态方法与Proxy中的handlers中的方法名称都一致,具体如下:
现在我们就来以此使用这些静态方法
getReflect.get()方法的语法结构如下:
Reflect.get(target, key)
该方法的作用是从target对象中获取属性为key的值,示例代码如下:
const person = { name: '一碗周' } console.log(Reflect.get(person, 'name')) // 一碗周
set值得注意的是 ,如果target不是一个对象则会抛出异常
Reflect.set()方法的语法如下:
Reflect.set(target, key, value)
该方法的作用是为target对象中的key属性设置key值,并返回一个布尔值,表示是否设置成功。
示例代码如下:
const person = {} console.log(Reflect.set(person, 'name', '彼岸繁華')) // true
has值得注意的是 ,如果target不是一个对象则会抛出异常
Reflext.has()方法的语法结构如下:
Reflect.has(target, key)
该方法用于检测属性key是不是属于target对象中的属性,并返回一个布尔值,表示是否包含。
示例代码如下:
const person = { name: '一碗周' } console.log(Reflect.has(person, 'name')) // true console.log(Reflect.has(person, 'hobby')) // falsedeleteProperty
Reflect.deleteProperty()方法的语法结构如下:
Reflect.deleteProperty(target, key)
该方法用于删除target对象的key属性,并返回一个是否删除成功的布尔值,示例代码如下:
const person = { name: '一碗周', hobby: 'coding' } console.log(Reflect.deleteProperty(person, 'hobby')) // true console.log(Reflect.has(person, 'hobby')) // false console.log(person) // { name: '一碗周' }getPrototypeOf
Reflect.getPrototypeOf(target)方法的作用是用于获取target对象的原型,示例代码如下:
const person = { name: 一碗周', hobby: 'coding' } // 获取person的原型 const proto = Reflect.getPrototypeOf(person) console.log(proto) // [Object: null prototype] {}setPrototypeOf
Reflect.setPrototypeOf()方法的语法结构如下:
Reflect.setPrototypeOf(target, prototype)
该方法的作用是将target对象的原型修改为prototype并返回一个是否修改成功的布尔值。示例代码如下:
class sayMe { } // 设置在原型上设置一个方法 sayMe.prototype.print = function () { console.log('一碗周'); } const person = { name: '一碗周', hobby: 'coding' } const proto = Reflect.setPrototypeOf(person, sayMe) console.log(proto) // true // 可以调用原型上面的方法 person.prototype.print() // 彼岸繁華preventExtensions和isExtensible
Reflect.preventExtensions()方法用于将target对象变成一个不可扩展的对象,返回一个布尔值表示是否设置成功。
Reflect.isExtensible(target)方法用于判断target对象是否可以扩展,即可以不可以添加新的属性,该方法的返回值为一个布尔值,表示对象是否可以扩展。
示例代码如下:
const person = { name: '一碗周', hobby: 'coding' } console.log(Reflect.isExtensible(person)) // true // 通过Object.preventExtensions()将对象变成不可扩展对象 Object.preventExtensions(person) console.log(Reflect.isExtensible(person)) // falsegetOwnPropertyDescriptor
Reflect.getOwnPropertyDescriptor()方法的语法结构如下:
Reflect.getOwnPropertyDescriptor(target, key)
该方法会返回target对象上一个自有属性key对应的属性描述符(所谓的自有属性指的是直接赋予该对象的属性,不需要从原型链上进行查找的属性)。
示例代码如下:
const person = { name: '一碗周', hobby: 'coding' } console.log(Reflect.getOwnPropertyDescriptor(person, 'name')) // { value: '一碗周', writable: true, enumerable: true, configurable: true }defineProperty
Reflect.defineProperty()方法的语法结构如下:
Reflect.defineProperty(target, key, attributes)
该方法的作用是修改或者定义target对象中的key属性的属性描述符,attributes表示一个属性描述符对象。
属性描述符中具有四个值,分别是
value: 该属性对应的值
writable:是否可写
configurable:是否可改变
enumerable:是否可枚举
示例代码如下:
const person = { name: '一碗周', hobby: 'coding' } Reflect.defineProperty(person, 'name', { writable: false }) person.name = '一碗粥' // name 修改失败 console.log(person);ownKeys
Reflect.ownKeys(target)方法返回target对象中的自有属性键组成的数组,示例代码如下:
const person = { name: '一碗周', hobby: 'coding' } console.log(Reflect.ownKeys(person)) // [ 'name', 'hobby' ]apply
Reflect.apply()的语法结构如下:
Reflect.apply(func, thisArg, args)
该函数的功能是调用func函数,传递一个args实参列表,该参数是一个类数组对象;thisArg表示调用时的this对象。
该方法等同于Function.prototype.apply.call(func, thisArg, args)
示例代码如下:
const person = { name: '一碗周', sayMe: function () { console.log(this.name); } } // 注意:即使没有参数,第三个参数也必须传递 Reflect.apply(person.sayMe, person, [])
construct值得注意的是 ,即使没有第三个参数,也需要传递一个空的数组进去
Reflect.construct()方法的作用实际上是创建一个实例对象,该方法的语法结构如下:
Reflect.construct(target, argumentsList[, newTarget])
参数说明:
-
target:表示可以被运行的构造函数
-
argumentsList:表示被构造函数调用时的参数,这个是一个类数组对象
-
newTarget:这是一个可选的,表示新创建对象的原型原型对象的constructor属性,默认值为target
示例代码如下:
function Person (name, hobby) { this.name = name this.hobby = hobby this.sayMe = function () { console.log(`${this.name}喜欢${this.hobby}`); } } // 通过Reflect.construct() 实例化一个对象 const person = Reflect.construct(Person, ['一碗周', 'coding']) person.sayMe() // 一碗周喜欢coding总结
Reflect对象提供哪些静态方法,都是可以通过另一种方式来完成的,那为什么还要提供一个Reflect对象呢?
这是因为前面的那十三种 *** 作,可能来自不同的对象里面的方法,有全局的、有Object的、有Function的,但是提供了Reflect对象之后就将前面所有的 *** 作统一到了一个对象下面 ,也统一了 *** 作方式 。
往期推荐
- 【建议收藏】总结了42种前端常用布局方案
- JS高级之必会的5个高阶函数
- JS高级之图解ES6之前的6种继承方式
- 关于v-model语法糖的知识点,这次应该说全了
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)