第一句子网 - 唯美句子、句子迷、好句子大全
第一句子网 > JS 反射机制及 Reflect 详解

JS 反射机制及 Reflect 详解

时间:2022-09-13 17:08:05

相关推荐

JS 反射机制及 Reflect 详解

一、什么是反射机制

反射机制是在编译阶段不知道是哪个类被加载,而是在运行的时候才加载、执行。

也就是说,反射机制指的是程序在运行时能够获取自身的信息。

js中的apply就是反射机制。

二、Reflect

1、Reflect 定义

Reflect是一个内建的对象,用来提供方法去拦截 JavaScript 的操作。

Reflect不是一个函数对象,所以它是不可构造的,也就是说它不是一个构造器,不能通过new操作符去新建或者将其作为一个函数去调用Reflect对象。

Reflect的所有属性和方法都是静态的。

Reflect内部封装了一系列对对象的底层操作

Reflect成员方法就是Proxy处理对象的默认实现

const proxy = new Proxy(obj, {get(target, property) {// 如果没有定义 get 方法,那么默认返回的就是 Reflect 的 get 方法return Reflect.get(target, property)}})

2、Reflect API 汇总

Reflect提供了一套用于操作对象的API,我们之前操作对象可以用Object上面的一些方法,也可以用in、delete这种操作符,使用Reflect就统一了操作方式

3、.apply()

Reflect.apply(target, thisArgument, argumentsList)

target:目标函数(必选)thisArgument:target 函数调用时绑定的 this 对象(可选)argumentsList:target 函数调用时传入的实参列表,该参数应该是一个类数组的对象(可选)

① ES5 用法

先指定方法,再去调用 apply

Math.floor.apply(null, [1.72]) // 1

② ES6 用法

先传递 apply,再指定是哪个方法

Reflect.apply(Math.floor, null, [1.72]) // 1

静态扫描时 Math.floor 是没有被执行,等到运行时再动态的将 Math.floor 作为参数传进来的

③ 实际应用

// ES5 用法let price = 101.5if (price > 100) {price = Math.floor.apply(null, [price])} else {price = Math.ceil.apply(null, [price])}price // 101

// ES6 用法let price = 101.5Reflect.apply(price > 100 ? Math.floor : Math.ceil, null, [price]) // 101

4、.construct()

使用反射的方式去实现创建类的实例,类似于new target(…args)

Reflect.construct(target, argumentsList[, newTarget])

target:被运行的目标函数(必选)argumentsList:调用构造函数的数组或者伪数组(可选)newTarget:该参数为构造函数, 参考 new.target 操作符,如果没有 newTarget 参数, 默认和 target 一样(可选)

① ES5 用法

let a = new Date()a.getTime() // 1632632744483

② ES6 用法

let b = Reflect.construct(Date, [])b.getTime() // 1632632744484

5、.defineProperty()

静态方法Reflect.defineProperty()基本等同于Object.defineProperty()方法

Reflect.defineProperty(target, propertyKey, attributes)

target:目标对象(必选)propertyKey:要定义或修改的属性的名称(可选)attributes:要定义或修改的属性的描述(可选)

① ES5 用法

const student = {}const r = Object.defineProperty(student, 'name', { value: 'Mike' })student // {name: "Mike"}r // {name: "Mike"}

② ES6 用法

const student = {}const r = Reflect.defineProperty(student, 'name', { value: 'Mike' })student // {name: "Mike"}r // true

这两个方法效果上来看是一摸一样的,都可以改变一个对象的值

区别在于返回值不同:Object是返回这个值,Reflect是返回true

PS: 在W3C中,以后所有的Object上面的方法,都会慢慢迁移到Reflect对象,可能以后会在Object上面移除这些方法

6、.deleteProperty()

Reflect.deleteProperty允许你删除一个对象上的属性,返回一个Boolean值表示该属性是否被成功删除,它几乎与非严格的delete operator相同

Reflect.deleteProperty(target, propertyKey)

target:删除属性的目标对象propertyKey:将被删除的属性的名称

① ES5 用法

const obj = { x: 1, y: 2 }const a = delete obj.xobj // {y: 2}a // true

② ES6 用法

const obj = { x: 1, y: 2 }const a = Reflect.deleteProperty(obj, 'x')obj // {y: 2}a // true

7、.get()

Reflect.get()方法的工作方式,就像从object (target[propertyKey])中获取属性,但它是作为一个函数执行的

Reflect.get(target, propertyKey[, receiver])

① ES5 用法

const obj = { x: 1, y: 2 }obj.x // 1obj['x'] // 1

② ES6 用法

const obj = { x: 1, y: 2 }Reflect.get(obj, 'x') // 1Reflect.get(['a', 'b', 'c'], 1) // b

8、.getOwnPropertyDescriptor()

静态方法Reflect.getOwnPropertyDescriptor()Object.getOwnPropertyDescriptor()方法相似

如果在对象中存在,则返回给定的属性的属性描述符,否则返回undefined

Reflect.getOwnPropertyDescriptor(target, propertyKey)

① ES5 用法

const obj = { x: 1, y: 2 }Object.getOwnPropertyDescriptor(obj, 'x')// {value: 1, writable: true, enumerable: true, configurable: true}

② ES6 用法

const obj = { x: 1, y: 2 }Reflect.getOwnPropertyDescriptor(obj, 'x')// {value: 1, writable: true, enumerable: true, configurable: true}Reflect.getOwnPropertyDescriptor({ x: 'hello' }, 'y')// undefinedReflect.getOwnPropertyDescriptor([], 'length')// {value: 0, writable: true, enumerable: false, configurable: false}

③ 对比

如果Reflect.getOwnPropertyDescriptor的第一个参数不是一个对象(一个原始值),那么将造成TypeError错误

而对于Object.getOwnPropertyDescriptor,非对象的第一个参数将被强制转换为一个对象处理

Reflect.getOwnPropertyDescriptor("foo", 0);// TypeError: "foo" is not non-null objectObject.getOwnPropertyDescriptor("foo", 0);// { value: "f", writable: false, enumerable: true, configurable: false }

9、.getPrototypeOf()

静态方法Reflect.getPrototypeOf()Object.getPrototypeOf()方法是一样的,都是返回指定对象的原型(即,内部的[[Prototype]]属性的值)

Reflect.getPrototypeOf(target)

① ES5 用法

const d = New Date()Object.getPrototypeOf(d)// {constructor: ƒ, toString: ƒ, toDateString: ƒ, toTimeString: ƒ, toISOString: ƒ, …}

② ES6 用法

const d = New Date()Reflect.getPrototypeOf(d)// {constructor: ƒ, toString: ƒ, toDateString: ƒ, toTimeString: ƒ, toISOString: ƒ, …}

10、.has()

判断一个对象是否存在某个属性,和in运算符 的功能完全相同

Reflect.has(target, propertyKey)

const obj = { x: 1, y: 2 }Reflect.has(obj, 'x') // trueReflect.has(obj, 'z') // false

11、.isExtensible()

判断一个对象是否可扩展

Reflect.isExtensibleObject.isExtensible方法一样,都是判断一个对象是否可扩展 (即是否能够添加新的属性)

Reflect.isExtensible(target)

const obj = { x: 1, y: 2 }Reflect.isExtensible(obj) // trueObject.freeze(obj) // 阻止新属性添加到对象obj.z = 3Reflect.isExtensible(obj) // falseobj // {x: 1, y: 2}

12、.ownKeys()

判断对象自身属性

Reflect.ownKeys方法返回一个由目标对象自身的属性键组成的数组,它的返回值等同于 `Object.getOwnPropertyNames(target).concat(Object.getOwnPropertySymbols(target))

Reflect.ownKeys(target)

const obj = { x: 1, y: 2 }Reflect.ownKeys(obj) // ["x", "y"]Reflect.ownKeys([]) // ["length"]Reflect.ownKeys([1, 2]) // ["0", "1", "length"]

13、.preventExtensions()

阻止新属性添加到对象,等同于Object.freeze()

Reflect.preventExtensions方法阻止新属性添加到对象,例如:防止将来对对象的扩展被添加到对象中,与Object.preventExtensions()方法一致

Reflect.preventExtensions(target)

const obj = { x: 1, y: 2 }Reflect.isExtensible(obj) // trueReflect.preventExtensions(obj) // 阻止新属性添加到对象obj.z = 3Reflect.isExtensible(obj) // falseobj // {x: 1, y: 2}

14、.set()

写数据

Reflect.set方法允许你在对象上设置属性,用来给属性赋值,类似property accessor的语法,但它是以函数的方式

Reflect.set(target, propertyKey, value[, receiver])

const obj = { x: 1, y: 2 }Reflect.set(obj, 'z', 4)obj // {x: 1, y: 2, z: 4}const arr = ['apple', 'pear']Reflect.set(arr, 1, 'banana')arr // ["apple", "banana"]

15、.setPrototypeOf()

Reflect.setPrototypeOf方法改变指定对象的原型 (即内部的[[Prototype]]属性值)

Reflect.setPrototypeOf(target, prototype)

const arr = ['apple', 'pear']Reflect.getPrototypeOf(arr)// [constructor: ƒ, concat: ƒ, copyWithin: ƒ, fill: ƒ, find: ƒ,…]Reflect.setPrototypeOf(arr, String.prototype)Reflect.getPrototypeOf(arr)// String {"", constructor: ƒ, anchor: ƒ, big: ƒ, blink: ƒ, …}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。