How to use Proxy in ES6
Most people do not understand the knowledge points of this article "how to use Proxy in ES6", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to use Proxy in ES6" article.
Create a simple Proxylet target = {} let proxy = new Proxy (target, {}) proxy.name = 'proxy'console.log (proxy.name) / / proxyconsole.log (target.name) / / proxytarget.name =' target'console.log (proxy.name) / / targetconsole.log (target.name) / / target
When this instance assigns "proxy" to the proxy.name attribute, it creates a name on the target, and the agent simply forwards the operation to the target, and he does not store this property. Both proxy.name and target.name refer to the value of target.name.
Validate attributes using set traps
Set traps receive four parameters:
1.trapTarget: the object used to receive attributes (the target of the agent)
2.key: the property key to write (string or symbol)
3.value: the attribute value to be written
4.receiver: the object on which the operation occurs (usually a proxy)
Let target = {name: "target"} let proxy = new Proxy (target, {set (trapTarget, key, value, receiver) {if (! trapTarget.hasOwnProperty (key)) {if (isNaN (value)) {throw new TypeError ("attribute must number")} return Reflect.set (trapTarget, key, value) Receiver)}}) proxy.count = 1console.log (proxy.count) / / 1console.log (target.count) / / 1proxy.name = "proxy" console.log (proxy.name) / / proxyconsole.log (target.name) / / proxyproxy.other = "other" / / error is reported here because there are no numbers
This instance starts the set function every time the value of proxy is changed outside.
Verifying object structure with get traps
Get receives 3 parameters
1.trapTarget: the object used to receive attributes (the target of the agent)
2.key: the property key to write (string or symbol)
3.receiver: the object on which the operation occurs (usually a proxy)
Let proxy = new Proxy ({}, {get (trapTarget, key, receiver) {if (! (key in receiver)) {throw new TypeError ("attribute" + key + "does not exist")} return Reflect.get (trapTarget, key, receiver)}}) proxy.name = "proxy" console.log (proxy.name) / / proxyconsole.log (proxy.age) / / an error is thrown if the attribute does not exist
The get method is triggered when we access the object properties created by proxy
Use has traps so you already have properties
Has receives 2 parameters:
1.trapTarget: the object used to receive attributes (the target of the agent)
2.key: the property key to write (string or symbol)
Let target = {name: "target", value: 42} let proxy = new Proxy (target, {has (trapTarget, key) {if (key = 'value') {return false} else {return Reflect.has (trapTarget) Key)}) console.log ("value" in proxy) / / falseconsole.log ("name" in proxy) / / trueconsole.log ("toString" in proxy) / / true uses deleteProperty traps to prevent attributes from being deleted
DeleteProperty receives 2 parameters:
1.trapTarget: the object used to receive attributes (the target of the agent)
2.key: the property key to write (string or symbol)
Let target = {name: "target", value: 42} let proxy = new Proxy (traget, {deleteProperty (trapTarget, key) {if (key = "value") {return false} else {return Reflect.deleteProperty (trapTarget) Key)}) console.log ("value" in proxy) / / truelet result1 = delete proxy.valueconsole.log (result1) / / falseconsole.log ("value" in proxy) / / trueconsole.log ("name" in proxy) / / truelet result2 = delete proxy.nameconsole.log (result2) / / trueconsole.log ("name" in proxy) / / false
The deleteProperty function is triggered when the attribute of proxy is deleted externally
Prototype Agent Trap (setProptotypeOf,getPrototypeOf)
SetProptotypeOf receives 2 parameters
1.trapTarget: the object used to receive attributes (the target of the agent)
2.proto: objects used as prototypes
Let target = {} let proxy = new Proxy (target, {/ / call getPrototypeOf (trapTarget) {return null} on access, / / call setPrototypeOf (trapTarget) on change Proto) {return false}}) let targetProto = Object.getPrototypeOf (target) let proxyProto = Object.getPrototypeOf (proxy) console.log (targetProto = Object.prototype) / / trueconsole.log (proxyProto = Object.prototype) / / falseconsole.log (proxyProto) / / nullObject.setPrototypeOf (target, {}) / / successful Object.setPrototypeOf (proxy, {}) / / throw an error
If it is realized normally
Let target = {} let proxy = new Proxy (target, {/ / call getPrototypeOf (trapTarget) {return Reflect.getPrototypeOf (trapTarget)} when accessing, / / call setPrototypeOf (trapTarget, proto) {return Reflect.setPrototypeOf (trapTarget) when changed Proto)}}) let targetProto = Object.getPrototypeOf (target) let proxyProto = Object.getPrototypeOf (proxy) console.log (targetProto = Object.prototype) / / trueconsole.log (proxyProto = Object.prototype) / / trueObject.setPrototypeOf (target, {}) / / success Object.setPrototypeOf (proxy, {}) / / success attribute descriptor trap
DefineProperty receives three parameters:
1.trapTarget: the object used to receive attributes (the target of the agent)
2.key: the property key to write (string or symbol)
3.descriptor: the description object of the attribute
Let proxy = new Proxy ({}, {defineProperty (trapTarget, key, descriptor) {/ / descriptor can only receive enumerable, configurable, value, writeable, get, set if (typeof key = "symbol") {return false} return Reflect.defineProperty (trapTarget, key, descriptor)}, getOwnPropertyDescriptor (trapTarget, key) {return Reflect.getOwnPropertyDescriptor (trapTarget, key)}) Object.defineProperty (proxy, "name" {value: "proxy"}) console.log (proxy.name) / / proxylet nameSymbol = Symbol ("name") Object.defineProperty (proxy, nameSymbol, {value: "proxy"})
The internal definenProperty | getOwnPropertyDescriptor method is triggered when defineProperty | getOwnPropertyDescriptor is called externally.
OwnKeys trap
OwnKeys traps intercept external Object.keys (), Object.getOwnPropertyName (), Object.getOwnPropertySymbols () and Object.assign () methods
Let proxy = new Proxy ({}, {ownKeys (trapTarget) {return Reflect.ownKeys (trapTarget) .filter (key = > {return typeof key! = = "string" | | key [0]! = ='_'})}) let nameSymbol = Symbol ("name") proxy.name = "proxy" proxy._name = "private" proxy [nameSymbol] = "symbol" let names = Object.getOwnPropertyNames (proxy), keys = Object.keys (proxy) Symbols = Object.getOwnPropertySymbols (proxy) console.log (names.length) / / 1console.log (names) / / nameconsole.log (keys.length) / / 1console.log (keys [0]) / / nameconsole.log (symbols.length) / / 1console.log (symbols [0]) / / symbol (name) the above is about the article "how to use Proxy in ES6" I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please pay attention to the industry information channel.
