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.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])

• 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.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" is not non-null object

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: ƒ, …}