Shulou(Shulou.com)05/31 Report--

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.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.