Detailed introduction to proxies in es6 (code example)

This article brings you a detailed introduction (code example) about the agent in es6. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. help.

Overview

Agency means asking an agent to do something on your behalf, but unlike yourself, the agent can have his own behavior, and can even do things that go against expectations. the behavior of.

Chestnut

Declare a common object origin, which has an attribute name

let origin={
    name: 'origin'
}

Declare a proxy object

let proxy=new Proxy(origin, {
    get: (target, key)=>target[key]+" from proxy",
    set: (target, key, value)=>target[key]="set by proxy "+value
})

Output at this timeorigin and proxy, you can find that proxy has the same name attribute as origin

console.log(origin) // {name: 'origin'}
console.log(proxy) // Proxy {name: 'origin'}

is originAdd the age attribute, and then output it. You can find that both origin and proxy have the age attribute

origin.age=1 
console.log(origin) // {name: 'origin', age: '1'}
console.log(proxy) // Proxy {name: 'origin', age '1'}

Is that a proxy? Of course not, we try to add attributes to proxy

proxy.x=1
console.log(origin) // {name: 'origin', age: '1', x:'set by proxy 1'}
console.log(proxy) // Proxy {name: 'origin', age '1'}

and we can find that although origin and proxy They all have the x attribute, but it is not the 1 we assigned, but a few more strings set by proxy . Obviously, this is executed The set method of the second object passed in when initializing proxy
So what if we get

console.log(proxy.x) // set by proxy 1
console.log(proxy.x) // set by proxy 1 from proxy

is now clear , proxy is the proxy of origin, all operations on proxy will be synchronized to origin, and for origin# The operations of ## will not be synchronized to proxy, and proxy also has its own behavior.

You can think of it this way,

proxy is the secretary of origin. All transactions must be submitted to the secretary. The secretary has his own rules for doing things and can submit them directly to the boss. , you can also reject the submission, or add some other behaviors before submitting. So what can this secretary do on behalf of the boss?

Trap

Syntax

let p = new Proxy(target, handler);

Initializing a proxy requires two parameters

target: proxy target

handle: A trap is an object. Our operation is like an escaping animal. If the hunter places all the traps on all the ways to escape, then we will always fall into one together. . The essence is an object, the key describes our operation, the value is the function, describes our behavior, there are a total of 13 traps.

0x003

set：Set attributes

Syntax:

set(target, key, value)

target: Proxy object

key: Set attribute

value: Set attribute value

Chestnut:

let origin={}
let proxy=new Proxy(origin,{
    set:(target, key, value)=>{
        if(value>5)target[key]=value+10000
    }
})
proxy.x=1
proxy.y=10
console.log(proxy) // Proxy {y: 10010}
console.log(origin) // {y: 10010}

Explanation:

We placed a
set above Trap, when we do the set operation, it will be caught. We judge whether value is greater than 5, if not greater than 5We will not do anything, but if it is greater than 5, we will perform an assignment operation and add 10000. The chestnut above is equivalent to an interceptor.

get: access attribute

Syntax:

get(target, key)

target: proxy object

key: access Properties

Chestnuts:

let origin={
    x:1,
    y:2
}
let proxy=new Proxy(origin,{
    get:(target, key)=>{
        if(key==='x')return 'no'
        return target[key]
    }
})
console.log(proxy.x) // 'no'
console.log(proxy.y) // 2

deleteProperty: Delete properties

Syntax:

deleteProperty(target, key)

target: Proxy object

key: Attribute to be deleted

Chestnut:

let origin={
    x:1,
    y:2
}
let proxy=new Proxy(origin,{
    deleteProperty:(target, key)=>{
        if(key==='x')return
        delete target[key]
    }
})
delete proxy.x
delete proxy.y
console.log(proxy) // {x:1}

has: Determine whether a certain attribute is included

Syntax:

has(target, key)

target: Proxy object

key: Attribute to be judged

Chestnut:

let origin={
    x:1,
    y:2
}
let proxy=new Proxy(origin,{
    has:(target, key)=>{
        if(key==='x')return false
        return true
    }
})
console.log('x' in proxy) // false
console.log('y' in proxy) // true

ownKeys: Get own attribute value

• Syntax:

  ownKeys(target)

• ##target

  : Proxy object

Chestnut:

• let origin={
      x:1,
      y:2
  }
  let proxy=new Proxy(origin,{
      ownKeys:(target)=>{
          return ['y']
      }
  })
  console.log(Object.getOwnPropertyNames(proxy)) // ['y']

getPrototypeOf

：Get prototype

Syntax:

• getPrototypeOf(target)

• target

  : Proxy object

chestnut

• let origin={
      x:1,
      y:2
  }
  let proxy=new Proxy(origin,{
      getPrototypeOf:(target)=>{
          return null
      }
  })
  console.log(Object.getPrototypeOf(p)) // null

setPrototypeOf

：Set prototype

Syntax:

• setPrototypeOf(target, prototype)

• target

  : Proxy object

• prototype

  : The prototype to be set

Chestnut

• let origin={
      x:1,
      y:2
  }
  let proxy=new Proxy(origin,{
      setPrototypeOf:(target, prototype)=>{
          throw 'no'
      }
  })
  Object.setPrototypeOf(proxy, {}) //  Uncaught no

defineProperty

: Set property description

Syntax :

• defineProperty(target, prop, descriptor)

• target

  : Proxy object

• prop

  : To set the description Properties

• descriptor

  : description

chestnut

• let origin={}
  let proxy=new Proxy(origin,{
      defineProperty:(target, prop, descriptor)=>{
          throw 'no'
      }
  })
  Object.defineProperty(proxy, 'x', {configurable: true}) //  Uncaught no

getOwnPropertyDescriptor

：Get own property description

Syntax:

• getOwnPropertyDescriptor(target, prop)

• target: 代理对象

• prop: 获取描述的属性

• 栗子

  let origin={}
  let proxy=new Proxy(origin,{
      getOwnPropertyDescriptor:(target, prop)=>{
          throw 'no'
      }
  })
  Object.getOwnPropertyDescriptor(proxy, 'x') //  Uncaught no

isExtensible：判断是否可扩展

• 语法：

  isExtensible(target)

• target: 代理对象

• 栗子

  let origin={}
  let proxy=new Proxy(origin,{
      isExtensible:(target)=>{
         return false
      }
  })
  console.log(Object.isExtensible(proxy)); // false

preventExtensions ：阻止扩展

• 语法：

  preventExtensions(target)

• target: 代理对象

• 栗子：

  let origin={}
  let proxy=new Proxy(origin,{
      preventExtensions:(target)=>{
          return false;
      }
  })
  console.log(Object.preventExtensions(proxy)); // Uncaught TypeError: 'preventExtensions' on proxy: trap returned falsish

construct：构造

• 语法：

  construct(target, argumentsList, newTarget)

• target: 代理对象

• argumentsList: 参数列表

• newTarget: 新对象

• 栗子：

  let Origin=function(){}
  let OriginProxy=new Proxy(Origin,{
    construct: function(target, argumentsList, newTarget) {
        throw 'error'  
    }
  })
  new OriginProxy() // Uncaught error

apply：调用

• 语法：

  apply(target, thisArg, argumentsList)

  target: 代理对象

  thisArg: 上下文

  argumentsList: 参数列表

• 栗子：

  let origin=function(){}
  let proxy=new Proxy(origin,{
    apply: function(target, thisArg, argumentsList) {
      throw 'error'
    }
  })
  origin() // Uncaught error

The above is the detailed content of Detailed introduction to proxies in es6 (code example). For more information, please follow other related articles on the PHP Chinese website!