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