JavaScript
プロキシ

Angular 2 AngularJS ASP.NET CSS HTML jQuery Node.js PHP React Regular Expressions
サーチ…


前書き

JavaScriptのプロキシを使用して、オブジェクトの基本的な操作を変更できます。プロキシはES6で導入されました。オブジェクト上のプロキシ自体はオブジェクトであり、 トラップを持ちます。プロキシに対して操作が実行されると、トラップがトリガーされることがあります。これには、プロパティルックアップ、関数呼び出し、プロパティの変更、プロパティの追加などが含まれます。該当するトラップが定義されていない場合、プロキシが存在しないかのように、プロキシされたオブジェクトに対して操作が実行されます。

構文

  • let proxied = new Proxy(target, handler);

パラメーター

パラメータ詳細
ターゲットターゲットオブジェクト、このオブジェクトのアクション（取得、設定など）は、ハンドラを介してルーティングされます
ハンドラターゲットオブジェクト上のアクションをインターセプトするための「トラップ」を定義できるオブジェクト（取得、設定など）

備考

使用可能な「トラップ」の完全なリストは、 MDN - Proxy - 「ハンドラオブジェクトのメソッド」にあります。

非常に単純なプロキシ（設定されたトラップを使用）

このプロキシは、単純に、対象objectすべての文字列プロパティに文字列" went through proxy"を追加しobject 。 

let object  = {};

let handler = {
    set(target, prop, value){ // Note that ES6 object syntax is used
        if('string' === typeof value){
            target[prop] = value + " went through proxy";
        }
    }
};

let proxied = new Proxy(object, handler);

proxied.example = "ExampleValue";

console.log(object); 
// logs: { example: "ExampleValue went trough proxy" }
// you could also access the object via proxied.target

プロキシプロパティの参照

プロパティルックアップに影響を与えるには、 getハンドラを使用する必要があります。

この例では、値だけでなくその値の型も返されるように、プロパティルックアップを変更します。これを簡単にするためにReflectを使用します。 

let handler = {
    get(target, property) {
        if (!Reflect.has(target, property)) {
            return {
                value: undefined,
                type: 'undefined'
            };
        }
        let value = Reflect.get(target, property);
        return {
            value: value,
            type: typeof value
        };
    }
};

let proxied = new Proxy({foo: 'bar'}, handler);
console.log(proxied.foo); // logs `Object {value: "bar", type: "string"}`


Modified text is an extract of the original Stack Overflow Documentation
ライセンスを受けた CC BY-SA 3.0
所属していない Stack Overflow