JS 反射|极客笔记

JS 反射

在 JavaScript 中，反射是指在运行时动态地获取对象的信息和操作对象的能力。通过反射，我们可以在不知道对象具体结构的情况下，获取对象的属性和方法，调用对象的方法，甚至修改对象的属性值。在本文中，我们将深入探讨 JavaScript 中的反射机制，包括如何使用反射来操作对象以及其应用场景。

1. 反射的基本概念

在 JavaScript 中，反射是通过内置对象Reflect和Proxy来实现的。其中，Reflect对象提供了一组静态方法，用于对对象进行反射操作；Proxy对象则可以用来包裹目标对象，并可以通过拦截器来修改目标对象的行为。

Reflect 对象

Reflect对象提供了一组静态方法，对应了一些对象的内置操作。这些静态方法可以直接调用，而不需要通过目标对象或实例来调用。下面列举一些常用的Reflect方法：

Reflect.get(target, propertyKey [, receiver])：获取目标对象的属性值。
Reflect.set(target, propertyKey, value [, receiver])：设置目标对象的属性值。
Reflect.has(target, propertyKey)：判断目标对象是否具有某个属性。
Reflect.ownKeys(target)：返回目标对象自身的属性键列表。
Reflect.defineProperty(target, propertyKey, descriptor)：定义目标对象的新属性。

Proxy 对象

Proxy对象用于包裹目标对象，并可以定义拦截器来修改目标对象的行为。Proxy对象的构造器接受两个参数：目标对象target和拦截器handler。拦截器是一个对象，包含了一系列的handler方法，在特定操作发生时会被调用。

下面是一个简单的示例，演示了如何使用Proxy对象来代理一个对象并添加日志拦截器：

let target = {
  name: "Alice",
  age: 30
};

let handler = {
  get(target, prop, receiver) {
    console.log(`Get property  ${prop}`); return Reflect.get(...arguments); }, set(target, prop, value, receiver) { console.log(`Set property$ {prop} to ${value}`);
    return Reflect.set(...arguments);
  }
};

let proxy = new Proxy(target, handler);

proxy.name; // 输出：Get property name
proxy.age = 31; // 输出：Set property age to 31

2. 反射实践

在实际开发中，反射机制可以帮助我们实现一些高级功能，比如动态代理、对象复制等。下面我们将通过一些具体的示例来演示如何使用反射机制来操作对象。

示例1：动态代理

动态代理是一种常见的设计模式，通过代理对象来控制对目标对象的访问。在 JavaScript 中，我们可以使用Proxy对象来实现动态代理。

假设我们有一个对象calculator，具有加法和减法两个方法：

let calculator = {
  add: function(a, b) {
    return a + b;
  },
  subtract: function(a, b) {
    return a - b;
  }
};

我们可以定义一个代理对象proxyCalculator，通过代理对象调用方法时，可以记录方法的调用日志：

let handler = {
  apply(target, thisArg, args) {
    console.log(`Calling  ${target.name} with args$ {args}`);
    return Reflect.apply(...arguments);
  }
};

let proxyCalculator = new Proxy(calculator, handler);

proxyCalculator.add(1, 2); // 输出：Calling add with args 1,2
proxyCalculator.subtract(5, 3); // 输出：Calling subtract with args 5,3

示例2：对象复制

利用反射机制，我们可以实现对象的浅拷贝和深拷贝。下面是一个简单的示例，演示如何深度拷贝一个对象：

function deepClone(obj) {
  if (typeof obj !== 'object' || obj === null) {
    return obj;
  }

  let clone = Array.isArray(obj) ? [] : {};

  Reflect.ownKeys(obj).forEach(key => {
    clone[key] = deepClone(obj[key]);
  });

  return clone;
}

let obj = { 
  name: 'Alice', 
  age: 30, 
  address: { city: 'Beijing', country: 'China' }
};

let clonedObj = deepClone(obj);

console.log(clonedObj); 
// 输出：{ name: 'Alice', age: 30, address: { city: 'Beijing', country: 'China' } }