内容へ移動
Water Sunlight
軽量プログラミングの文法 - JavaScript/Python
ユーザ用ツール
ログイン
サイト用ツール
検索
ツール
文書の表示
以前のリビジョン
バックリンク
最近の変更
メディアマネージャー
サイトマップ
ログイン
>
最近の変更
メディアマネージャー
サイトマップ
トレース:
js:build-in:proxy
この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
====== 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]]|プロトタイプの設定| \\
js/build-in/proxy.txt
· 最終更新: 2021/07/21 12:40 by
tanaka
ページ用ツール
文書の表示
以前のリビジョン
バックリンク
文書の先頭へ