es6 のプロキシの詳細な紹介 (コード例)

この記事では、es6 のエージェントについて詳しく説明します (コード例)。必要な方は参考にしてください。 。

概要

エージェンシーとは、あなたに代わって何かをするようエージェントに依頼することを意味しますが、あなた自身とは異なり、エージェントには独自の行動があり、エージェントの期待に反する行動を行うこともあります。 。

Chestnut

属性名を持つ共通オブジェクトの原点を宣言します

let origin={
    name: 'origin'
}

プロキシ オブジェクトを宣言します

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

今回の出力origin と proxy では、proxy が origin <pre class="brush:php;toolbar:false">console.log(origin) // {name: 'origin'} console.log(proxy) // Proxy {name: 'origin'}</pre> と同じ

name

属性を持っていることがわかります。 originage 属性を追加して出力すると、origin と proxy の両方に age# があることがわかります。 ##attribute

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

それはプロキシですか? もちろんそうではありません。

proxy

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

に属性を追加しようとすると、

origin# であることがわかります。 ## と proxy これらはすべて x 属性を持っていますが、これは私たちが割り当てた 1 ではなく、プロキシ ## によって設定されたさらにいくつかの文字列です。 # 明らかに、これは proxy の初期化時に渡される 2 番目のオブジェクトの set メソッドが実行されます。 ## はクリアになりました。proxy は origin
のプロキシです。proxy 上のすべての操作は

origin

に同期され、# については同期されます。 ##origin の操作は proxy に同期されず、proxy にも独自の動作があります。 これを次のように考えることができます。proxy は origin の秘書です。秘書には独自のルールがあります。それらを上司に直接送信することもできますが、送信を拒否したり、送信する前に他の動作を追加したりすることもできます。では、この秘書は上司に代わって何ができるのでしょうか? トラップ

構文

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

プロキシの初期化には 2 つのパラメータが必要ですtarget: プロキシ ターゲット

#handle

: 私たちの作戦は、逃走する動物のようなものです。もしハンターがすべての逃げ道に罠を仕掛けたら、私たちは必ず一緒に落ちてしまいます。本質はオブジェクトであり、キーは操作を記述し、値は関数であり、動作を記述します。合計

13

のトラップがあります。

0x003 set：属性の設定

構文: <pre class="brush:php;toolbar:false">let p = new Proxy(target, handler);</pre>target: プロキシ オブジェクト

key:属性の設定

value

: 属性値の設定

チェストナット:<pre class="brush:php;toolbar:false">set(target, key, value)</pre>説明:

set を

の上に配置しました。トラップ。

set 操作を実行すると、value

が

5

より大きいかどうか、または

5# より大きいかどうかを判断します。 ##何もしませんが、##5
より大きい場合は代入演算を実行し、##10000 を加算します。上の栗がインターセプターに相当します。 get: アクセス属性 構文:

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}

target: プロキシ オブジェクトkey: アクセスプロパティ 栗:

get(target, key)

deleteProperty: プロパティの削除

構文:

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: プロキシobject

key: 削除する属性

Chestnut:

deleteProperty(target, key)

has: 特定の属性が含まれるかどうかを決定します

構文:

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}

target: プロキシオブジェクト

key: 判定対象の属性

Chestnut:

has(target, key)

ownKeys : 独自の属性値を取得します

構文:

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

: プロキシ オブジェクト

栗:

• ownKeys(target)

getPrototypeOf
• :

  prototype

  # を取得します
##構文:

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

target

: プロキシ オブジェクト

Chestnut

getPrototypeOf(target)

setPrototypeOf

：
• prototype

構文:

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

target

: プロキシ オブジェクト

prototype

: 対象となる
• prototype

• Chestnut<pre class="brush:php;toolbar:false">setPrototypeOf(target, prototype)</pre>

• defineProperty

  : プロパティの説明を設定します構文 :

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

• target
: プロキシ オブジェクト

prop

: To説明を設定します。 プロパティ
descriptor
• : 説明

Chestnut

• defineProperty(target, prop, descriptor)

  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

以上がes6 のプロキシの詳細な紹介 (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。