====== JavaScript Proxy ======

 --- //[[http://www.y2sunlight.com/water|y2sunlight]] 2021-07-19//

ここではES2015<sup>[[js:top#ECMAScript|*2015]]</sup>で新たに追加された[[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Proxy|Proxy]]オブジェクトについて説明します。

===== Proxyオブジェクト =====

[[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Proxy|Proxy]]を利用することで、既存のオブジェクトに手を加えずに変更することができます。


構文
<code javascript>
new Proxy(target, handler)
    target : ラップするオブジェクト
    handler : 変更する操作を定義するためのオブジェクト（ハンドラー）
</code>

以下にメンバーの取得と設定に対する簡単なハンドラーを示します。

<sxh javascript;title:Example>
class Student {

    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    greeting() {
        console.log(`I am ${this.name}. I am ${this.age} years old.`);
    }
}

function createProxyStudent(name, age) {
    return new Proxy(new Student(name, age), {
        get(target, prop) {
            // メンバーが見つからない場合はそのままメンバー名を返す
            return prop in target ? target[prop] : prop;
        },

        set(target, prop, val) {
            if(prop=="age" && !Number.isInteger(val)) {
                return false;
            }
            target[prop] = val;
        }
    });
}

// オリジナルの鈴木さん
let suzuki = new Student('Suzuki', 15);
suzuki.greeting();

suzuki.age = "abc";           // I am Suzuki. I am 15 years old.
suzuki.greeting();            // I am Suzuki. I am abc years old.
console.log(suzuki.address);  // undefined


// 鈴木さんの代理人
let proxy_suzuki = createProxyStudent('Suzuki', 15);
proxy_suzuki.greeting();

proxy_suzuki.age = "abc";           // I am Suzuki. I am 15 years old.
proxy_suzuki.greeting();            // I am Suzuki. I am 15 years old.
console.log(proxy_suzuki.address);  // address
</sxh>

ハンドラーに定義できるハンドラーメソッドには、以下のものがあります。なお、ハンドラーメソッドはトラップとも呼ばれることがあります。

^ハンドラーメソッド^説明（いつ発生するか）^
|get|プロパティ読み取り時|
|set|プロパティ書き込み時|
|has|in 演算子|
|deleteProperty|delete 演算子|
|apply|関数呼び出し|
|construct|new 演算子|
|[[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf|getPrototypeOf]]|プロトタイプの取得|
|[[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/setPrototypeOf|setPrototypeOf]]|プロトタイプの設定|

\\