diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/ja/web/javascript/reference/global_objects/proxy | |
parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip |
initial commit
Diffstat (limited to 'files/ja/web/javascript/reference/global_objects/proxy')
16 files changed, 2352 insertions, 0 deletions
diff --git a/files/ja/web/javascript/reference/global_objects/proxy/index.html b/files/ja/web/javascript/reference/global_objects/proxy/index.html new file mode 100644 index 0000000000..b05f74ff59 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/proxy/index.html @@ -0,0 +1,453 @@ +--- +title: Proxy +slug: Web/JavaScript/Reference/Global_Objects/Proxy +tags: + - Class + - ECMAScript 2015 + - JavaScript + - Proxy +translation_of: Web/JavaScript/Reference/Global_Objects/Proxy +--- +<div>{{JSRef}}</div> + +<p><code>Proxy</code> オブジェクトにより別なオブジェクトのプロキシを作成することができ、そのオブジェクトの基本的な操作を傍受したり再定義したりすることができます。</p> + +<h2 id="Description" name="Description">解説</h2> + +<p><code>Proxy</code> は二つの引数で作成されます。</p> + +<ul> + <li><code>target</code>: プロキシを設定する元のオブジェクトです。</li> + <li><code>handler</code>: どの操作を傍受するか、また傍受された操作をどのように再定義するかを定義するオブジェクトです。</li> +</ul> + +<p>例えばこのコードでは、二つのプロパティだけを持つシンプルなターゲットと、プロパティを持たないよりシンプルなハンドラーを定義しています。</p> + +<pre class="brush: js notranslate">const target = { + message1: "hello", + message2: "everyone" +}; + +const handler1 = {}; + +const proxy1 = new Proxy(target, handler1); +</pre> + +<p>ハンドラーは空なので、このプロキシは元のターゲットと同様に動作します。</p> + +<pre class="brush: js notranslate">console.log(proxy1.message1); // hello +console.log(proxy1.message2); // everyone +</pre> + +<p>プロキシをカスタマイズするには、ハンドラーオブジェクトに関数を定義します。</p> + +<pre class="brush: js notranslate">const target = { + message1: "hello", + message2: "everyone" +}; + +const handler2 = { + get: function(target, prop, receiver) { + return "world"; + } +}; + +const proxy2 = new Proxy(target, handler2);</pre> + +<p>ここで {{jsxref("Global_Objects/Proxy/handler/get", "get()")}} ハンドラーを実装し、ターゲットのプロパティへのアクセスを傍受します。</p> + +<p>ハンドラー関数は<em>トラップ</em>と呼ばれることがありますが、これはおそらくターゲットオブジェクトへの呼び出しをトラップするからでしょう。上記の <code>handler2</code> のとても単純なトラップは、すべてのプロパティアクセサーを再定義します。</p> + +<pre class="brush: js notranslate">console.log(proxy2.message1); // world +console.log(proxy2.message2); // world</pre> + +<p>{{jsxref("Reflect")}} クラスの助けを借りて、いくつかのアクセサーに元の動作を与えたり、ほかのアクセサーを再定義したりすることができます。</p> + +<pre class="brush: js notranslate">const target = { + message1: "hello", + message2: "everyone" +}; + +const handler3 = { + get: function (target, prop, receiver) { + if (prop === "message2") { + return "world"; + } + return Reflect.get(...arguments); + }, +}; + +const proxy3 = new Proxy(target, handler3); + +console.log(proxy3.message1); // hello +console.log(proxy3.message2); // world</pre> + +<h2 id="Constructor" name="Constructor">コンストラクター</h2> + +<dl> + <dt>{{jsxref("Global_Objects/Proxy/Proxy", "Proxy()")}}</dt> + <dd>新しい <code>Proxy</code> オブジェクトを生成します。</dd> +</dl> + +<h2 id="Static_methods" name="Static_methods">静的メソッド</h2> + +<dl> + <dt>{{jsxref("Proxy.revocable()")}}</dt> + <dd>取り消し可能な <code>Proxy</code> オブジェクトを生成します。</dd> +</dl> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Basic_example" name="Basic_example">基本的な例</h3> + +<p>この例では、与えられたプロパティ名がオブジェクトに存在しない場合、既定値である <code>37</code> を返します。ここでは {{jsxref("Global_Objects/Proxy/handler/get", "get")}} ハンドラーを使用しています。</p> + +<pre class="brush: js notranslate">const handler = { + get: function(obj, prop) { + return prop in obj ? + obj[prop] : + 37; + } +}; + +const p = new Proxy({}, handler); +p.a = 1; +p.b = undefined; + +console.log(p.a, p.b); +// 1, undefined + +console.log('c' in p, p.c); +// false, 37 +</pre> + +<h3 id="No-op_forwarding_proxy" name="No-op_forwarding_proxy">何もしない転送プロキシ</h3> + +<p>この例では、プロキシが、それに対して適用されるすべての操作を転送する先に、ネイティブの JavaScript オブジェクトを使っています。</p> + +<pre class="brush: js notranslate">const target = {}; +const p = new Proxy(target, {}); + +p.a = 37; +// 操作はプロキシへ転送されます + +console.log(target.a); +// 37 が出力されます。 +// 操作は正しく転送されました +</pre> + +<p>上記のコードは JavaScript オブジェクトでは動作しますが、 DOM 要素などのネイティブのブラウザーオブジェクトでは動作しないことに注意してください。</p> + +<h3 id="Validation" name="Validation">検証</h3> + +<p><code>Proxy</code> を使うと、オブジェクトに渡された値を簡単に検証できます。この例では {{jsxref("Global_Objects/Proxy/handler/set", "set")}} ハンドラーを使用しています。</p> + +<pre class="brush: js notranslate">let validator = { + set: function(obj, prop, value) { + if (prop === 'age') { + if (!Number.isInteger(value)) { + throw new TypeError('年齢が整数ではありません'); + } + if (value > 200) { + throw new RangeError('年齢が不正なようです'); + } + } + + // 値を保存する既定の挙動 + obj[prop] = value; + + // 値の保存が成功したことを返します。 + return true; + } +}; + +let person = new Proxy({}, validator); + +person.age = 100; +console.log(person.age); // 100 +person.age = 'young'; // 例外が発生する +person.age = 300; // 例外が発生する +</pre> + +<h3 id="Extending_constructor" name="Extending_constructor">コンストラクターを拡張する</h3> + +<p>関数の Proxy で、コンストラクターを新たなコンストラクターへ簡単に拡張できます。この例では {{jsxref("Global_Objects/Proxy/handler/construct", "construct")}} および {{jsxref("Global_Objects/Proxy/handler/apply", "apply")}} ハンドラーを使用しています。</p> + +<pre class="brush: js notranslate">function extend(sup, base) { + var descriptor = Object.getOwnPropertyDescriptor( + base.prototype, 'constructor' + ); + base.prototype = Object.create(sup.prototype); + var handler = { + construct: function(target, args) { + var obj = Object.create(base.prototype); + this.apply(target, obj, args); + return obj; + }, + apply: function(target, that, args) { + sup.apply(that, args); + base.apply(that, args); + } + }; + var proxy = new Proxy(base, handler); + descriptor.value = proxy; + Object.defineProperty(base.prototype, 'constructor', descriptor); + return proxy; +} + +var Person = function(name) { + this.name = name; +}; + +var Boy = extend(Person, function(name, age) { + this.age = age; +}); + +Boy.prototype.gender = 'M'; + +var Peter = new Boy('Peter', 13); + +console.log(Peter.gender); // "M" +console.log(Peter.name); // "Peter" +console.log(Peter.age); // 13</pre> + +<h3 id="Manipulating_DOM_nodes" name="Manipulating_DOM_nodes">DOM ノードの操作</h3> + +<p>2 つの異なる要素の属性やクラス名を切り替えたい場合があります。それを実現する方法を紹介しましょう。</p> + +<pre class="brush: js notranslate">let view = new Proxy({ + selected: null +}, +{ + set: function(obj, prop, newval) { + let oldval = obj[prop]; + + if (prop === 'selected') { + if (oldval) { + oldval.setAttribute('aria-selected', 'false'); + } + if (newval) { + newval.setAttribute('aria-selected', 'true'); + } + } + + // 値を保存する既定の挙動 + obj[prop] = newval; + + // 値の保存が成功したことを返します。 + return true; + } +}); + +let i1 = view.selected = document.getElementById('item-1'); // ここではエラーが発生し、 i1 は null になります +console.log(i1.getAttribute('aria-selected')); +// 'true' + +let i2 = view.selected = document.getElementById('item-2'); +console.log(i1.getAttribute('aria-selected')); +// 'false' + +console.log(i2.getAttribute('aria-selected')); +// 'true' +Note: even if selected: !null, then giving oldval.setAttribute is not a function +</pre> + +<h3 id="Value_correction_and_an_extra_property" name="Value_correction_and_an_extra_property">値補正と追加プロパティ</h3> + +<p>この <code>products</code> プロキシオブジェクトは、渡された値を評価し、必要であれば配列に変換します。また、 <code>latestBrowser</code> という追加プロパティをゲッターとセッターの両方でサポートしています。</p> + +<pre class="brush: js notranslate">let products = new Proxy({ + browsers: ['Internet Explorer', 'Netscape'] +}, +{ + get: function(obj, prop) { + // 追加プロパティ + if (prop === 'latestBrowser') { + return obj.browsers[obj.browsers.length - 1]; + } + + // 値を返す既定の挙動 + return obj[prop]; + }, + set: function(obj, prop, value) { + // 追加プロパティ + if (prop === 'latestBrowser') { + obj.browsers.push(value); + return; + } + + // 値が配列でなければ変換 + if (typeof value === 'string') { + value = [value]; + } + + // 値を保存する既定の挙動 + obj[prop] = value; + + // 値の保存が成功したことを返します。 + return true; + } +}); + +console.log(products.browsers); +// ['Internet Explorer', 'Netscape'] + +products.browsers = 'Firefox'; +// (間違えて) 文字列を渡す + +console.log(products.browsers); +// ['Firefox'] <- 問題ありません、値は配列になっています + +products.latestBrowser = 'Chrome'; + +console.log(products.browsers); +// ['Firefox', 'Chrome'] + +console.log(products.latestBrowser); +// 'Chrome'</pre> + +<h3 id="Finding_an_array_item_object_by_its_property" name="Finding_an_array_item_object_by_its_property">配列要素のオブジェクトをそのプロパティから検索</h3> + +<p>このプロキシは配列をいくつかの実用機能で拡張しています。見ての通り、 {{jsxref("Object.defineProperties", "Object.defineProperties")}} を使わなくても柔軟にプロパティを「定義」できます。この例は、テーブルの列をそのセルから検索するようなコードに応用できます。その場合、ターゲットは {{domxref("HTMLTableElement.rows", "table.rows")}} となります。</p> + +<pre class="brush: js notranslate">let products = new Proxy([ + { name: 'Firefox', type: 'browser' }, + { name: 'SeaMonkey', type: 'browser' }, + { name: 'Thunderbird', type: 'mailer' } +], +{ + get: function(obj, prop) { + // 値を返す既定の挙動、prop は通常整数値 + if (prop in obj) { + return obj[prop]; + } + + // 製品の数を取得、products.length のエイリアス + if (prop === 'number') { + return obj.length; + } + + let result, types = {}; + + for (let product of obj) { + if (product.name === prop) { + result = product; + } + if (types[product.type]) { + types[product.type].push(product); + } else { + types[product.type] = [product]; + } + } + + // 製品を名前で取得 + if (result) { + return result; + } + + // 製品を種類で取得 + if (prop in types) { + return types[prop]; + } + + // 製品の種類を取得 + if (prop === 'types') { + return Object.keys(types); + } + + return undefined; + } +}); + +console.log(products[0]); // { name: 'Firefox', type: 'browser' } +console.log(products['Firefox']); // { name: 'Firefox', type: 'browser' } +console.log(products['Chrome']); // undefined +console.log(products.browser); // [{ name: 'Firefox', type: 'browser' }, { name: 'SeaMonkey', type: 'browser' }] +console.log(products.types); // ['browser', 'mailer'] +console.log(products.number); // 3 +</pre> + +<h3 id="A_complete_traps_list_example" name="A_complete_traps_list_example">完全な <code>traps</code> リストの例</h3> + +<p>教育用に <code>traps</code> リストの完全なサンプルを作成するため、そのような操作が特に適している<em>非ネイティブ</em>オブジェクトを Proxy 化します。<a href="/ja/docs/DOM/document.cookie#A_little_framework.3A_a_complete_cookies_reader.2Fwriter_with_full_unicode_support"><code>document.cookie</code> のページにある "リトルフレームワーク"</a> で生成される <code>docCookies</code> グローバルオブジェクトです。</p> + +<pre class="brush: js notranslate">/* + var docCookies = ... get the "docCookies" object here: + https://developer.mozilla.org/ja/docs/DOM/document.cookie#A_little_framework.3A_a_complete_cookies_reader.2Fwriter_with_full_unicode_support +*/ + +var docCookies = new Proxy(docCookies, { + get: function (oTarget, sKey) { + return oTarget[sKey] || oTarget.getItem(sKey) || undefined; + }, + set: function (oTarget, sKey, vValue) { + if (sKey in oTarget) { return false; } + return oTarget.setItem(sKey, vValue); + }, + deleteProperty: function (oTarget, sKey) { + if (sKey in oTarget) { return false; } + return oTarget.removeItem(sKey); + }, + enumerate: function (oTarget, sKey) { + return oTarget.keys(); + }, + ownKeys: function (oTarget, sKey) { + return oTarget.keys(); + }, + has: function (oTarget, sKey) { + return sKey in oTarget || oTarget.hasItem(sKey); + }, + defineProperty: function (oTarget, sKey, oDesc) { + if (oDesc && 'value' in oDesc) { oTarget.setItem(sKey, oDesc.value); } + return oTarget; + }, + getOwnPropertyDescriptor: function (oTarget, sKey) { + var vValue = oTarget.getItem(sKey); + return vValue ? { + value: vValue, + writable: true, + enumerable: true, + configurable: false + } : undefined; + }, +}); + +/* Cookies test */ + +console.log(docCookies.my_cookie1 = 'First value'); +console.log(docCookies.getItem('my_cookie1')); + +docCookies.setItem('my_cookie1', 'Changed value'); +console.log(docCookies.my_cookie1);</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-proxy-objects', 'Proxy')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("javascript.builtins.Proxy", 2)}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a class="external" href="https://www.youtube.com/watch?v=sClk6aB_CPk">"Proxies are awesome" Brendan Eich の JSConf でのプレゼンテーション</a> (<a class="external" href="http://www.slideshare.net/BrendanEich/metaprog-5303821">スライド</a>)</li> + <li><a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:proxies">ECMAScript Harmony の Proxy 提案ページ</a> と <a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:proxies_semantics">ECMAScript Harmony の Proxy 動作ページ</a></li> + <li><a class="external" href="http://web.archive.org/web/20171007221059/http://soft.vub.ac.be/~tvcutsem/proxies/">プロキシチュートリアル</a></li> + <li><a href="/ja/docs/JavaScript/Old_Proxy_API">旧 Proxy API ページ</a></li> + <li>{{jsxref("Object.watch()")}} は非標準の機能ですが、 Gecko が長期間サポートしてきました。</li> + <li><a class="external" href="https://github.com/indiejs/structures">Observable data structures using Proxy</a></li> +</ul> diff --git a/files/ja/web/javascript/reference/global_objects/proxy/proxy/apply/index.html b/files/ja/web/javascript/reference/global_objects/proxy/proxy/apply/index.html new file mode 100644 index 0000000000..247cca3d2f --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/proxy/proxy/apply/index.html @@ -0,0 +1,112 @@ +--- +title: handler.apply() +slug: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/apply +tags: + - ECMAScript 2015 + - JavaScript + - Method + - Proxy +translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/apply +--- +<div>{{JSRef}}</div> + +<p><strong><code>handler.apply()</code></strong> メソッドは関数呼び出しに対するトラップです。</p> + +<div>{{EmbedInteractiveExample("pages/js/proxyhandler-apply.html", "taller")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力していただける場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">const <var>p</var> = new Proxy(<var>target</var>, { + apply: function(<var>target</var>, <var>thisArg</var>, <var>argumentsList</var>) { + } +}); +</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<p>次の引数が <code>apply()</code> メソッドに渡されます。 <code>this</code> はハンドラーにバインドされます。</p> + +<dl> + <dt><code><var>target</var></code></dt> + <dd>ターゲットオブジェクト</dd> + <dt><code><var>thisArg</var></code></dt> + <dd>この呼び出しに対する <code>this</code> 引数</dd> + <dt><code><var>argumentsList</var></code></dt> + <dd>この呼び出しに対する引数リスト</dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p><code>apply()</code> メソッドはどんな値でも返すことができます。</p> + +<h2 id="Description" name="Description">解説</h2> + +<p><code><strong>handler.apply()</strong></code> メソッドは関数呼び出しに対するトラップです。</p> + +<h3 id="Interceptions" name="Interceptions">介入</h3> + +<p>このトラップは下記の操作に介入できます。</p> + +<ul> + <li><code><var>proxy</var>(...<var>args</var>)</code></li> + <li>{{jsxref("Function.prototype.apply()")}} and {{jsxref("Function.prototype.call()")}}</li> + <li>{{jsxref("Reflect.apply()")}}</li> +</ul> + +<h3 id="Invariants" name="Invariants">不変条件</h3> + +<p>以下の不変条件に違反している場合、プロキシは {{jsxref("TypeError")}} を発生します。</p> + +<p><code>target</code> は呼び出し可能、つまり関数でなければなりません。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Trapping_a_function_call" name="Trapping_a_function_call">関数呼び出しのトラップ</h3> + +<p>次のコードでは、関数呼び出しをトラップします。</p> + +<pre class="brush: js notranslate">const p = new Proxy(function() {}, { + apply: function(target, thisArg, argumentsList) { + console.log('called: ' + argumentsList.join(', ')); + return argumentsList[0] + argumentsList[1] + argumentsList[2]; + } +}); + +console.log(p(1, 2, 3)); // "called: 1, 2, 3" + // 6 +</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-call-thisargument-argumentslist', '[[Call]]')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("javascript.builtins.Proxy.handler.apply")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Proxy")}}</li> + <li>{{jsxref("Proxy.handler", "handler")}}</li> + <li>{{jsxref("Function.prototype.apply()")}}</li> + <li>{{jsxref("Function.prototype.call()")}}</li> + <li>{{jsxref("Reflect.apply()")}}</li> +</ul> diff --git a/files/ja/web/javascript/reference/global_objects/proxy/proxy/construct/index.html b/files/ja/web/javascript/reference/global_objects/proxy/proxy/construct/index.html new file mode 100644 index 0000000000..ba66eb5ad3 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/proxy/proxy/construct/index.html @@ -0,0 +1,134 @@ +--- +title: handler.construct() +slug: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/construct +tags: + - ECMAScript 2015 + - JavaScript + - Method + - Proxy +translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/construct +--- +<div>{{JSRef}}</div> + +<p><strong><code>handler.construct()</code></strong> メソッドは {{jsxref("Operators/new", "new")}} 演算子のトラップです。結果として得られるプロキシオブジェクトに対して新しい操作を有効にするためには、プロキシを初期化するために使われるターゲット自身が <code>[[Construct]]</code> 内部メソッドを持っていなければなりません(つまり、 <code>new target</code> が有効でなければなりません)。</p> + +<div>{{EmbedInteractiveExample("pages/js/proxyhandler-construct.html", "taller")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力していただける場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="brush: js notranslate">const <var>p</var> = new Proxy(<var>target</var>, { + construct: function(<var>target</var>, <var>argumentsList</var>, <var>newTarget</var>) { + } +}); +</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<p>次の引数が <code>construct()</code> メソッドに渡されます。 <code>this</code> はハンドラーにバインドされます。</p> + +<dl> + <dt><code><var>target</var></code></dt> + <dd>ターゲットオブジェクト</dd> + <dt><code><var>argumentsList</var></code></dt> + <dd>コンストラクタに対する引数のリスト</dd> + <dt><code><var>newTarget</var></code></dt> + <dd>上記の <code><var>p</var></code> に呼び出された元のコンストラクターです。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p><code>construct</code> メソッドはオブジェクトを返す必要があります。</p> + +<h2 id="Description" name="Description">解説</h2> + +<p><code><strong>handler.construct()</strong></code> メソッドは {{jsxref("Operators/new", "new")}} 操作に対するトラップです。</p> + +<h3 id="Interceptions" name="Interceptions">介入</h3> + +<p>このトラップは下記の操作に介入できます。</p> + +<ul> + <li><code>new proxy(...args)</code></li> + <li>{{jsxref("Reflect.construct()")}}</li> +</ul> + +<h3 id="Invariants" name="Invariants">不変条件</h3> + +<p>以下の不変条件に違反している場合、プロキシは {{jsxref("TypeError")}} を発生します。</p> + +<ul> + <li>結果が <code>Object</code> でならなければならない。</li> +</ul> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Trapping_the_new_operator" name="Trapping_the_new_operator">new 演算子のトラップ</h3> + +<p>次のコードでは {{jsxref("Operators/new", "new")}} 操作をトラップします。</p> + +<pre class="brush: js notranslate">const p = new Proxy(function() {}, { + construct: function(target, argumentsList, newTarget) { + console.log('called: ' + argumentsList.join(', ')); + return { value: argumentsList[0] * 10 }; + } +}); + +console.log(new p(1).value); // "called: 1" + // 10 +</pre> + +<p>次のコードでは不変条件に違反します。</p> + +<pre class="brush: js example-bad notranslate">const p = new Proxy(function() {}, { + construct: function(target, argumentsList, newTarget) { + return 1; + } +}); + +new p(); // TypeError is thrown +</pre> + +<p>次のコードはプロキシを正しく初期化していません。プロキシの <code><var>target</var></code> の初期化は、それ自身が {{jsxref("Operators/new", "new")}} 演算子に有効なコンストラクターでなければなりません。</p> + +<pre class="brush: js example-bad notranslate">const p = new Proxy({}, { + construct: function(target, argumentsList, newTarget) { + return {}; + } +}); + +new p(); // TypeError is thrown, "p" is not a constructor +</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-construct-argumentslist-newtarget', '[[Construct]]')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("javascript.builtins.Proxy.handler.construct")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Proxy")}}</li> + <li>{{jsxref("Proxy.handler", "handler")}}</li> + <li>{{jsxref("Operators/new", "new")}} operator.</li> + <li>{{jsxref("Reflect.construct()")}}</li> +</ul> diff --git a/files/ja/web/javascript/reference/global_objects/proxy/proxy/defineproperty/index.html b/files/ja/web/javascript/reference/global_objects/proxy/proxy/defineproperty/index.html new file mode 100644 index 0000000000..14e9344db1 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/proxy/proxy/defineproperty/index.html @@ -0,0 +1,140 @@ +--- +title: handler.defineProperty() +slug: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/defineProperty +tags: + - ECMAScript 2015 + - JavaScript + - Method + - Proxy +translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/defineProperty +--- +<div>{{JSRef}}</div> + +<p><strong><code>handler.defineProperty()</code></strong> は {{jsxref("Object.defineProperty()")}} に対するトラップです。</p> + +<div>{{EmbedInteractiveExample("pages/js/proxyhandler-defineproperty.html", "taller")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力していただける場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">const <var>p</var> = new Proxy(<var>target</var>, { + defineProperty: function(<var>target</var>, <var>property</var>, <var>descriptor</var>) { + } +}); +</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<p>次の引数が <code>defineProperty()</code> メソッドに渡されます。 <code>this</code> はハンドラにバインドされます。</p> + +<dl> + <dt><code><var>target</var></code></dt> + <dd>ターゲットオブジェクトです。</dd> + <dt><code><var>property</var></code></dt> + <dd>説明を受け取るプロパティの名前または {{jsxref("Symbol")}} です。</dd> + <dt><code><var>descriptor</var></code></dt> + <dd>定義や変更されるプロパティに対するディスクリプターです。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p><code>defineProperty()</code> メソッドはプロパティが正しく定義されたかどうかを表す {{jsxref("Boolean")}} を返す必要があります。</p> + +<h2 id="Description" name="Description">解説</h2> + +<p><code><strong>handler.defineProperty()</strong></code> メソッドは {{jsxref("Object.defineProperty()")}} に対するトラップです。</p> + +<h3 id="Interceptions" name="Interceptions">介入</h3> + +<p>このトラップは下記の操作に介入できます。</p> + +<ul> + <li>{{jsxref("Object.defineProperty()")}}</li> + <li>{{jsxref("Reflect.defineProperty()")}}</li> +</ul> + +<h3 id="Invariants" name="Invariants">不変条件</h3> + +<p>以下の不変条件に違反している場合、プロキシは {{jsxref("TypeError")}} を発生します。</p> + +<ul> + <li>ターゲットオブジェクトが拡張不可の場合、プロパティは追加できません。</li> + <li>ターゲットオブジェクトの設定不可の独自のプロパティとして存在しない場合、プロパティは設定不可とみなされ、追加や変更ができません。</li> + <li>ターゲットオブジェクトの対応する設定可能なプロパティが存在する場合、プロパティは設定不可にすることができません。</li> + <li>対応するターゲットオブジェクトのプロパティが存在する場合、<code>Object.defineProperty(target, prop, descriptor)</code> は例外をスローしません。</li> + <li>strict モードでは、<code>defineProperty</code> ハンドラから <code>false</code> が返ってきた場合、{{jsxref("TypeError")}} 例外をスローします。</li> +</ul> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Trapping_of_defineProperty" name="Trapping_of_defineProperty">defineProperty のトラップ</h3> + +<p>次のコードは {{jsxref("Object.defineProperty()")}} をトラップします。</p> + +<pre class="brush: js notranslate">const p = new Proxy({}, { + defineProperty: function(target, prop, descriptor) { + console.log('called: ' + prop); + return true; + } +}); + +const desc = { configurable: true, enumerable: true, value: 10 }; +Object.defineProperty(p, 'a', desc); // "called: a" +</pre> + +<p>{{jsxref("Object.defineProperty()")}} または {{jsxref("Reflect.defineProperty()")}} を呼び出した時、 <code>defineProperty()</code> トラップに渡されるディスクリプターには制約があります。下記のプロパティのみが使用可能で、標準ではないプロパティは無視されます。</p> + +<ul> + <li><code>enumerable</code></li> + <li><code>configurable</code></li> + <li><code>writable</code></li> + <li><code>value</code></li> + <li><code>get</code></li> + <li><code>set</code></li> +</ul> + +<pre class="brush: js notranslate">const p = new Proxy({}, { + defineProperty(target, prop, descriptor) { + console.log(descriptor); + return Reflect.defineProperty(target, prop, descriptor); + } +}); + +Object.defineProperty(p, 'name', { + value: 'proxy', + type: 'custom' +}); // { value: 'proxy' } +</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-defineownproperty-p-desc', '[[DefineOwnProperty]]')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("javascript.builtins.Proxy.handler.defineProperty")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Proxy")}}</li> + <li>{{jsxref("Proxy.handler", "handler")}}</li> + <li>{{jsxref("Object.defineProperty()")}}</li> + <li>{{jsxref("Reflect.defineProperty()")}}</li> +</ul> diff --git a/files/ja/web/javascript/reference/global_objects/proxy/proxy/deleteproperty/index.html b/files/ja/web/javascript/reference/global_objects/proxy/proxy/deleteproperty/index.html new file mode 100644 index 0000000000..0d036364e5 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/proxy/proxy/deleteproperty/index.html @@ -0,0 +1,126 @@ +--- +title: handler.deleteProperty() +slug: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/deleteProperty +tags: + - ECMAScript 2015 + - JavaScript + - Method + - Proxy +translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/deleteProperty +--- +<div>{{JSRef}}</div> + +<p><strong><code>handler.deleteProperty()</code></strong> メソッドは、 {{jsxref("Operators/delete", "delete")}} 演算子のトラップです。</p> + +<div>{{EmbedInteractiveExample("pages/js/proxyhandler-deleteproperty.html", "taller")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力していただける場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">const p = new Proxy(<var>target</var>, { + deleteProperty: function(<var>target</var>, <var>property</var>) { + } +}); +</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<p>次の引数が <code>deleteProperty</code> メソッドに渡されます。 <code>this</code> はハンドラにバインドされます。</p> + +<dl> + <dt><code><var>target</var></code></dt> + <dd>ターゲットオブジェクト</dd> + <dt><code><var>property</var></code></dt> + <dd>削除するプロパティの名前</dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p><code>deleteProperty</code> メソッドはプロパティが正しく削除されたかどうか示す {{jsxref("Boolean")}} 値を返さなければなりません。</p> + +<h2 id="Description" name="Description">解説</h2> + +<p><code><strong>handler.deleteProperty()</strong></code> メソッドは{{jsxref("Operators/delete", "delete")}}操作に対するトラップです。</p> + +<h3 id="Interceptions" name="Interceptions">介入</h3> + +<p>このトラップは下記の操作に介入できます。</p> + +<ul> + <li>プロパティの削除: <code>delete proxy[foo]</code> と <code>delete proxy.foo</code></li> + <li>{{jsxref("Reflect.deleteProperty()")}}</li> +</ul> + +<h3 id="Invariants" name="Invariants">不変条件</h3> + +<p>以下の不変条件に違反している場合、プロキシは {{jsxref("TypeError")}} を発生します。</p> + +<ul> + <li>ターゲットオブジェクトの非設定独自プロパティとして存在する場合、プロパティは削除されません。</li> +</ul> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Trap_for_getting_a_property_value" name="Trap_for_getting_a_property_value">プロパティ値の取得のトラップ</h3> + +<p>次のコードは {{jsxref("Operators/delete", "delete")}} 操作をトラップします。</p> + +<pre class="brush: js notranslate">const p = new Proxy({}, { + deleteProperty: function(target, prop) { + if (prop in target){ + delete target[prop] + console.log('property removed: ' + prop) + return true + } + else { + console.log('property not found: ' + prop) + return false + } + } +}) + +let result + +p.a = 10 +console.log('a' in p) // true + +result = delete p.a // "property removed: a" +console.log(result) // true +console.log('a' in p) // false + +result = delete p.a // "property not found: a" +console.log(result) // false +</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-delete-p', '[[Delete]]')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("javascript.builtins.Proxy.handler.deleteProperty")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Proxy")}}</li> + <li>{{jsxref("Proxy.handler", "handler")}}</li> + <li>{{jsxref("Operators/delete", "delete")}} operator</li> + <li>{{jsxref("Reflect.deleteProperty()")}}</li> +</ul> diff --git a/files/ja/web/javascript/reference/global_objects/proxy/proxy/get/index.html b/files/ja/web/javascript/reference/global_objects/proxy/proxy/get/index.html new file mode 100644 index 0000000000..8220917e83 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/proxy/proxy/get/index.html @@ -0,0 +1,132 @@ +--- +title: handler.get() +slug: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/get +tags: + - ECMAScript 2015 + - JavaScript + - Method + - Proxy +translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/get +--- +<div>{{JSRef}}</div> + +<p><strong><code>handler.get()</code></strong> はプロパティの値を取得することに対するトラップです。</p> + +<div>{{EmbedInteractiveExample("pages/js/proxyhandler-get.html", "taller")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力していただける場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">const <var>p</var> = new Proxy(<var>target</var>, { + get: function(<var>target</var>, <var>property</var>, <var>receiver</var>) { + } +}); +</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<p>次の引数が <code>get()</code> メソッドに渡されます。 <code>this</code> はハンドラーにバインドされます。</p> + +<dl> + <dt><code><var>target</var></code></dt> + <dd>ターゲットオブジェクト</dd> + <dt><code><var>property</var></code></dt> + <dd>取得するプロパティの名称</dd> + <dt><code><var>receiver</var></code></dt> + <dd>proxy、または proxy から継承するオブジェクトのどちらか</dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p><code>get()</code> メソッドはどんな値でも返すことができます。</p> + +<h2 id="Description" name="Description">解説</h2> + +<p><code><strong>handler.get()</strong></code> メソッドはプロパティ値を取得することに対するトラップです。</p> + +<h3 id="Interceptions" name="Interceptions">介入</h3> + +<p>このトラップは下記の操作に介入できます。</p> + +<ul> + <li>プロパティアクセス: <code><var>proxy</var>[<var>foo</var>]</code> と <code><var>proxy</var>.<var>bar</var></code></li> + <li>継承したプロパティアクセス: <code>Object.create(<var>proxy</var>)[<var>foo</var>]</code></li> + <li>{{jsxref("Reflect.get()")}}</li> +</ul> + +<h3 id="Invariants" name="Invariants">不変条件</h3> + +<p>以下の不変条件に違反している場合、プロキシは {{jsxref("TypeError")}} を発生します。</p> + +<ul> + <li>ターゲットオブジェクトプロパティが書き込み不可で非設定なデータプロパティなら、プロパティに対して報告される値は対応するターゲットオブジェクトプロパティと同じでなければなりません。</li> + <li>対応するターゲットオブジェクトプロパティが[[Get]]属性として未定義で非設定なアクセスプロパティなら、プロパティに対して報告される値は未定義でなければなりません。</li> +</ul> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Trap_for_getting_a_property_value" name="Trap_for_getting_a_property_value">プロパティ値の取得のトラップ</h3> + +<p>次のコードではプロパティ値の取得をトラップします。</p> + +<pre class="brush: js notranslate">const p = new Proxy({}, { + get: function(target, property, receiver) { + console.log('called: ' + property); + return 10; + } +}); + +console.log(p.a); // "called: a" + // 10 +</pre> + +<p>次のコードでは不変条件に違反します。</p> + +<pre class="brush: js notranslate">const obj = {}; +Object.defineProperty(obj, 'a', { + configurable: false, + enumerable: false, + value: 10, + writable: false +}); + +const p = new Proxy(obj, { + get: function(target, property) { + return 20; + } +}); + +p.a; // TypeError is thrown +</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-get-p-receiver', '[[Get]]')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("javascript.builtins.Proxy.handler.get")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Proxy")}}</li> + <li>{{jsxref("Proxy.handler", "handler")}}</li> + <li>{{jsxref("Reflect.get()")}}</li> +</ul> diff --git a/files/ja/web/javascript/reference/global_objects/proxy/proxy/getownpropertydescriptor/index.html b/files/ja/web/javascript/reference/global_objects/proxy/proxy/getownpropertydescriptor/index.html new file mode 100644 index 0000000000..2c37a5c7a9 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/proxy/proxy/getownpropertydescriptor/index.html @@ -0,0 +1,128 @@ +--- +title: handler.getOwnPropertyDescriptor() +slug: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/getOwnPropertyDescriptor +tags: + - ECMAScript 2015 + - JavaScript + - Method + - Proxy +translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/getOwnPropertyDescriptor +--- +<div>{{JSRef}}</div> + +<p><strong><code>handler.getOwnPropertyDescriptor()</code></strong> は {{jsxref("Object.getOwnPropertyDescriptor()")}} に対するトラップです。</p> + +<div>{{EmbedInteractiveExample("pages/js/proxyhandler-getownpropertydescriptor.html", "taller")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力していただける場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="brush: js notranslate">const <var>p</var> = new Proxy(<var>target</var>, { + getOwnPropertyDescriptor: function(<var>target</var>, <var>prop</var>) { + } +}); +</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<p>次の引数は <code>getOwnPropertyDescriptor()</code> メソッドに渡されます。 <code>this</code> はハンドラーにバインドされます。</p> + +<dl> + <dt><code><var>target</var></code></dt> + <dd>ターゲットオブジェクトです。</dd> + <dt><code><var>prop</var></code></dt> + <dd>ディスクリプタを取得されるプロパティ名です。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p><code>getOwnPropertyDescriptor</code> メソッドはオブジェクト、または <code>undefined</code> を返さなければなりません。</p> + +<h2 id="Description" name="Description">解説</h2> + +<p><code><strong>handler.getOwnPropertyDescriptor()</strong></code> メソッドは {{jsxref("Object.getOwnPropertyDescriptor()")}} に対するトラップです。</p> + +<h3 id="Interceptions" name="Interceptions">介入</h3> + +<p>このトラップは下記の操作に介入できます。</p> + +<ul> + <li>{{jsxref("Object.getOwnPropertyDescriptor()")}}</li> + <li>{{jsxref("Reflect.getOwnPropertyDescriptor()")}}</li> +</ul> + +<h3 id="Invariants" name="Invariants">不変条件</h3> + +<p>以下の不変条件に違反している場合、プロキシは {{jsxref("TypeError")}} を発生します。</p> + +<ul> + <li><code>getOwnPropertyDescriptor()</code> はオブジェクトか、または <code>undefined</code> を返さなければなりません。</li> + <li>プロパティがターゲットオブジェクトの設定不可な独自のプロパティとして存在する場合、存在しないとして報告されてはいけません。</li> + <li>プロパティがターゲットオブジェクトの独自のプロパティとして存在し、そのターゲットオブジェクトが拡張不可の場合、存在しないとして報告されてはいけません。</li> + <li>プロパティがターゲットオブジェクトの独自のプロパティとして存在せず、そのターゲットオブジェクトが拡張不可の場合、存在するとして報告されてはいけません。</li> + <li>プロパティがターゲットオブジェクトの独自のプロパティとして存在しないか、ターゲットオブジェクトの設定可能な独自のプロパティとして存在している場合、設定不可であるとして報告されてはいけません。</li> + <li><code>Object.getOwnPropertyDescriptor(<var>target</var>)</code> の結果を <code>Object.defineProperty()</code> に使用した時に、ターゲットオブジェクトに適用でき、例外をスローしません。</li> +</ul> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Trapping_of_getOwnPropertyDescriptor" name="Trapping_of_getOwnPropertyDescriptor">getOwnPropertyDescriptor のトラップ</h3> + +<p>次のコードでは {{jsxref("Object.getOwnPropertyDescriptor()")}} をトラップします。</p> + +<pre class="brush: js notranslate">const p = new Proxy({ a: 20}, { + getOwnPropertyDescriptor: function(target, prop) { + console.log('called: ' + prop); + return { configurable: true, enumerable: true, value: 10 }; + } +}); + +console.log(Object.getOwnPropertyDescriptor(p, 'a').value); // "called: a" + // 10 +</pre> + +<p>次のコードでは不変条件に違反します。</p> + +<pre class="brush: js example-bad notranslate">const obj = { a: 10 }; +Object.preventExtensions(obj); +const p = new Proxy(obj, { + getOwnPropertyDescriptor: function(target, prop) { + return undefined; + } +}); + +Object.getOwnPropertyDescriptor(p, 'a'); // TypeError is thrown +</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-getownproperty-p', '[[GetOwnProperty]]')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("javascript.builtins.Proxy.handler.getOwnPropertyDescriptor")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Proxy")}}</li> + <li>{{jsxref("Proxy.handler", "handler")}}</li> + <li>{{jsxref("Object.getOwnPropertyDescriptor()")}}</li> + <li>{{jsxref("Reflect.getOwnPropertyDescriptor()")}}</li> +</ul> diff --git a/files/ja/web/javascript/reference/global_objects/proxy/proxy/getprototypeof/index.html b/files/ja/web/javascript/reference/global_objects/proxy/proxy/getprototypeof/index.html new file mode 100644 index 0000000000..f8d640060e --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/proxy/proxy/getprototypeof/index.html @@ -0,0 +1,148 @@ +--- +title: handler.getPrototypeOf() +slug: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/getPrototypeOf +tags: + - ECMAScript 2015 + - JavaScript + - Method + - Proxy +translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/getPrototypeOf +--- +<div>{{JSRef}}</div> + +<p><strong><code>handler.getPrototypeOf()</code></strong> メソッドは <code>[[GetPrototypeOf]]</code> 内部メソッドに対するトラップです。</p> + +<div>{{EmbedInteractiveExample("pages/js/proxyhandler-getprototypeof.html", "taller")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力していただける場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">const <var>p</var> = new Proxy(<var>obj</var>, { + getPrototypeOf(<var>target</var>) { + ... + } +}); +</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<p>次の引数は <code>getPrototypeOf()</code> メソッドに渡されます。<code>this</code> はハンドラにバインドされます。</p> + +<dl> + <dt><code><var>target</var></code></dt> + <dd>ターゲットオブジェクトです。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p><code>getPrototypeOf()</code> メソッドはオブジェクト、または <code>null</code> を返さなければなりません。</p> + +<h2 id="Description" name="Description">解説</h2> + +<h3 id="Interceptions" name="Interceptions">介入</h3> + +<p>このトラップは下記の操作に介入できます。</p> + +<ul> + <li>{{jsxref("Object.getPrototypeOf()")}}</li> + <li>{{jsxref("Reflect.getPrototypeOf()")}}</li> + <li>{{jsxref("Object/proto", "__proto__")}}</li> + <li>{{jsxref("Object.prototype.isPrototypeOf()")}}</li> + <li>{{jsxref("Operators/instanceof", "instanceof")}}</li> +</ul> + +<h3 id="Invariants" name="Invariants">不変条件</h3> + +<p>以下の不変条件に違反している場合、プロキシは {{jsxref("TypeError")}} を発生します。</p> + +<ul> + <li><code>getPrototypeOf</code> メソッドはオブジェクト、または <code>null</code> を返さなければなりません。</li> + <li><code>target</code>が拡張不可の場合、 <code>Object.getPrototypeOf(<var>proxy</var>)</code> メソッドは <code>Object.getPrototypeOf(<var>target</var>)</code> と同じ値を返さなければなりません。</li> +</ul> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Basic_usage" name="Basic_usage">基本的な使い方</h3> + +<pre class="brush: js notranslate">const obj = {}; +const proto = {}; +const handler = { + getPrototypeOf(target) { + console.log(target === obj); // true + console.log(this === handler); // true + return proto; + } +}; + +const p = new Proxy(obj, handler); +console.log(Object.getPrototypeOf(p) === proto); // true +</pre> + +<h3 id="Five_ways_to_trigger_the_getPrototypeOf_trap" name="Five ways to trigger the getPrototypeOf trap">getPrototypeOf トラップが発生する5つの方法</h3> + +<pre class="brush: js notranslate">const obj = {}; +const p = new Proxy(obj, { + getPrototypeOf(target) { + return Array.prototype; + } +}); +console.log( + Object.getPrototypeOf(p) === Array.prototype, // true + Reflect.getPrototypeOf(p) === Array.prototype, // true + p.__proto__ === Array.prototype, // true + Array.prototype.isPrototypeOf(p), // true + p instanceof Array // true +); +</pre> + +<h3 id="Two_kinds_of_exceptions" name="Two_kinds_of_exceptions">2種類の例外</h3> + +<pre class="brush: js example-bad notranslate">const obj = {}; +const p = new Proxy(obj, { + getPrototypeOf(target) { + return 'foo'; + } +}); +Object.getPrototypeOf(p); // TypeError: "foo" is not an object or null + +const obj = Object.preventExtensions({}); +const p = new Proxy(obj, { + getPrototypeOf(target) { + return {}; + } +}); +Object.getPrototypeOf(p); // TypeError: expected same prototype value +</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-getprototypeof', '[[GetPrototypeOf]]')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("javascript.builtins.Proxy.handler.getPrototypeOf")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Proxy")}}</li> + <li>{{jsxref("Proxy.handler", "handler")}}</li> + <li>{{jsxref("Object.getPrototypeOf()")}}</li> + <li>{{jsxref("Reflect.getPrototypeOf()")}}</li> +</ul> diff --git a/files/ja/web/javascript/reference/global_objects/proxy/proxy/has/index.html b/files/ja/web/javascript/reference/global_objects/proxy/proxy/has/index.html new file mode 100644 index 0000000000..1686bb5ba4 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/proxy/proxy/has/index.html @@ -0,0 +1,127 @@ +--- +title: handler.has() +slug: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/has +tags: + - ECMAScript 2015 + - JavaScript + - Method + - Proxy +translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/has +--- +<div>{{JSRef}}</div> + +<p><strong><code>handler.has()</code></strong> は {{jsxref("Operators/in", "in")}} 演算子に対するトラップです。</p> + +<div>{{EmbedInteractiveExample("pages/js/proxyhandler-has.html", "taller")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力していただける場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">const <var>p</var> = new Proxy(<var>target</var>, { + has: function(<var>target</var>, <var>prop</var>) { + } +}); +</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<p>次の引数は <code>has()</code> メソッドに渡されます。 <code>this</code> はハンドラーにバインドされます。</p> + +<dl> + <dt><code><var>target</var></code></dt> + <dd>ターゲットオブジェクトです。</dd> + <dt><code>prop</code></dt> + <dd>存在を確認するプロパティ名です。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p><code>has</code> メソッドは真偽値を返さなければなりません。</p> + +<h2 id="Description" name="Description">解説</h2> + +<p><code><strong>handler.has()</strong></code> メソッドは {{jsxref("Operators/in", "in")}} 演算子に対するトラップです。</p> + +<h3 id="Interceptions" name="Interceptions">介入</h3> + +<p>このトラップは下記の操作に介入できます。</p> + +<ul> + <li>プロパティクエリ: <code><var>foo</var> in <var>proxy</var></code></li> + <li>継承したプロパティクエリ: <code>foo in Object.create(<var>proxy</var>)</code></li> + <li><code>with</code> チェック: <code>with(<var>proxy</var>) { (<var>foo</var>); }</code></li> + <li>{{jsxref("Reflect.has()")}}</li> +</ul> + +<h3 id="Invariants" name="Invariants">不変条件</h3> + +<p>以下の不変条件に違反している場合、プロキシは {{jsxref("TypeError")}} を発生します。</p> + +<ul> + <li>プロパティがターゲットオブジェクトの設定不可の独自プロパティとして存在する場合、存在しないとして報告されてはいけません。</li> + <li>プロパティがターゲットオブジェクトの独自プロパティとして存在し、そのターゲットオブジェクトが拡張不可の場合、存在しないとして報告されてはいけません。</li> +</ul> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Trapping_the_in_operator" name="Trapping_the_in_operator">in 演算子のトラップ</h3> + +<p>次のコードでは {{jsxref("Operators/in", "in")}} 演算子をトラップします。</p> + +<pre class="brush: js notranslate">const p = new Proxy({}, { + has: function(target, prop) { + console.log('called: ' + prop); + return true; + } +}); + +console.log('a' in p); // "called: a" + // true +</pre> + +<p>次のコードでは不変条件に違反します。</p> + +<pre class="brush: js example-bad notranslate">const obj = { a: 10 }; +Object.preventExtensions(obj); + +const p = new Proxy(obj, { + has: function(target, prop) { + return false; + } +}); + +'a' in p; // TypeError is thrown +</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-hasproperty-p', '[[HasProperty]]')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("javascript.builtins.Proxy.handler.has")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Proxy")}}</li> + <li>{{jsxref("Proxy.handler", "handler")}}</li> + <li>{{jsxref("Operators/in", "in")}} 演算子</li> + <li>{{jsxref("Reflect.has()")}}</li> +</ul> diff --git a/files/ja/web/javascript/reference/global_objects/proxy/proxy/index.html b/files/ja/web/javascript/reference/global_objects/proxy/proxy/index.html new file mode 100644 index 0000000000..ddf04c253d --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/proxy/proxy/index.html @@ -0,0 +1,124 @@ +--- +title: Proxy() コンストラクター +slug: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy +tags: + - Constructor + - JavaScript + - Proxy + - Reference + - コンストラクター +translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy +--- +<div>{{JSRef}}</div> + +<p><code><strong>Proxy()</strong></code> コンストラクターは {{jsxref("Proxy")}} オブジェクトを生成するために使用します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">new Proxy(<var>target</var>, <var>handler</var>)</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code><var>target</var></code></dt> + <dd><code>Proxy</code> でラップするターゲットのオブジェクトです。あらゆる種類のオブジェクト、例えばネイティブ配列や関数、別のプロキシなどがなることができます。</dd> + <dt><code><var>handler</var></code></dt> + <dd>関数をプロパティとして持つオブジェクトで、その関数で、 Proxy <code><var>p</var></code> に対して操作が行われた場合の挙動を定義します。</dd> +</dl> + +<h2 id="Description" name="Description">解説</h2> + +<p><code>Proxy()</code> コンストラクターを使用すると、新しい <code>Proxy</code> オブジェクトを生成することができます。このコンストラクターは2つの必須の引数を取ります。</p> + +<ul> + <li><code>target</code> はプロキシを作成するオブジェクトです。</li> + <li><code>handler</code> はプロキシのカスタム動作を定義するオブジェクトです。</li> +</ul> + +<p>handler を空にすると、ほとんどすべての点でターゲットとまったく同じように振る舞うプロキシを作成します。 <code>handler</code> オブジェクト上で関数群のいずれかを定義することで、プロキシの動作の特定の側面をカスタマイズすることができます。例えば、 <code>get()</code> を定義することで、 ターゲットの<a href="/ja/docs/Web/JavaScript/Reference/Operators/Property_Accessors">プロパティアクセサー</a>のカスタマイズされたバージョンを提供することができます。</p> + +<h3 id="Handler_functions" name="Handler_functions">ハンドラー関数</h3> + +<p>この節では、定義することができるすべてのハンドラー関数を列挙します。ハンドラー関数は、対象オブジェクトの呼び出しをトラップするので、<em>トラップ</em>と呼ばれることがあります。</p> + +<dl> + <dt>{{JSxRef("Global_Objects/Proxy/Proxy/apply", "handler.apply()")}}</dt> + <dd>関数呼び出しのトラップです。。</dd> + <dt>{{JSxRef("Global_Objects/Proxy/Proxy/construct", "handler.construct()")}}</dt> + <dd>{{JSxRef("Operators/new", "new")}} 演算子のトラップです。</dd> + <dt>{{JSxRef("Global_Objects/Proxy/Proxy/defineProperty", "handler.defineProperty()")}}</dt> + <dd>{{JSxRef("Object.defineProperty")}} のトラップです。</dd> + <dt>{{JSxRef("Global_Objects/Proxy/Proxy/deleteProperty", "handler.deleteProperty()")}}</dt> + <dd>{{JSxRef("Operators/delete", "delete")}} 演算子のトラップです。</dd> + <dt>{{JSxRef("Global_Objects/Proxy/Proxy/get", "handler.get()")}}</dt> + <dd>プロパティ値の取得のトラップです。</dd> + <dt>{{JSxRef("Global_Objects/Proxy/Proxy/getOwnPropertyDescriptor", "handler.getOwnPropertyDescriptor()")}}</dt> + <dd>{{JSxRef("Object.getOwnPropertyDescriptor")}} のトラップです。</dd> + <dt>{{JSxRef("Global_Objects/Proxy/Proxy/getPrototypeOf", "handler.getPrototypeOf()")}}</dt> + <dd>{{JSxRef("Object.getPrototypeOf")}} のトラップです。</dd> + <dt>{{JSxRef("Global_Objects/Proxy/Proxy/has", "handler.has()")}}</dt> + <dd>{{JSxRef("Operators/in", "in")}} 演算子のトラップです。</dd> + <dt>{{JSxRef("Global_Objects/Proxy/Proxy/isExtensible", "handler.isExtensible()")}}</dt> + <dd>{{JSxRef("Object.isExtensible")}} のトラップです。</dd> + <dt>{{JSxRef("Global_Objects/Proxy/Proxy/ownKeys", "handler.ownKeys()")}}</dt> + <dd>{{JSxRef("Object.getOwnPropertyNames")}} と {{JSxRef("Object.getOwnPropertySymbols")}} のトラップです。</dd> + <dt>{{JSxRef("Global_Objects/Proxy/Proxy/preventExtensions", "handler.preventExtensions()")}}</dt> + <dd>{{JSxRef("Object.preventExtensions")}} のトラップです。</dd> + <dt>{{JSxRef("Global_Objects/Proxy/Proxy/set", "handler.set()")}}</dt> + <dd>プロパティ値の設定のトラップです。</dd> + <dt>{{JSxRef("Global_Objects/Proxy/Proxy/setPrototypeOf", "handler.setPrototypeOf()")}}</dt> + <dd>{{JSxRef("Object.setPrototypeOf")}} のトラップです。</dd> +</dl> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Selectively_proxy_property_accessors" name="Selectively_proxy_property_accessors">選択的にプロパティアクセサーのプロキシを行う</h3> + +<p>この例では、ターゲットは <code>notProxied</code> と <code>proxied</code> の2つのプロパティを持っています。 <code>proxied</code> に別の値を返し、それ以外のアクセスをターゲットに許可するハンドラーを定義します。</p> + +<pre class="brush: js">const target = { + notProxied: "original value", + proxied: "original value" +}; + +const handler = { + get: function(target, prop, receiver) { + if (prop === "proxied") { + return "replaced value"; + } + return Reflect.get(...arguments); + } +}; + +const proxy = new Proxy(target, handler); + +console.log(proxy.notProxied); // "original value" +console.log(proxy.proxied); // "replaced value"</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-proxy-constructor', 'Proxy constructor')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("javascript.builtins.Proxy.Proxy")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/JavaScript/Guide/Meta_programming">JavaScript Guide ガイドの <code>Proxy</code> と <code>Reflect</code></a></li> + <li>{{jsxref("Global_Objects/Reflect", "Reflect")}}</li> +</ul> diff --git a/files/ja/web/javascript/reference/global_objects/proxy/proxy/isextensible/index.html b/files/ja/web/javascript/reference/global_objects/proxy/proxy/isextensible/index.html new file mode 100644 index 0000000000..271be0190b --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/proxy/proxy/isextensible/index.html @@ -0,0 +1,119 @@ +--- +title: handler.isExtensible() +slug: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/isExtensible +tags: + - ECMAScript 2015 + - JavaScript + - Method + - Proxy +translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/isExtensible +--- +<div>{{JSRef}}</div> + +<p><strong><code>handler.isExtensible()</code></strong> は {{jsxref("Object.isExtensible()")}} に対するトラップです。</p> + +<div>{{EmbedInteractiveExample("pages/js/proxyhandler-isextensible.html", "taller")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力していただける場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">const <var>p</var> = new Proxy(<var>target</var>, { + isExtensible: function(<var>target</var>) { + } +}); +</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<p>次の引数は <code>isExtensible</code> メソッドに渡されます。 <code>this</code> はハンドラーにバインドされます。</p> + +<dl> + <dt><code><var>target</var></code></dt> + <dd>ターゲットオブジェクトです。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p><code>isExtensible</code> メソッドは真偽値を返さなければなりません。</p> + +<h2 id="Description" name="Description">解説</h2> + +<p><code><strong>handler.isExtensible()</strong></code> メソッドは {{jsxref("Object.isExtensible()")}} に対するトラップです。</p> + +<h3 id="Interceptions" name="Interceptions">介入</h3> + +<p>このトラップは下記の操作に介入できます。</p> + +<ul> + <li>{{jsxref("Object.isExtensible()")}}</li> + <li>{{jsxref("Reflect.isExtensible()")}}</li> +</ul> + +<h3 id="Invariants" name="Invariants">不変条件</h3> + +<p>以下の不変条件に違反している場合、プロキシは {{jsxref("TypeError")}} を発生します。</p> + +<ul> + <li><code>Object.isExtensible(proxy)</code> は <code>Object.isExtensible(target)</code> と同じ値を返さなければなりません。</li> +</ul> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Trapping_of_getOwnPropertyNames" name="Trapping_of_getOwnPropertyNames">getOwnPropertyNames のトラップ</h3> + +<p>次のコードでは {{jsxref("Object.isExtensible()")}} をトラップします。</p> + +<pre class="brush: js notranslate">const p = new Proxy({}, { + isExtensible: function(target) { + console.log('called'); + return true; + } +}); + +console.log(Object.isExtensible(p)); // "called" + // true +</pre> + +<p>次のコードでは不変条件に違反します。</p> + +<pre class="brush: js example-bad notranslate">const p = new Proxy({}, { + isExtensible: function(target) { + return false; + } +}); + +Object.isExtensible(p); // TypeError is thrown +</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-isextensible', '[[IsExtensible]]')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("javascript.builtins.Proxy.handler.isExtensible")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Proxy")}}</li> + <li>{{jsxref("Proxy.handler", "handler")}}</li> + <li>{{jsxref("Object.isExtensible()")}}</li> + <li>{{jsxref("Reflect.isExtensible()")}}</li> +</ul> diff --git a/files/ja/web/javascript/reference/global_objects/proxy/proxy/ownkeys/index.html b/files/ja/web/javascript/reference/global_objects/proxy/proxy/ownkeys/index.html new file mode 100644 index 0000000000..d11a96316c --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/proxy/proxy/ownkeys/index.html @@ -0,0 +1,133 @@ +--- +title: handler.ownKeys() +slug: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/ownKeys +tags: + - ECMAScript 2015 + - JavaScript + - Method + - Proxy +translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/ownKeys +--- +<div>{{JSRef}}</div> + +<p><strong><code>handler.ownKeys()</code></strong> メソッドは {{jsxref("Reflect.ownKeys()")}} に対するトラップです。</p> + +<div>{{EmbedInteractiveExample("pages/js/proxyhandler-ownkeys.html", "taller")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力していただける場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">const <var>p</var> = new Proxy(<var>target</var>, { + ownKeys: function(<var>target</var>) { + } +}); +</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<p>次の引数は <code>ownKeys</code> メソッドに渡されます。 <code>this</code> はハンドラーにバインドされます。</p> + +<dl> + <dt><code><var>target</var></code></dt> + <dd>ターゲットオブジェクトです。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p><code>ownKeys()</code> メソッドは列挙可能オブジェクトを返さなければなりません。</p> + +<h2 id="Description" name="Description">解説</h2> + +<p><code><strong>handler.ownKeys()</strong></code> メソッドは {{jsxref("Reflect.ownKeys()")}} に対するトラップです。</p> + +<h3 id="Interceptions" name="Interceptions">介入</h3> + +<p>このトラップは下記の操作に介入できます。</p> + +<ul> + <li>{{jsxref("Object.getOwnPropertyNames()")}}</li> + <li>{{jsxref("Object.getOwnPropertySymbols()")}}</li> + <li>{{jsxref("Object.keys()")}}</li> + <li>{{jsxref("Reflect.ownKeys()")}}</li> +</ul> + +<h3 id="Invariants" name="Invariants">不変条件</h3> + +<p>以下の不変条件に違反している場合、プロキシは {{jsxref("TypeError")}} を発生します。</p> + +<ul> + <li><code>ownKeys</code>の結果はリストです。</li> + <li>結果リストのそれぞれの要素の型は{{jsxref("String")}} または {{jsxref("Symbol")}}のどちらかです。</li> + <li>結果リストはターゲットオブジェクトのすべての非設定の独自プロパティのキーを含みます。</li> + <li>ターゲットオブジェクトが拡張可能でないなら、結果リストはターゲットオブジェクトのすべての独自プロパティのキーを含まなければなりません。そして、他の値を含みません。</li> +</ul> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Trapping_of_getOwnPropertyNames" name="Trapping_of_getOwnPropertyNames">getOwnPropertyNames のトラップ</h3> + +<p>次のコードでは {{jsxref("Object.getOwnPropertyNames()")}} をトラップします。</p> + +<pre class="brush: js notranslate">const p = new Proxy({}, { + ownKeys: function(target) { + console.log('called'); + return ['a', 'b', 'c']; + } +}); + +console.log(Object.getOwnPropertyNames(p)); // "called" + // [ 'a', 'b', 'c' ]</pre> + +<p>次のコードでは不変条件に違反します。</p> + +<pre class="brush: js example-bad notranslate">const obj = {}; +Object.defineProperty(obj, 'a', { + configurable: false, + enumerable: true, + value: 10 } +); + +const p = new Proxy(obj, { + ownKeys: function(target) { + return [123, 12.5, true, false, undefined, null, {}, []]; + } +}); + +console.log(Object.getOwnPropertyNames(p)); + +// TypeError: proxy [[OwnPropertyKeys]] must return an array +// with only string and symbol elements +</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-ownpropertykeys', '[[OwnPropertyKeys]]')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("javascript.builtins.Proxy.handler.ownKeys")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Proxy")}}</li> + <li>{{jsxref("Proxy.handler", "handler")}}</li> + <li>{{jsxref("Object.getOwnPropertyNames()")}}</li> + <li>{{jsxref("Reflect.ownKeys()")}}</li> +</ul> diff --git a/files/ja/web/javascript/reference/global_objects/proxy/proxy/preventextensions/index.html b/files/ja/web/javascript/reference/global_objects/proxy/proxy/preventextensions/index.html new file mode 100644 index 0000000000..c3d95cbcfd --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/proxy/proxy/preventextensions/index.html @@ -0,0 +1,121 @@ +--- +title: handler.preventExtensions() +slug: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/preventExtensions +tags: + - ECMAScript 2015 + - ECMAScript6 + - JavaScript + - Method + - Proxy +translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/preventExtensions +--- +<div>{{JSRef}}</div> + +<p><strong><code>handler.preventExtensions()</code></strong> は {{jsxref("Object.preventExtensions()")}} に対するトラップです。</p> + +<div>{{EmbedInteractiveExample("pages/js/proxyhandler-preventextensions.html", "taller")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力していただける場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="brush: js notranslate">const <var>p</var> = new Proxy(<var>target</var>, { + preventExtensions: function(<var>target</var>) { + } +}); +</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<p>次の引数は <code>preventExtensions()</code> メソッドに渡されます。 <code>this</code> はハンドラーにバインドされます。</p> + +<dl> + <dt><code><var>target</var></code></dt> + <dd>ターゲットオブジェクトです。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p><code>preventExtensions()</code> メソッドは真偽値を返さなければなりません。</p> + +<h2 id="Description" name="Description">解説</h2> + +<p><code><strong>handler.preventExtensions()</strong></code> メソッドは {{jsxref("Object.preventExtensions()")}} に対するトラップです。</p> + +<h3 id="Interceptions" name="Interceptions">介入</h3> + +<p>このトラップは下記の操作に介入できます。</p> + +<ul> + <li>{{jsxref("Object.preventExtensions()")}}</li> + <li>{{jsxref("Reflect.preventExtensions()")}}</li> +</ul> + +<h3 id="Invariants" name="Invariants">不変条件</h3> + +<p>以下の不変条件に違反している場合、プロキシは {{jsxref("TypeError")}} を発生します。</p> + +<ul> + <li><code>Object.preventExtensions(<var>proxy</var>)</code> は、 <code>Object.isExtensible(<var>proxy</var>)</code> が <code>false</code> の場合のみ <code>true</code> を返します。</li> +</ul> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="preventExtensions_のトラップ">preventExtensions のトラップ</h3> + +<p>次のコードでは {{jsxref("Object.preventExtensions()")}} をトラップします。</p> + +<pre class="brush: js notranslate">const p = new Proxy({}, { + preventExtensions: function(target) { + console.log('called'); + Object.preventExtensions(target); + return true; + } +}); + +console.log(Object.preventExtensions(p)); // "called" + // false +</pre> + +<p>The following code violates the invariant.</p> + +<pre class="brush: js example-bad notranslate">const p = new Proxy({}, { + preventExtensions: function(target) { + return true; + } +}); + +Object.preventExtensions(p); // TypeError is thrown +</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-preventextensions', '[[PreventExtensions]]')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("javascript.builtins.Proxy.handler.preventExtensions")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Proxy")}}</li> + <li>{{jsxref("Proxy.handler", "handler")}}</li> + <li>{{jsxref("Object.preventExtensions()")}}</li> + <li>{{jsxref("Reflect.preventExtensions()")}}</li> +</ul> diff --git a/files/ja/web/javascript/reference/global_objects/proxy/proxy/set/index.html b/files/ja/web/javascript/reference/global_objects/proxy/proxy/set/index.html new file mode 100644 index 0000000000..d405d67fd5 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/proxy/proxy/set/index.html @@ -0,0 +1,131 @@ +--- +title: handler.set() +slug: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/set +tags: + - ECMAScript 2015 + - JavaScript + - Method + - Proxy +translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/set +--- +<div>{{JSRef}}</div> + +<p><strong><code>handler.set()</code></strong> はプロパティの値を設定することに対するトラップです。</p> + +<div>{{EmbedInteractiveExample("pages/js/proxyhandler-set.html", "taller")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力していただける場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">const <var>p</var> = new Proxy(<var>target</var>, { + set: function(<var>target</var>, <var>property</var>, <var>value</var>, <var>receiver</var>) { + } +}); +</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<p>次の引数は <code>set()</code> メソッドに渡されます。<code>this</code> はハンドラーにバインドされます。</p> + +<dl> + <dt><code><var>target</var></code></dt> + <dd>ターゲットオブジェクトです。</dd> + <dt><code><var>property</var></code></dt> + <dd>プロパティを設定する名前または {{jsxref("Symbol")}} です。</dd> + <dt><code><var>value</var></code></dt> + <dd>設定するプロパティの新しい値です。</dd> + <dt><code><var>receiver</var></code></dt> + <dd> + <p>割り当てがもともと行われていたオブジェクトです。これは通常、プロキシそのものです。しかし、 <code>set()</code> ハンドラーは内部的にプロトタイプチェーンや様々な他の方法経由で呼び出されます。</p> + + <div class="note"> + <p><strong>例:</strong> スクリプト上に <code><var>obj</var>.name = "jen"</code> があり、<code><var>obj</var></code> はプロキシではなく、独自の <code>.name</code> プロパティを持っていません。しかし、プロトタイプチェーンでプロキシを持っています。その場合、そのプロキシの <code>set()</code> ハンドラが呼ばれて、 <code>obj</code> は receiver として渡されます。</p> + </div> + </dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p><code>set()</code> メソッドは真偽値を返します。</p> + +<ul> + <li><code>true</code> を返すと割り当てが成功したことを示します。</li> + <li><code>set()</code> メソッドの返値が <code>false</code> で、厳格モードで割り当てが起こった場合、 {{jsxref("TypeError")}} が発生します。</li> +</ul> + +<h2 id="Description" name="Description">解説</h2> + +<p><code><strong>handler.set</strong></code> メソッドはプロパティの値を設定することに対するトラップです。</p> + +<h3 id="Interceptions" name="Interceptions">介入</h3> + +<p>このトラップは下記の操作に介入できます。</p> + +<ul> + <li>プロパティの割り当て: <code><var>proxy</var>[<var>foo</var>] = <var>bar</var></code> や <code><var>proxy</var>.<var>foo</var> = <var>bar</var></code></li> + <li>継承したプロパティの割り当て: <code>Object.create(<var>proxy</var>)[<var>foo</var>] = <var>bar</var></code></li> + <li>{{jsxref("Reflect.set()")}}</li> +</ul> + +<h3 id="Invariants" name="Invariants">不変条件</h3> + +<p>以下の不変条件に違反している場合、プロキシは {{jsxref("TypeError")}} を発生します。</p> + +<ul> + <li>対応するターゲットオブジェクトのプロパティが書き込み不可かつ設定不可のデータプロパティの場合、プロパティの値と異なる値に変更することはできません。</li> + <li>対応するターゲットオブジェクトのプロパティが <code>[[Set]]</code> 属性として <code>undefined</code> を持つ設定不可のアクセスプロパティの場合、プロパティの値を設定することはできません。</li> + <li>厳格モードでは、 <code>set</code> ハンドラーから <code>false</code> を返す場合、 {{jsxref("TypeError")}} 例外をスローします。</li> +</ul> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Trap_setting_of_a_property_value" name="Trap_setting_of_a_property_value">プロパティ値の設定のトラップ</h3> + +<p>次のコードではプロパティの値の設定をトラップします。</p> + +<pre class="brush: js notranslate">const p = new Proxy({}, { + set: function(target, prop, value, receiver) { + target[prop] = value; + console.log('property set: ' + prop + ' = ' + value); + return true; + } +}) + +console.log('a' in p); // false + +p.a = 10; // "property set: a = 10" +console.log('a' in p); // true +console.log(p.a); // 10 +</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-set-p-v-receiver', '[[Set]]')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("javascript.builtins.Proxy.handler.set")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Proxy")}}</li> + <li>{{jsxref("Proxy.handler", "handler")}}</li> + <li>{{jsxref("Reflect.set()")}}</li> +</ul> diff --git a/files/ja/web/javascript/reference/global_objects/proxy/proxy/setprototypeof/index.html b/files/ja/web/javascript/reference/global_objects/proxy/proxy/setprototypeof/index.html new file mode 100644 index 0000000000..daa7f38d14 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/proxy/proxy/setprototypeof/index.html @@ -0,0 +1,133 @@ +--- +title: handler.setPrototypeOf() +slug: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/setPrototypeOf +tags: + - ECMAScript 2015 + - JavaScript + - Method + - Prototype + - Proxy +translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/setPrototypeOf +--- +<div>{{JSRef}}</div> + +<p><strong><code>handler.setPrototypeOf()</code></strong> メソッドは、 {{jsxref("Object.setPrototypeOf()")}} に対するトラップです。</p> + +<div>{{EmbedInteractiveExample("pages/js/proxyhandler-setprototypeof.html", "taller", "taller")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力していただける場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">const <var>p</var> = new Proxy(<var>target</var>, { + setPrototypeOf: function(<var>target</var>, <var>prototype</var>) { + } +}); +</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<p>次の引数は <code>setPrototypeOf()</code> メソッドに渡されます。 <code>this</code> はハンドラーにバインドされます。</p> + +<dl> + <dt><code><var>target</var></code></dt> + <dd>ターゲットオブジェクトです。</dd> + <dt><code><var>prototype</var></code></dt> + <dd>オブジェクトの新しいプロトタイプ、または <code>null</code> です。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p><code>setPrototypeOf()</code> メソッドは <code>[[Prototype]]</code> の変更に成功したら <code>true</code> を返し、そうでない場合は <code>false</code> を返します。</p> + +<h2 id="Description" name="Description">解説</h2> + +<p><code><strong>handler.setPrototypeOf()</strong></code> メソッドは {{jsxref("Object.setPrototypeOf()")}} に対するトラップです。</p> + +<h3 id="Interceptions" name="Interceptions">介入</h3> + +<p>このトラップは下記の操作に介入できます。</p> + +<ul> + <li>{{jsxref("Object.setPrototypeOf()")}}</li> + <li>{{jsxref("Reflect.setPrototypeOf()")}}</li> +</ul> + +<h3 id="Invariants" name="Invariants">不変条件</h3> + +<p>以下の不変条件に違反している場合、プロキシは {{jsxref("TypeError")}} を発生します。</p> + +<ul> + <li><code><var>target</var></code> が拡張可能でない場合、引数の <code>prototype</code> は <code>Object.getPrototypeOf(<var>target</var>)</code> と同じ値でなければなりません。</li> +</ul> + +<h2 id="Examples" name="Examples">例</h2> + +<p>オブジェクトに新しいプロトタイプを設定することを禁止したい場合は、ハンドラーの <code>setPrototypeOf()</code> メソッドで <code>false</code> を返したり、例外を発生させたりするようにすることができます。</p> + +<h3 id="Approach_1_Returning_false" name="Approach_1_Returning_false">アプローチ 1: false を返す</h3> + +<p>このアプローチでは、例外を発生させる変更操作は、それ自身で例外を生成する必要があります。</p> + +<p>例えば、 {{jsxref("Object.setPrototypeOf()")}} は、それ自体が {{jsxref("TypeError")}} を発生させます。 {{jsxref("Reflect.setPrototypeOf()")}} のように、失敗しても通常は例外が発生しない操作で変更操作が行われた場合、例外は発生しません。</p> + +<pre class="brush: js notranslate">const handlerReturnsFalse = { + setPrototypeOf(target, newProto) { + return false; + } +}; + +const newProto = {}, target = {}; + +const p1 = new Proxy(target, handlerReturnsFalse); +Object.setPrototypeOf(p1, newProto); // throws a TypeError +Reflect.setPrototypeOf(p1, newProto); // returns false +</pre> + +<h3 id="Approach_2_Throwing_an_Exception" name="Approach_2_Throwing_an_Exception">アプローチ 2: 例外を発生</h3> + +<p>後者のアプローチでは、変更を試みるすべての操作で例外が発生します。このアプローチは、例外を発生しない操作でも失敗時に例外をは正させたい場合や、カスタムの例外値を発生させたい場合に最適です。</p> + +<pre class="brush: js notranslate">const handlerThrows = { + setPrototypeOf(target, newProto) { + throw new Error('custom error'); + } +}; + +const newProto = {}, target = {}; + +const p2 = new Proxy(target, handlerThrows); +Object.setPrototypeOf(p2, newProto); // throws new Error("custom error") +Reflect.setPrototypeOf(p2, newProto); // throws new Error("custom error")</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-setprototypeof-v', '[[SetPrototypeOf]]')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("javascript.builtins.Proxy.handler.setPrototypeOf")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Proxy")}}</li> + <li>{{jsxref("Proxy.handler", "handler")}}</li> + <li>{{jsxref("Object.setPrototypeOf()")}}</li> + <li>{{jsxref("Reflect.setPrototypeOf()")}}</li> +</ul> diff --git a/files/ja/web/javascript/reference/global_objects/proxy/revocable/index.html b/files/ja/web/javascript/reference/global_objects/proxy/revocable/index.html new file mode 100644 index 0000000000..54470c2b0e --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/proxy/revocable/index.html @@ -0,0 +1,91 @@ +--- +title: Proxy.revocable() +slug: Web/JavaScript/Reference/Global_Objects/Proxy/revocable +tags: + - ECMAScript 2015 + - JavaScript + - Method + - Proxy +translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/revocable +--- +<div>{{JSRef}}</div> + +<p><code><strong>Proxy.revocable()</strong></code> メソッドは、取り消し可能な {{jsxref("Proxy")}} オブジェクトを作成できます。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">Proxy.revocable(<var>target</var>, <var>handler</var>); +</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<div> +<dl> + <dt><code><var>target</var></code></dt> + <dd><code>Proxy</code> でラップする対象のオブジェクトです。これは一連のオブジェクト、例えばネイティブの配列、関数、他の. Proxy などを取ることもできます。</dd> + <dt><code><var>handler</var></code></dt> + <dd>オブジェクトで、プロパティが操作が実行されたときのプロキシ <code><var>p</var></code> の動作を定義する関数であるものです。</dd> +</dl> +</div> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>新しく作成された取り消し可能な <code>Proxy</code> オブジェクト。</p> + +<h2 id="Description" name="Description">解説</h2> + +<p>取り消し可能な <code>Proxy</code> は次の2つのプロパティ <code>{proxy: proxy, revoke: revoke}</code> を持ったオブジェクトです。</p> + +<dl> + <dt><code>proxy</code></dt> + <dd><code>new Proxy(target, handler)</code> 呼び出しで生成したプロキシオブジェクトです。</dd> + <dt><code>revoke</code></dt> + <dd><code>proxy</code> を無効にするための引数を持たない関数です。</dd> +</dl> + +<p><code>revoke()</code> 関数を呼ぶと、プロキシオブジェクトは使用できなくなり、ハンドラーへのどんなトラップも {{jsxref("TypeError")}} をスローします。プロキシが取り消されると、取り消されたままになり、ガベージコレクションの対象となります。再度 <code>revoke()</code> が呼ばれても影響はありません。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush: js">var revocable = Proxy.revocable({}, { + get: function(target, name) { + return "[[" + name + "]]"; + } +}); +var proxy = revocable.proxy; +console.log(proxy.foo); // "[[foo]]" + +revocable.revoke(); + +console.log(proxy.foo); // TypeError is thrown +proxy.foo = 1 // TypeError again +delete proxy.foo; // still TypeError +typeof proxy // "object", typeof doesn't trigger any trap +</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-proxy.revocable', 'Proxy Revocation Functions')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("javascript.builtins.Proxy.revocable")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Proxy")}}</li> +</ul> |