JavaScript 反射机制及 Reflect 详解

396次阅读  |  发布于3年以前

一、什么是反射机制

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

也就是说，反射机制指的是程序在运行时能够获取自身的信息。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)

① 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.5
if (price > 100) {
  price = Math.floor.apply(null, [price])
} else {
  price = Math.ceil.apply(null, [price])
}

price  // 101
// ES6 用法
let price = 101.5

Reflect.apply(price > 100 ? Math.floor : Math.ceil, null, [price])  // 101

4、.construct()

使用反射的方式去实现创建类的实例，类似于 new target(…args) Reflect.construct(target, argumentsList[, newTarget])

① 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)

① 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是返回truePS: 在 W3C 中，以后所有的 Object 上面的方法，都会慢慢迁移到 Reflect 对象，可能以后会在 Object 上面移除这些方法

6、.deleteProperty()

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

① ES5 用法

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

obj  // {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  //1
obj['x']  //1

② ES6 用法

const obj = { x: 1, y: 2 }

Reflect.get(obj, 'x')  // 1

Reflect.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')
//undefined

Reflect.getOwnPropertyDescriptor([], 'length')
// {value:0, writable:true, enumerable:false, configurable:false}

③ 对比

如果 Reflect.getOwnPropertyDescriptor 的第一个参数不是一个对象（一个原始值），那么将造成 TypeError 错误 而对于 Object.getOwnPropertyDescriptor，非对象的第一个参数将被强制转换为一个对象处理

Reflect.getOwnPropertyDescriptor("foo", 0);
//TypeError:"foo"isnotnon-nullobject

Object.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')  //true
Reflect.has(obj, 'z')  //false

11、.isExtensible()

判断一个对象是否可扩展 Reflect.isExtensible 与 Object.isExtensible 方法一样，都是判断一个对象是否可扩展 （即是否能够添加新的属性） Reflect.isExtensible(target)

const obj = { x: 1, y: 2 }

Reflect.isExtensible(obj)  //true

Object.freeze(obj)  //阻止新属性添加到对象
obj.z = 3

Reflect.isExtensible(obj)  //false
obj  // {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)  //true

Reflect.preventExtensions(obj)  //阻止新属性添加到对象
obj.z = 3

Reflect.isExtensible(obj)  //false
obj  // {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: ƒ, …}

本文完~

Copyright© 2013-2020

All Rights Reserved 京ICP备2023019179号-8