この記事では、es6 のエージェントについて詳しく説明します (コード例)。必要な方は参考にしてください。 。
エージェンシーとは、あなたに代わって何かをするようエージェントに依頼することを意味しますが、あなた自身とは異なり、エージェントには独自の行動があり、エージェントの期待に反する行動を行うこともあります。 。
属性名を持つ共通オブジェクトの原点を宣言します
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 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">console.log(origin) // {name: 'origin'}
console.log(proxy) // Proxy {name: 'origin'}</pre><div class="contentsignin">ログイン後にコピー</div></div> と同じ
属性を持っていることがわかります。 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 の操作は proxy に同期されず、proxy にも独自の動作があります。 これを次のように考えることができます。proxy は origin の秘書です。秘書には独自のルールがあります。それらを上司に直接送信することもできますが、送信を拒否したり、送信する前に他の動作を追加したりすることもできます。では、この秘書は上司に代わって何ができるのでしょうか? トラップ
console.log(proxy.x) // set by proxy 1 console.log(proxy.x) // set by proxy 1 from proxy
プロキシの初期化には 2 つのパラメータが必要です: 私たちの作戦は、逃走する動物のようなものです。もしハンターがすべての逃げ道に罠を仕掛けたら、私たちは必ず一緒に落ちてしまいます。本質はオブジェクトであり、キーは操作を記述し、値は関数であり、動作を記述します。合計
13のトラップがあります。
0x003 set：属性の設定
構文: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">let p = new Proxy(target, handler);</pre><div class="contentsignin">ログイン後にコピー</div></div>target: プロキシ オブジェクト
: 属性値の設定
チェストナット:<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">set(target, key, value)</pre><div class="contentsignin">ログイン後にコピー</div></div>説明:
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}: プロキシ オブジェクトkey: アクセスプロパティ 栗:
get(target, key)
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) // 2deleteProperty(target, key)
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(target, key)
構文:
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)
prototype
let origin={
x:1,
y:2
}
let proxy=new Proxy(origin,{
ownKeys:(target)=>{
return ['y']
}
})
console.log(Object.getOwnPropertyNames(proxy)) // ['y']getPrototypeOf(target)
let origin={
x:1,
y:2
}
let proxy=new Proxy(origin,{
getPrototypeOf:(target)=>{
return null
}
})
console.log(Object.getPrototypeOf(p)) // null Chestnut<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">setPrototypeOf(target, prototype)</pre><div class="contentsignin">ログイン後にコピー</div></div>
: プロパティの説明を設定します構文 :
let origin={
x:1,
y:2
}
let proxy=new Proxy(origin,{
setPrototypeOf:(target, prototype)=>{
throw 'no'
}
})
Object.setPrototypeOf(proxy, {}) // Uncaught nodefineProperty(target, prop, descriptor)
構文:
getOwnPropertyDescriptor(target, prop)
target: 代理对象
prop: 获取描述的属性
栗子
let origin={}
let proxy=new Proxy(origin,{
getOwnPropertyDescriptor:(target, prop)=>{
throw 'no'
}
})
Object.getOwnPropertyDescriptor(proxy, 'x') // Uncaught noisExtensible：判断是否可扩展语法：
isExtensible(target)
target: 代理对象
栗子
let origin={}
let proxy=new Proxy(origin,{
isExtensible:(target)=>{
return false
}
})
console.log(Object.isExtensible(proxy)); // falsepreventExtensions ：阻止扩展语法：
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 falsishconstruct：构造语法：
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 errorapply：调用语法：
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 サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
