JS 反射机制及 Reflect 详解

悠悠 2023-10-06 23:58 48阅读 0赞

### 一、什么是反射机制 ###

反射机制是在编译阶段不知道是哪个类被加载，而是在运行的时候才加载、执行。  
也就是说，反射机制指的是程序在运行时能够获取自身的信息。  
`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` 就统一了操作方式

<table> 
 <thead> 
  <tr> 
   <th>handler ⽅法</th> 
   <th>默认调⽤</th> 
   <th>功能</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>get</td> 
   <td>Reflect.get()</td> 
   <td>获取对象身上某个属性的值</td> 
  </tr> 
  <tr> 
   <td>set</td> 
   <td>Reflect.set()</td> 
   <td>在对象上设置属性</td> 
  </tr> 
  <tr> 
   <td>has</td> 
   <td>Reflect.has()</td> 
   <td>判断一个对象是否存在某个属性</td> 
  </tr> 
  <tr> 
   <td>deleteProperty</td> 
   <td>Reflect.deleteProperty()</td> 
   <td>删除对象上的属性</td> 
  </tr> 
  <tr> 
   <td>getProperty</td> 
   <td>Reflect.getPrototypeOf()</td> 
   <td>获取指定对象原型的函数</td> 
  </tr> 
  <tr> 
   <td>setProperty</td> 
   <td>Reflect.setPrototypeOf()</td> 
   <td>设置或改变对象原型的函数</td> 
  </tr> 
  <tr> 
   <td>isExtensible</td> 
   <td>Reflect.isExtensible()</td> 
   <td>判断一个对象是否可扩展 （即是否能够添加新的属性）</td> 
  </tr> 
  <tr> 
   <td>preventExtensions</td> 
   <td>Reflect.preventExtensions()</td> 
   <td>阻止新属性添加到对象</td> 
  </tr> 
  <tr> 
   <td>getOwnPropertyDescriptor</td> 
   <td>Reflect.getOwnPropertyDescriptor()</td> 
   <td>获取给定属性的属性描述符</td> 
  </tr> 
  <tr> 
   <td>defineProperty</td> 
   <td>Reflect.defineProperty()</td> 
   <td>定义或修改一个对象的属性</td> 
  </tr> 
  <tr> 
   <td>ownKeys</td> 
   <td>Reflect.ownKeys()</td> 
   <td>返回由目标对象自身的属性键组成的数组</td> 
  </tr> 
  <tr> 
   <td>apply</td> 
   <td>Reflect.apply()</td> 
   <td>对一个函数进行调用操作，同时可以传入一个数组作为调用参数</td> 
  </tr> 
  <tr> 
   <td>construct</td> 
   <td>Reflect.construct()</td> 
   <td>对构造函数进行 new 操作，实现创建类的实例</td> 
  </tr> 
  <tr> 
   <td>.preventExtensions</td> 
   <td>Reflect.preventExtensions()</td> 
   <td>阻止新属性添加到对象</td> 
  </tr> 
 </tbody> 
</table>

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