Technology Sharing

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Proxy Introduction

Proxy in ES6 is a special object used to create proxy objects. It allows us to define custom behaviors, such as intercepting and modifying the default operations of objects. Proxy can be used to intercept various operations of objects, including property access, assignment, function call, etc.

The role of Proxy is to set up a layer of interception before the target object, which can intercept and customize various operations on the target object. By using Proxy, we can implement functions such as access control, data verification, and attribute hijacking of the target object.

Proxy wraps the target object with a proxy object and provides a set of hook functions (also called "traps") that can be operated on the proxy object. When we operate on the proxy object, we are actually calling these hook functions and performing corresponding processing as needed.

Introduction to Proxy attribute operations

• get(target, propKey, receiver) : intercepts the reading of object properties
• set(target, propKey, value, receiver) : intercepts the setting of an object property and returns a Boolean value.
• has(target, propKey) : intercepts the operation of propKey in proxy and returns a Boolean value.
• deleteProperty(target, propKey) : intercepts the delete proxy[propKey] operation and returns a Boolean value.
• ownKeys(target) : intercepts Object.getOwnPropertyNames(proxy), Object.getOwnPropertySymbols(proxy), Object.keys(proxy), for...in loop, and returns an array. This method returns the property names of all properties of the target object, while the return result of Object.keys() only includes the traversable properties of the target object itself.
• getOwnPropertyDescriptor(target, propKey) : intercepts Object.getOwnPropertyDescriptor(proxy, propKey) and returns the property description object.
• defineProperty(target, propKey, propDesc) : intercepts Object.defineProperty(proxy, propKey, propDesc) and Object.defineProperties(proxy, propDescs) and returns a Boolean value.
• preventExtensions(target) : intercepts Object.preventExtensions(proxy) and returns a Boolean value.
• getPrototypeOf(target) : intercepts Object.getPrototypeOf(proxy) and returns an object.
• isExtensible(target) : intercepts Object.isExtensible(proxy) and returns a Boolean value.
• setPrototypeOf(target, proto) : intercepts Object.setPrototypeOf(proxy, proto) and returns a Boolean value. If the target object is a function, there are two additional operations that can be intercepted.
• apply(target, object, args) : intercepts the Proxy instance as a function call operation, such as proxy(...args), proxy.call(object, ...args), proxy.apply(...).
• construct(target, args) : intercepts operations where the Proxy instance is called as a constructor, such as new proxy(...args).

useProxyImplementing the Observer Pattern