JavaScript Proxy简介

JavaScript的Proxy对象是一种相对较新的语言特性,它在ES6中被引入。它基于同名的软件设计模式,为另一个对象创建一个包装器,拦截重新定义该对象的基本操作。

Proxy对象的定义如下:

const proxy = new Proxy(target, handler);

target是被代理的对象,而handler是一个包含一个或多个"陷阱"的对象,这些陷阱是拦截对目标对象执行的操作的函数。

有多种可用的陷阱可以用来自定义目标对象的行为。以下是所有可用陷阱的简要概述及其功能:

  • get(target, prop, receiver) - 拦截对target[prop]的调用。
  • set(target, prop, value, receiver) - 拦截对target[prop] = value的调用。
  • has(target, prop) - 拦截对prop in target的调用。
  • apply(target, thisArg, argumentsList) - 拦截对函数的调用。
  • construct(target, argumentsList, newTarget) - 拦截对new操作符的调用。
  • defineProperty(target, prop, descriptor) - 拦截对Object.defineProperty()的调用。
  • deleteProperty(target, prop) - 拦截对delete target[prop]的调用。
  • getOwnPropertyDescriptor(target, prop) - 拦截对Object.getOwnPropertyDescriptor()的调用。
  • ownKeys(target) - 拦截对Object.getOwnPropertyNames()Object.getOwnPropertySymbols()的调用。
  • getPrototypeOf(target) - 拦截对Object.getPrototypeOf()的调用。
  • setPrototypeOf(target, prototype) - 拦截对Object.setPrototypeOf()的调用。
  • isExtensible(target) - 拦截对Object.isExtensible()的调用。
  • preventExtensions(target) - 拦截对Object.preventExtensions()的调用。

Proxy对象有许多常见和新颖的用例,可以利用其中一个或多个陷阱。以下是一个简单的示例,拦截get调用,并在目标对象中不存在该属性时返回null

const targetObj = { name: 'John', age: 30 };

const handler = {
  get(target, property) {
    return property in target ? target[property] : null;
  }
};

```javascript
const proxyObj = new Proxy(targetObj, handler);

proxyObj.name; // 'John'
proxyObj.age; // 30
proxyObj.address; // null
const proxyObj = new Proxy(targetObj, handler);

proxyObj.name; // 'John'
proxyObj.age; // 30
proxyObj.address; // null