手写 Proxy API：从基础到实战

手写 Proxy API：从基础到实战

JavaScript 中的 Proxy 是一个强大的特性，允许我们定义对象的行为，通过拦截和自定义对象的基本操作，如读取属性、赋值、调用函数等。它是 ES6 引入的功能之一，提供了强大的灵活性和控制能力。通过 Proxy，我们可以拦截和修改对对象的操作，使其更具动态性。

本文将从最基础的概念开始，手写一个简单的 Proxy API，并展示它如何拦截对象操作。

1. 什么是 Proxy？

Proxy 是一个构造函数，它接受两个参数：

1. 目标对象（target）：我们希望代理的对象。
2. 处理器对象（handler）：包含拦截和修改操作的对象。

通过 Proxy，我们可以控制对目标对象的所有操作，如属性访问、设置、删除、函数调用等。每一个操作都由 handler 对象中的特定方法来定义，这些方法称为"陷阱（trap）"。

2. Proxy 的工作原理

假设我们有一个对象，通常我们通过直接访问对象的属性来获取值。通过 Proxy，我们可以在访问这些属性时插入自定义的逻辑。

// 目标对象
const target = {
  message: 'Hello, world!'
};

// 处理器对象
const handler = {
  get(target, prop, receiver) {
    console.log(`Accessed property: ${prop}`);
    return prop in target ? target[prop] : 'Property not found';
  }
};

// 创建 Proxy
const proxy = new Proxy(target, handler);

// 访问 proxy 对象的属性
console.log(proxy.message);  // 输出: Accessed property: message  Hello, world!
console.log(proxy.nonExistent);  // 输出: Accessed property: nonExistent  Property not found

如上所示，当访问 proxy.message 时，我们通过 handler.get 方法拦截了该操作，输出了日志并返回了相应的属性值。

3. 手写一个简单的 Proxy API

接下来，我们将实现一个基本的 Proxy 类，手写一个简易版本，支持最常用的拦截方法，如 get、set、deleteProperty 等。

3.1 实现 Proxy 类

我们从最简单的实现开始，手动编写 Proxy 的核心逻辑。

class MyProxy {
  constructor(target, handler) {
    this.target = target;   // 目标对象
    this.handler = handler; // 处理器对象
  }

  // 拦截对象的获取操作（get）
  get(property) {
    if (this.handler.get) {
      return this.handler.get(this.target, property, this);
    }
    return this.target[property];  // 默认行为
  }

  // 拦截对象的设置操作（set）
  set(property, value) {
    if (this.handler.set) {
      return this.handler.set(this.target, property, value, this);
    }
    this.target[property] = value;  // 默认行为
    return true;  // 设置成功
  }

  // 拦截对象的删除操作（deleteProperty）
  deleteProperty(property) {
    if (this.handler.deleteProperty) {
      return this.handler.deleteProperty(this.target, property, this);
    }
    delete this.target[property];  // 默认行为
    return true;
  }

  // 拦截对象的判断操作（has）
  has(property) {
    if (this.handler.has) {
      return this.handler.has(this.target, property, this);
    }
    return property in this.target;  // 默认行为
  }

  // 拦截对象的函数调用操作（apply）
  apply(...args) {
    if (this.handler.apply) {
      return this.handler.apply(this.target, args);
    }
    return this.target(...args);  // 默认行为
  }
}

3.2 处理器对象

在 MyProxy 类中，我们为每个操作（如 get、set 等）都定义了拦截方法。如果处理器对象中定义了对应的方法，代理对象就会调用它们。

// 目标对象
const target = {
  message: 'Hello, Proxy!'
};

// 处理器对象
const handler = {
  get(target, prop, receiver) {
    console.log(`Getting property: ${prop}`);
    return prop in target ? target[prop] : 'Property not found';
  },
  set(target, prop, value, receiver) {
    console.log(`Setting property: ${prop} to ${value}`);
    target[prop] = value;
    return true;
  },
  deleteProperty(target, prop) {
    console.log(`Deleting property: ${prop}`);
    delete target[prop];
    return true;
  },
  has(target, prop) {
    console.log(`Checking if property exists: ${prop}`);
    return prop in target;
  },
  apply(target, args) {
    console.log(`Function called with arguments: ${args}`);
    return target(...args);
  }
};

// 创建 Proxy 实例
const proxy = new MyProxy(target, handler);

3.3 使用代理对象

现在我们可以使用 proxy 对象来演示如何拦截各种操作。

访问属性（get）

console.log(proxy.message);  // 输出: Getting property: message  Hello, Proxy!
console.log(proxy.nonExistent);  // 输出: Getting property: nonExistent  Property not found

设置属性（set）

proxy.message = 'Hello, world!';
console.log(target.message);  // 输出: Hello, world!

删除属性（deleteProperty）

delete proxy.message;
console.log(target.message);  // 输出: undefined

判断属性是否存在（has）

console.log('message' in proxy);  // 输出: Checking if property exists: message  true
console.log('nonExistent' in proxy);  // 输出: Checking if property exists: nonExistent  false

调用函数（apply）

假设目标对象是一个函数，我们可以使用 apply 拦截器。

const targetFunction = (a, b) => a + b;

const handlerFunction = {
  apply(target, thisArg, args) {
    console.log(`Function called with arguments: ${args}`);
    return target(...args);  // 返回原始函数的返回值
  }
};

const proxyFunction = new MyProxy(targetFunction, handlerFunction);
console.log(proxyFunction(2, 3));  // 输出: Function called with arguments: 2,3  5

4. 总结

通过手写一个简单的 Proxy 类，我们了解了如何使用代理来拦截和修改对对象的基本操作，如属性访问、设置、删除等。代理的强大之处在于它提供了对对象操作的完全控制，而我们可以灵活地定制其行为。

5. 扩展

如果我们想要进一步增强这个代理，可以添加更多的陷阱方法，如 getOwnPropertyDescriptor、defineProperty、setPrototypeOf 等。并且，随着 JavaScript 的发展，代理的用途已经越来越广泛，比如用来实现数据绑定、缓存机制、懒加载等。

通过这个简单的实现，你可以理解 JavaScript Proxy 的核心概念，并能够根据自己的需求自定义代理行为。