Introduction détaillée aux proxys dans es6 (exemple de code)

Le contenu de cet article est une introduction détaillée (exemple de code) sur les agents dans es6. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. aide.

Présentation

L'agence signifie demander à un agent de faire quelque chose en votre nom, mais contrairement à vous, l'agent peut avoir son propre comportement, et peut même faire des choses qui vont à l'encontre des attentes.

Lizi

Déclarer une origine d'objet commun, qui a un nom d'attribut

let origin={
    name: 'origin'
}

Déclarer un objet proxy

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

Sortie à ce moment origin et proxy, vous pouvez constater que proxy a le même attribut origin que name

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

ajoute l'attribut origin à age, puis affiche les résultats. dessus, vous pouvez trouver, et origin ont l'attribut proxyage

Est-ce un proxy Bien sûr que non. >

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

à

et nous pouvons trouver cela, bien que proxy et

aient tous deux l'attribut

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

, ce n'est pas le

que nous avons attribué, mais quelques chaînes supplémentaires origin. , c'est à ce moment-là que l'initialisation proxy est exécutée. La méthode x 1 du deuxième objet passé, et si nous set by proxy proxyset
Il est maintenant clair que get est le proxy de

, tout dans sera synchronisé avec

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

, mais les opérations sur

ne seront pas synchronisées avec proxy, et origin a son propre comportement. proxyoriginVous pouvez y penser de cette façon, origin est le secrétaire de proxy Toutes les transactions doivent être soumises au secrétaire. Le secrétaire a ses propres règles pour faire les choses. Il peut les soumettre directement à. le patron, ou il peut refuser de se soumettre, ou ajouter Certaines autres actions sont à nouveau soumises. Alors que peut faire cette secrétaire au nom du patron ? proxy

Trap

proxySyntaxeorigin

L'initialisation d'un proxy nécessite deux paramètres

: Cible du proxy

let p = new Proxy(target, handler);

: Un piège est un objet. Notre opération est comme un animal en fuite. Si le chasseur place tous les pièges sur toutes les voies de fuite, nous tomberons toujours dans l'une d'entre elles. L'essence est un objet, les clés décrivent nos opérations et les valeurs sont des fonctions qui décrivent notre comportement. Il existe

sortes de pièges au total. target

0x003

 : Définir l'attribut handle13 Syntaxe :

set

 : Objet proxy

clé : Définir l'attribut

set(target, key, value)

target : Définir la valeur de l'attribut

Châtaigne :

value Description :

Au-dessus, nous avons placé un

piège, lorsque nous effectuons l'opération

Quand , il sera capturé. Nous jugeons si

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}

est supérieur à

S'il n'est pas supérieur à
, nous ne ferons rien, mais s'il est supérieur à set, nous effectuerons une opération d'affectation. et je l'ai également ajouté set. Le marron ci-dessus équivaut à un intercepteur. value55 get : attributs d'accès 510000

Syntaxe :

 : objet proxy

clé : attributs accédés

get(target, key)

Chestnut : target

deleteProperty : supprimer la propriété

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

Syntaxe :

 : objet proxy

clé : attribut à supprimer

deleteProperty(target, key)

Châtaigne : target

a : Déterminer si un certain attribut est inclus

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}

Syntaxe :

: objet proxy

clé : attribut à juger

has(target, key)

Châtaigne : target

: obtenir lui-même Valeur d'attribut

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

Syntaxe : ownKeys

• ownKeys(target)

   : Objet proxy

• target Châtaigne :

•  : Obtenez

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

getPrototypeOf Syntaxe : prototype

• getPrototypeOf(target)

   : Objet proxy

• targetChâtaigne

•  : Paramètres

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

setPrototypeOf Syntaxe : prototype

• setPrototypeOf(target, prototype)

   : Objet proxy

• target : A définir

• prototypeprototypeChâtaigne

•  : Définir la description de l'attribut

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

Syntaxe : defineProperty

• defineProperty(target, prop, descriptor)

   : Objet proxy

• target : Pour définir la propriété de description

• prop : Description

• descriptorChâtaigne

•  : Obtenir sa propre description d'attribut

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

Syntaxe : getOwnPropertyDescriptor

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!