Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "what is the role of Proxy in ES6". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this article "what is the role of Proxy in ES6" can help you solve the problem.

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) on "what is the role of Proxy in ES6" Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.