Detaillierte Einführung in Proxys in es6 (Codebeispiel)

Dieser Artikel bietet Ihnen eine detaillierte Einführung (Codebeispiel) über Agenten in es6. Ich hoffe, dass er Ihnen weiterhilft.

Überblick

Agentur bedeutet, einen Agenten zu bitten, etwas in Ihrem Namen zu tun, aber im Gegensatz zu Ihnen kann der Agent sein eigenes Verhalten zeigen und sogar Dinge tun, die den Erwartungen widersprechen.

Lizi

deklariert einen gemeinsamen Objektursprung, der einen Attributnamen hat

let origin={
    name: 'origin'
}

deklariert ein Proxy-Objekt

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

gibt zu diesem Zeitpunkt origin aus und proxy, Sie können feststellen, dass proxy das gleiche origin-Attribut hat wie name

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

, das

-Attribut zu origin hinzufügt, und es dann ausgeben age und origin Wenn beide das proxyAttributage

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

haben, ist das natürlich kein Proxy? Wir versuchen, das Attribut

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

proxy zu und hinzuzufügen Wir können feststellen, dass sowohl

als auch origin das Attribut proxy hinzugefügt haben, aber es ist nicht das x, das wir zugewiesen haben, sondern ein paar weitere Zeichenfolgen 1. Offensichtlich ist hier das set by proxy >Methodeproxyübergeben wurde. Was wäre, wenn wir set

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

getJetzt ist klar, dass der Proxy von

und allen Operationen auf wird mit proxy synchronisiert. Die Vorgänge auf origin werden jedoch nicht mit proxy synchronisiert und origin hat auch ein eigenes Verhalten. originproxySie können es sich so vorstellen: proxy ist der Sekretär von

. Der Sekretär hat seine eigenen Regeln, an die er sie weitergeben kann Der Chef kann die Einreichung verweigern oder hinzufügen. Einige andere Aktionen werden erneut eingereicht. Was kann diese Sekretärin also im Namen des Chefs tun?

proxyTraporigin

Syntax

let p = new Proxy(target, handler);

Die Initialisierung eines Proxys erfordert zwei Parameter

: Proxy-Ziel

target : A Eine Falle ist ein Objekt. Wenn der Jäger alle Fallen auf alle Fluchtwege stellt, werden wir immer in eine davon tappen. Die Essenz ist ein Objekt, der Schlüssel beschreibt unsere Operationen und die Werte sind Funktionen, die unser Verhalten beschreiben. Es gibt insgesamt

Arten von Fallen.

handle0x003 13: Attribut festlegen

Syntax: set

set(target, key, value)

: Proxy-Objekt

Schlüssel: Attribut festlegen target

: Attributwert festlegen

Kastanie: value

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}

Beschreibung:

Oben haben wir eine

-Falle platziert, die wir erfassen Bestimmen Sie, ob

größer als
ist. Wenn es jedoch größer als set ist, führen wir eine Zuweisungsoperation durch und fügen es hinzu >. Die Kastanie oben entspricht einem Abfangjäger. setvalue5 get: Zugriffsattribut 5510000 Syntax:

get(target, key)

: Proxy-Objekt

Schlüssel: Zugriffsattribut

Chestnut:

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

target deleteProperty: Eigenschaft löschen

Syntax:

deleteProperty(target, key)

: Proxy-Objekt

Schlüssel : zu löschendes Attribut

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}

targethat: Bestimmen, ob ein bestimmtes Attribut enthalten ist

Syntax:

has(target, key)

: Proxy-Objekt

Schlüssel: Zu beurteilendes Attribut

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

target : Eigenen Attributwert abrufen

Syntax:

ownKeys(target)

ownKeys

• : Proxy-Objekt

• Chestnut: target

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

• : Holen Sie sich

Syntax: getPrototypeOf

getPrototypeOf(target)

prototype

• : Proxy Objekt

• Kastanietarget

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

• : Einstellungen

Syntax :setPrototypeOf

setPrototypeOf(target, prototype)

prototype

• : Proxy-Objekt

• : target

• Kastanieprototype

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

  prototype
: Attributbeschreibung festlegen
Syntax:

defineProperty(target, prop, descriptor)

defineProperty

• : Proxy-Objekt

• : Die Eigenschaft zum Festlegen der Beschreibung

  target

• : Beschreibung

  prop

• Kastanie

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

  descriptor
: Erhalten Sie eine eigene Attributbeschreibung
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

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in Proxys in es6 (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!