diff options
Diffstat (limited to 'files/ja/web/javascript/reference/global_objects/object')
37 files changed, 5845 insertions, 0 deletions
diff --git a/files/ja/web/javascript/reference/global_objects/object/__definegetter__/index.html b/files/ja/web/javascript/reference/global_objects/object/__definegetter__/index.html new file mode 100644 index 0000000000..dfa2a3cd81 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/object/__definegetter__/index.html @@ -0,0 +1,100 @@ +--- +title: Object.prototype.__defineGetter__() +slug: Web/JavaScript/Reference/Global_Objects/Object/__defineGetter__ +tags: + - JavaScript + - JavaScript Reference + - Method + - Object + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Object/__defineGetter__ +--- +<div>{{JSRef}}</div> + +<div class="warning"> +<p>この機能は非推奨となり、<a href="/ja/docs/Web/JavaScript/Reference/Operators/Object_initializer">オブジェクト初期化子の構文</a>または {{jsxref("Object.defineProperty()")}} API を使用してゲッターを定義する方法で置き換えられました。この機能は広く実装されていますが、古い使い方であるために <a href="https://tc39.github.io/ecma262/#sec-additional-ecmascript-features-for-web-browsers">ECMAScript 仕様書</a>で非推奨となっています。よりよい代替策が存在するので、このメソッドを使用しないでください。</p> +</div> + +<p><code><strong>__defineGetter__</strong></code> メソッドは、オブジェクトのプロパティと関数を結び付け、そのプロパティが参照されるときに呼び出されるようにします。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><var>obj</var>.__defineGetter__(<var>prop</var>, <var>func</var>)</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code><var>prop</var></code></dt> + <dd>関数と結びつけるプロパティの名前を表す文字列です。</dd> + <dt><code><var>func</var></code></dt> + <dd>プロパティの値を参照するときに呼び出される関数です。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>{{jsxref("undefined")}}.</p> + +<h2 id="Description" name="Description">説明</h2> + +<p><code>__defineGetter__</code> を使用することで、既存のオブジェクトに{{jsxref("Operators/get", "ゲッター", "", 1)}}を定義する事ができます。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Non-standard_and_deprecated_way" name="Non-standard_and_deprecated_way">標準外かつ非推奨の方法</h3> + +<pre class="brush: js notranslate">var o = {}; +o.__defineGetter__('gimmeFive', function() { return 5; }); +console.log(o.gimmeFive); // 5 +</pre> + +<h3 id="Standard-compliant_ways" name="Standard-compliant_ways">標準準拠の方法</h3> + +<pre class="brush: js notranslate">// Using the get operator +var o = { get gimmeFive() { return 5; } }; +console.log(o.gimmeFive); // 5 + +// Using Object.defineProperty +var o = {}; +Object.defineProperty(o, 'gimmeFive', { + get: function() { + return 5; + } +}); +console.log(o.gimmeFive); // 5 +</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="spectable standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.prototype.__defineGetter__', 'Object.prototype.__defineGetter__()')}}</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.Object.defineGetter")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Object.prototype.__defineSetter__()")}}</li> + <li>{{jsxref("Operators/get", "get")}} operator</li> + <li>{{jsxref("Object.defineProperty()")}}</li> + <li>{{jsxref("Object.prototype.__lookupGetter__()")}}</li> + <li>{{jsxref("Object.prototype.__lookupSetter__()")}}</li> + <li><a href="/ja/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">JavaScript ガイド: ゲッターとセッターの定義</a></li> + <li><a href="https://whereswalden.com/2010/04/16/more-spidermonkey-changes-ancient-esoteric-very-rarely-used-syntax-for-creating-getters-and-setters-is-being-removed/">[Blog Post] Deprecation of __defineGetter__ and __defineSetter__</a></li> + <li>{{bug(647423)}}</li> +</ul> diff --git a/files/ja/web/javascript/reference/global_objects/object/__definesetter__/index.html b/files/ja/web/javascript/reference/global_objects/object/__definesetter__/index.html new file mode 100644 index 0000000000..bb0f1d5894 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/object/__definesetter__/index.html @@ -0,0 +1,115 @@ +--- +title: Object.prototype.__defineSetter__() +slug: Web/JavaScript/Reference/Global_Objects/Object/__defineSetter__ +tags: + - Deprecated + - JavaScript + - Method + - Object + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Object/__defineSetter__ +--- +<div>{{JSRef}}</div> + +<div class="warning"> +<p>この機能は非推奨となり、<a href="/ja/docs/Web/JavaScript/Reference/Operators/Object_initializer">オブジェクト初期化子の構文</a>または {{jsxref("Object.defineProperty()")}} API を使用してセッターを定義する方法で置き換えられました。</p> + +<p>ただし、ウェブ上では広く実装および利用されているため、ブラウザーが実装をやめる可能性は極めて低いと考えられます。</p> +</div> + +<p><code><strong>__defineSetter__</strong></code> メソッドは、オブジェクトのプロパティと関数を結び付け、そのプロパティを設定しようとすると呼び出されるようにします。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><var>obj</var>.__defineSetter__(<var>prop</var>, <var>fun</var>)</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code><var>prop</var></code></dt> + <dd>関数と結びつけられたプロパティの名前を表す文字列です。</dd> + <dt><code><var>fun</var></code></dt> + <dd>プロパティへ値を設定しようとしたときに呼び出される関数です。この関数は以下の形式をとります。 + <pre class="brush: js notranslate">function(<var>val</var>) { . . . }</pre> + + <dl> + <dt><code><var>val</var></code></dt> + <dd>An alias for the variable that holds the value attempted to be assigned to <code><var>prop</var></code> へ代入しようとする値を保持する変数のエイリアスです。</dd> + </dl> + </dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>{{jsxref("undefined")}}.</p> + +<h2 id="Description" name="Description">説明</h2> + +<p><code>__defineSetter__</code> を使用することで、既存のオブジェクトに<a href="/ja/docs/JavaScript/Reference/Operators/set">セッター関数</a>を定義する事ができます。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Non-standard_and_deprecated_way" name="Non-standard_and_deprecated_way">標準外かつ非推奨の方法</h3> + +<pre class="brush: js notranslate">var o = {}; +o.__defineSetter__('value', function(val) { this.anotherValue = val; }); +o.value = 5; +console.log(o.value); // undefined +console.log(o.anotherValue); // 5 +</pre> + +<h3 id="Standard-compliant_ways" name="Standard-compliant_ways">標準準拠の方法</h3> + +<pre class="brush: js notranslate">// Using the set operator +var o = { set value(val) { this.anotherValue = val; } }; +o.value = 5; +console.log(o.value); // undefined +console.log(o.anotherValue); // 5 + +// Using Object.defineProperty +var o = {}; +Object.defineProperty(o, 'value', { + set: function(val) { + this.anotherValue = val; + } +}); +o.value = 5; +console.log(o.value); // undefined +console.log(o.anotherValue); // 5 +</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-object.prototype.__defineSetter__', 'Object.prototype.__defineSetter__()')}}</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.Object.defineSetter")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Object.prototype.__defineGetter__()")}}</li> + <li>{{jsxref("Operators/set", "set")}} operator</li> + <li>{{jsxref("Object.defineProperty()")}}</li> + <li>{{jsxref("Object.prototype.__lookupGetter__()")}}</li> + <li>{{jsxref("Object.prototype.__lookupSetter__()")}}</li> + <li><a href="/ja/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">JavaScript ガイド: ゲッターとセッターの定義</a></li> + <li><a href="http://whereswalden.com/2010/04/16/more-spidermonkey-changes-ancient-esoteric-very-rarely-used-syntax-for-creating-getters-and-setters-is-being-removed/">[Blog Post] Deprecation of __defineGetter__ and __defineSetter__</a></li> + <li>{{bug(647423)}}</li> +</ul> diff --git a/files/ja/web/javascript/reference/global_objects/object/__lookupgetter__/index.html b/files/ja/web/javascript/reference/global_objects/object/__lookupgetter__/index.html new file mode 100644 index 0000000000..7477224ce4 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/object/__lookupgetter__/index.html @@ -0,0 +1,90 @@ +--- +title: Object.prototype.__lookupGetter__() +slug: Web/JavaScript/Reference/Global_Objects/Object/__lookupGetter__ +tags: + - Deprecated + - JavaScript + - Method + - Object + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Object/__lookupGetter__ +--- +<div>{{JSRef}} {{deprecated_header}}</div> + +<p><strong><code>__lookupGetter__</code></strong> メソッドは、指定されたプロパティに結びつけられているゲッター関数を返します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><var>obj</var>.__lookupGetter__(<var>sprop</var>)</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code><var>sprop</var></code></dt> + <dd>ゲッター関数を返すプロパティの名前を表す文字列です。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>指定されたプロパティへのゲッターとしてバインドされている関数です。</p> + +<h2 id="Description" name="Description">解説</h2> + +<p>オブジェクトのプロパティに対してゲッター関数が定義されていても、そのプロパティを通してゲッター関数への参照を得ることはできません。そのプロパティは、ゲッター関数の返値を参照するからです。 <code>__lookupGetter__</code> を使うことで、ゲッター関数への参照を得ることができます。</p> + +<p>これは {{jsxref("Object.getOwnPropertyDescriptor()")}} と {{jsxref("Object.getPrototypeOf()")}} を使用する標準化された方法で行うことが可能になりました。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Standard-compliant_and_non-standard_ways_to_get_a_property_setter" name="Standard-compliant_and_non-standard_ways_to_get_a_property_setter">プロパティゲッターを取得するための標準準拠の方法と標準外の方法</h3> + +<pre class="brush: js notranslate">var obj = { + get foo() { + return Math.random() > 0.5 ? 'foo' : 'bar'; + } +}; + + +// 標準外で非推奨の方法 +obj.__lookupGetter__('foo'); +// (function() { return Math.random() > 0.5 ? 'foo' : 'bar'; }) + + +// 標準準拠の方法 +Object.getOwnPropertyDescriptor(obj, "foo").get; +// (function() { return Math.random() > 0.5 ? 'foo' : 'bar'; }) +</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="spectable standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.prototype.__lookupGetter__', 'Object.prototype.__lookupGetter__()')}}</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.Object.lookupGetter")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Object.prototype.__lookupSetter__()")}}</li> + <li>{{jsxref("Functions/get", "get")}} operator</li> + <li>{{jsxref("Object.getOwnPropertyDescriptor()")}} and {{jsxref("Object.getPrototypeOf()")}}</li> + <li>{{jsxref("Object.prototype.__defineGetter__()")}}</li> + <li>{{jsxref("Object.prototype.__defineSetter__()")}}</li> + <li><a href="/ja/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">JavaScript ガイド: ゲッターとセッターの定義</a></li> +</ul> diff --git a/files/ja/web/javascript/reference/global_objects/object/__lookupsetter__/index.html b/files/ja/web/javascript/reference/global_objects/object/__lookupsetter__/index.html new file mode 100644 index 0000000000..e8d94176f3 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/object/__lookupsetter__/index.html @@ -0,0 +1,90 @@ +--- +title: Object.prototype.__lookupSetter__() +slug: Web/JavaScript/Reference/Global_Objects/Object/__lookupSetter__ +tags: + - Deprecated + - JavaScript + - Method + - Object + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Object/__lookupSetter__ +--- +<div>{{JSRef}} {{deprecated_header}}</div> + +<p><strong><code>__lookupSetter__</code></strong> メソッドは、指定されたプロパティに結びつけられているセッター関数を返します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><var>obj</var>.__lookupSetter__(<var>sprop</var>)</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code><var>sprop</var></code></dt> + <dd>セッター関数を返すプロパティの名前を表す文字列です。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>指定されたプロパティへのセッターとしてバインドされている関数です。</p> + +<h2 id="Description" name="Description">解説</h2> + +<p>オブジェクトのプロパティに対してセッター関数が定義されていても、そのプロパティを通してセッター関数への参照を得ることはできません。そのプロパティは、セッター関数の返値を参照するからです。 <code>__lookupSetter__</code> を使うことで、セッター関数への参照を得ることができます。</p> + +<p>これは {{jsxref("Object.getOwnPropertyDescriptor()")}} を使用する標準化された方法で行うことが可能になりました。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Standard-compliant_and_non-standard_ways_to_get_a_property_setter" name="Standard-compliant_and_non-standard_ways_to_get_a_property_setter">プロパティセッターを取得するための標準準拠の方法と標準外の方法</h3> + +<pre class="brush: js notranslate">var obj = { + set foo(value) { + this.bar = value; + } +}; + + +// 標準外で非推奨の方法 +obj.__lookupSetter__('foo') +// (function(value) { this.bar = value; }) + + +// 標準準拠の方法 +Object.getOwnPropertyDescriptor(obj, 'foo').set; +// (function(value) { this.bar = value; }) +</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="spectable standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.prototype.__lookupSetter__', 'Object.prototype.__lookupSetter__()')}}</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.Object.lookupSetter")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Object.prototype.__lookupGetter__()")}}</li> + <li>{{jsxref("Functions/set", "set")}} operator</li> + <li>{{jsxref("Object.getOwnPropertyDescriptor()")}} and {{jsxref("Object.getPrototypeOf()")}}</li> + <li>{{jsxref("Object.prototype.__defineGetter__()")}}</li> + <li>{{jsxref("Object.prototype.__defineSetter__()")}}</li> + <li><a href="/ja/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">JavaScript ガイド: ゲッターとセッターの定義</a></li> +</ul> diff --git a/files/ja/web/javascript/reference/global_objects/object/assign/index.html b/files/ja/web/javascript/reference/global_objects/object/assign/index.html new file mode 100644 index 0000000000..411c7c53c2 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/object/assign/index.html @@ -0,0 +1,278 @@ +--- +title: Object.assign() +slug: Web/JavaScript/Reference/Global_Objects/Object/assign +tags: + - ECMAScript 2015 + - JavaScript + - Method + - Object + - Reference + - polyfill + - メソッド +translation_of: Web/JavaScript/Reference/Global_Objects/Object/assign +--- +<p>{{JSRef}}</p> + +<p><span class="seoSummary"><strong><code>Object.assign()</code></strong> メソッドは、すべての{{jsxref("Object/propertyIsEnumerable", "列挙可能", "", 1)}}な{{jsxref("Object/hasOwnProperty", "自身のプロパティ", "", 1)}}の値を、1つ以上の<em>コピー元オブジェクト</em>から<em>コピー先オブジェクト</em>にコピーするために使用されます。</span></p> + +<div>{{EmbedInteractiveExample("pages/js/object-assign.html")}}</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">Object.assign(<var>target</var>, ...<var>sources</var>)</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code><var>target</var></code></dt> + <dd>コピー先オブジェクト — ソースのプロパティを適用するもので、変更後に返されます。</dd> + <dt><code><var>sources</var></code></dt> + <dd>コピー元オブジェクト — 適用したいプロパティを含むオブジェクトです。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>コピー先オブジェクトです。</p> + +<h2 id="Description" name="Description">解説</h2> + +<p>コピー先オブジェクトのプロパティは、コピー元に同じ{{jsxref("Object/keys", "キー", "", 1)}}のプロパティがあると上書きされます。より後のコピー元のプロパティが、より前のものを同様に上書きします。</p> + +<p><code>Object.assign()</code> メソッドは、コピー元オブジェクトから<ruby>列挙可能<rp> (</rp><rt>enumerable</rt><rp>) </rp></ruby>かつ<ruby>直接所有<rp> (</rp><rt>own</rt><rp>) </rp></ruby>のプロパティだけをコピー先オブジェクトにコピーします。この際、コピー元オブジェクトには <code>[[Get]]</code>、コピー先オブジェクトには <code>[[Set]]</code> を使いますので、<a href="/ja/docs/Web/JavaScript/Reference/Functions/get">ゲッター</a>と<a href="/ja/docs/Web/JavaScript/Reference/Functions/set">セッター</a>を呼び出すことになります。これはプロパティの<ruby><em>代入</em><rp> (</rp><rt>assign</rt><rp>) </rp></ruby>であり、プロパティをコピーしたり新しく定義をしたりするのとは違います。そのため、コピー元にゲッターが存在する場合、新しいプロパティをプロトタイプにマージする用途には不適切でしょう。</p> + +<p>プロパティ定義を (<ruby>列挙可能<rp> (</rp><rt>enumerable</rt><rp>) </rp></ruby>属性も含めて) プロトタイプの中にコピーするには、このメソッドではなく {{jsxref("Object.getOwnPropertyDescriptor()")}} と {{jsxref("Object.defineProperty()")}} を使用してください。</p> + +<p>{{jsxref("String")}} と {{jsxref("Symbol")}} の両方のプロパティがコピーされます。</p> + +<p>エラーが発生した場合、例えばプロパティが書き込み不可の場合は、 {{jsxref("TypeError")}} が発生しますが、エラーが発生する前にプロパティが追加される場合、 <code><var>target</var></code> オブジェクトが変更されることがあります。</p> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> <code>Object.assign()</code> はコピー元の値が {{jsxref("null")}} や {{jsxref("undefined")}} でも例外を投げないことに注意して下さい。</p> +</div> + +<h2 id="Polyfill" name="Polyfill">ポリフィル</h2> + +<p>この{{Glossary("Polyfill","ポリフィル")}}は、 ES5 にシンボルがないため、シンボルのプロパティに対応していません。</p> + +<pre class="brush: js notranslate">if (typeof Object.assign !== 'function') { + // Must be writable: true, enumerable: false, configurable: true + Object.defineProperty(Object, "assign", { + value: function assign(target, varArgs) { // .length of function is 2 + 'use strict'; + if (target === null || target === undefined) { + throw new TypeError('Cannot convert undefined or null to object'); + } + + var to = Object(target); + + for (var index = 1; index < arguments.length; index++) { + var nextSource = arguments[index]; + + if (nextSource !== null && nextSource !== undefined) { + for (var nextKey in nextSource) { + // Avoid bugs when hasOwnProperty is shadowed + if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) { + to[nextKey] = nextSource[nextKey]; + } + } + } + } + return to; + }, + writable: true, + configurable: true + }); +} +</pre> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Cloning_an_object" name="Cloning_an_object">オブジェクトの複製</h3> + +<pre class="brush: js notranslate">const obj = { a: 1 }; +const copy = Object.assign({}, obj); +console.log(copy); // { a: 1 } +</pre> + +<h3 id="Deep_Clone" name="Deep_Clone">深い複製についての注意</h3> + +<p><code>Object.assign()</code> はプロパティの値をコピーするため、深い複製を行うには別な方法を使用する必要があります。</p> + +<p>元の値がオブジェクトへの参照である場合、参照の値のみをコピーするからです。</p> + +<pre class="brush: js notranslate">function test() { + 'use strict'; + + let obj1 = { a: 0 , b: { c: 0}}; + let obj2 = Object.assign({}, obj1); + console.log(JSON.stringify(obj2)); // { "a": 0, "b": { "c": 0}} + + obj1.a = 1; + console.log(JSON.stringify(obj1)); // { "a": 1, "b": { "c": 0}} + console.log(JSON.stringify(obj2)); // { "a": 0, "b": { "c": 0}} + + obj2.a = 2; + console.log(JSON.stringify(obj1)); // { "a": 1, "b": { "c": 0}} + console.log(JSON.stringify(obj2)); // { "a": 2, "b": { "c": 0}} + + obj2.b.c = 3; + console.log(JSON.stringify(obj1)); // { "a": 1, "b": { "c": 3}} + console.log(JSON.stringify(obj2)); // { "a": 2, "b": { "c": 3}} + + // Deep Clone + obj1 = { a: 0 , b: { c: 0}}; + let obj3 = JSON.parse(JSON.stringify(obj1)); + obj1.a = 4; + obj1.b.c = 4; + console.log(JSON.stringify(obj3)); // { "a": 0, "b": { "c": 0}} +} + +test();</pre> + +<h3 id="Merging_objects" name="Merging_objects">オブジェクトの合成</h3> + +<pre class="brush: js notranslate">const o1 = { a: 1 }; +const o2 = { b: 2 }; +const o3 = { c: 3 }; + +const obj = Object.assign(o1, o2, o3); +console.log(obj); // { a: 1, b: 2, c: 3 } +console.log(o1); // { a: 1, b: 2, c: 3 }, コピー先オブジェクト自体が変化する</pre> + +<h3 id="Merging_objects_with_same_properties" name="Merging_objects_with_same_properties">同じプロパティを持つオブジェクトの合成</h3> + +<pre class="brush: js notranslate">const o1 = { a: 1, b: 1, c: 1 }; +const o2 = { b: 2, c: 2 }; +const o3 = { c: 3 }; + +const obj = Object.assign({}, o1, o2, o3); +console.log(obj); // { a: 1, b: 2, c: 3 }</pre> + +<p>プロパティは、引数の順でより後にあるオブジェクトが同じプロパティを持っていると上書きされます。</p> + +<h3 id="Copying_symbol-typed_properties" name="Copying_symbol-typed_properties">シンボル型のプロパティのコピー</h3> + +<pre class="brush: js notranslate">const o1 = { a: 1 }; +const o2 = { [Symbol('foo')]: 2 }; + +const obj = Object.assign({}, o1, o2); +console.log(obj); // { a : 1, [Symbol("foo")]: 2 } (cf. bug 1207182 on Firefox) +Object.getOwnPropertySymbols(obj); // [Symbol(foo)] +</pre> + +<h3 id="Properties_on_the_prototype_chain_and_non-enumerable_properties_cannot_be_copied" name="Properties_on_the_prototype_chain_and_non-enumerable_properties_cannot_be_copied">プロトタイプチェーン上のプロパティと列挙可能ではないプロパティはコピー不可</h3> + +<pre class="brush: js notranslate">const obj = Object.create({ foo: 1 }, { // foo は obj のプロトタイプチェーン + bar: { + value: 2 // bar は列挙可能ではないプロパティ + }, + baz: { + value: 3, + enumerable: true // bazは直接所有で列挙可能なプロパティ + } +}); + +const copy = Object.assign({}, obj); +console.log(copy); // { baz: 3 } +</pre> + +<h3 id="Primitives_will_be_wrapped_to_objects" name="Primitives_will_be_wrapped_to_objects">プリミティブはオブジェクトでラップされる</h3> + +<pre class="brush: js notranslate">const v1 = 'abc'; +const v2 = true; +const v3 = 10; +const v4 = Symbol('foo'); + +const obj = Object.assign({}, v1, null, v2, undefined, v3, v4); +// プリミティブ値はラップされ、 null と undefined は無視される +// なお、文字列をラップした時だけ、直接所有で列挙可能なプロパティが存在する +console.log(obj); // { "0": "a", "1": "b", "2": "c" } +</pre> + +<h3 id="Exceptions_will_interrupt_the_ongoing_copying_task" name="Exceptions_will_interrupt_the_ongoing_copying_task">例外が発生すると実行中のコピー作業が中断される</h3> + +<pre class="brush: js notranslate">const target = Object.defineProperty({}, 'foo', { + value: 1, + writable: false +}); // target.foo は読み取り専用のプロパティ + +Object.assign(target, { bar: 2 }, { foo2: 3, foo: 3, foo3: 3 }, { baz: 4 }); +// TypeError: "foo" is read-only +// target.foo に代入しようとすると、この例外が発生する + +console.log(target.bar); // 2, 一番目のコピー元オブジェクトはコピーされている +console.log(target.foo2); // 3, 二番目のコピー元の最初のプロパティもコピーされている +console.log(target.foo); // 1, ここで例外が発生 +console.log(target.foo3); // undefined, assign メソッドが終了したので foo3 はコピーされない +console.log(target.baz); // undefined, 三番目のコピー元もコピーされない +</pre> + +<h3 id="Copying_accessors" name="Copying_accessors">アクセサーのコピー</h3> + +<pre class="brush: js notranslate">var obj = { + foo: 1, + get bar() { + return 2; + } +}; + +let copy = Object.assign({}, obj); +console.log(copy); +// { foo: 1, bar: 2 } +// copy.bar の値は obj.bar のゲッターの返値。 + +// 記述子を完全にコピーする代入関数 +function completeAssign(target, ...sources) { + sources.forEach(source => { + let descriptors = Object.keys(source).reduce((descriptors, key) => { + descriptors[key] = Object.getOwnPropertyDescriptor(source, key); + return descriptors; + }, {}); + + // By default, Object.assign copies enumerable Symbols, too + Object.getOwnPropertySymbols(source).forEach(sym => { + let descriptor = Object.getOwnPropertyDescriptor(source, sym); + if (descriptor.enumerable) { + descriptors[sym] = descriptor; + } + }); + Object.defineProperties(target, descriptors); + }); + return target; +} + +copy = completeAssign({}, obj); +console.log(copy); +// { foo:1, get bar() { return 2 } } +</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-object.assign', 'Object.assign')}}</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.Object.assign")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Object.defineProperties()")}}</li> + <li><a href="/ja/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">プロパティの列挙可能性と所有権</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Spread_in_object_literals">Object リテラルでおスプレッド構文の使用</a></li> +</ul> diff --git a/files/ja/web/javascript/reference/global_objects/object/constructor/index.html b/files/ja/web/javascript/reference/global_objects/object/constructor/index.html new file mode 100644 index 0000000000..eaafc2c9f9 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/object/constructor/index.html @@ -0,0 +1,257 @@ +--- +title: Object.prototype.constructor +slug: Web/JavaScript/Reference/Global_Objects/Object/constructor +tags: + - JavaScript + - Object + - Property + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Object/constructor +--- +<div>{{JSRef}}</div> + +<p><strong><code>constructor</code></strong> プロパティは、インスタンスオブジェクトを生成した {{jsxref("Object")}} のコンストラクター関数への参照を返します。なお、このプロパティの値は<em>関数そのものへの参照</em>であり、関数名を含んだ文字列ではありません。</p> + +<p>値が <code>1</code>, <code>true</code>, <code>"test"</code> のようなプリミティブ値の場合は読み取り専用です。</p> + +<h2 id="Description" name="Description">解説</h2> + +<p>(<code>Object.create(null)</code> で生成されたオブジェクトを除いて) すべてのオブジェクトが <code>constructor</code> プロパティを持ちます。明示的にコンストラクター関数を用いることなく生成されたオブジェクト (オブジェクトリテラルや配列リテラルなど) は、 <code>constructor</code> プロパティがそのオブジェクトの基礎オブジェクトのコンストラクター型を指します。</p> + +<pre class="brush: js notranslate">let o = {} +o.constructor === Object // true + +let o = new Object +o.constructor === Object // true + +let a = [] +a.constructor === Array // true + +let a = new Array +a.constructor === Array // true + +let n = new Number(3) +n.constructor === Number // true +</pre> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Displaying_the_constructor_of_an_object" name="Displaying_the_constructor_of_an_object">オブジェクトのコンストラクターの表示</h3> + +<p>以下の例では、コンストラクターである <code>Tree</code> と、その方のオブジェクトである <code>theTree</code> を生成します。そして、 <code>theTree</code> オブジェクトの <code>constructor</code> プロパティを表示します。</p> + +<pre class="brush: js notranslate">function Tree(name) { + this.name = name +} + +let theTree = new Tree('Redwood') +console.log('theTree.constructor is ' + theTree.constructor) +</pre> + +<p>この例の出力は次のとおりです。</p> + +<pre class="brush: js notranslate">theTree.constructor is function Tree(name) { + this.name = name +} +</pre> + +<h3 id="Changing_the_constructor_of_an_object" name="Changing_the_constructor_of_an_object">オブジェクトのコンストラクターの変更</h3> + +<p>次の例は、一般的なオブジェクトのコンストラクターの値を変更する方法を示しています。 <code>true</code>, <code>1</code>, <code>"test"</code> については、 (コンストラクターが読み取り専用のネイティブのものであるため) 影響を受けません。</p> + +<p>この例は、オブジェクトの <code>constructor</code> プロパティに頼ることが常に安全とは限らないことを示しています。</p> + +<pre class="brush:js notranslate">function Type () {} + +let types = [ + new Array(), + [], + new Boolean(), + true, // 変わらない + new Date(), + new Error(), + new Function(), + function () {}, + Math, + new Number(), + 1, // 変わらない + new Object(), + {}, + new RegExp(), + /(?:)/, + new String(), + 'test' // 変わらない +]; + +for (let i = 0; i < types.length; i++) { + types[i].constructor = Type + types[i] = [types[i].constructor, types[i] instanceof Type, types[i].toString()] +} + +console.log(types.join('\n')) +</pre> + +<p>この例の出力は次の通りです (参考にコメントを追加しています)。</p> + +<pre class="brush: js notranslate">function Type() {},false, // new Array() +function Type() {},false, // [] +function Type() {},false,false // new Boolean() +function Boolean() { + [native code] +},false,true // true +function Type() {},false,Mon Sep 01 2014 16:03:49 GMT+0600 // new Date() +function Type() {},false,Error // new Error() +function Type() {},false,function anonymous() { + +} // new Function() +function Type() {},false,function () {} // function () {} +function Type() {},false,[object Math] // Math +function Type() {},false,0 // new Number() +function Number() { + [native code] +},false,1 // 1 +function Type() {},false,[object Object] // new Object() +function Type() {},false,[object Object] // {} +function Type() {},false,/(?:)/ // new Regexp() +function Type() {},false,/(?:)/ // /(?:)/ +function Type() {},false, // new String() +function String() { + [native code] +},false,test // 'test' +</pre> + +<h3 id="Changing_the_constructor_of_a_function" name="Changing_the_constructor_of_a_function">関数のコンストラクターの変更</h3> + +<p>多くの場合、このプロパティは <strong>new</strong> およびプロトタイプ継承チェーンで将来の呼び出しに使われる<strong>関数コンストラクター</strong>としての関数の定義に使用されます。</p> + +<pre class="brush: js notranslate">function Parent() { /* ... */ } +Parent.prototype.parentMethod = function parentMethod() {} + +function Child() { + Parent.call(this) // Make sure everything is initialized properly +} +Child.prototype = Object.create(Parent.prototype) // Child のプロトタイプを Parent のプロトタイプで再定義 + +Child.prototype.constructor = Child // Child の元のコンストラクターを復帰</pre> + +<p>しかし、いつこの最後の行を実行する必要があるのでしょうか。残念ながら、正しい答えは、<em>場合による</em>ということです。</p> + +<p>元のコンストラクターを再割り当てすることが重要である場合と、これがコードの未使用の一行になる場合を定義してみましょう。</p> + +<p>以下の場合を見てみてください。オブジェクトが自分自身を生成するために <code>create()</code> メソッドを持っています。</p> + +<pre class="brush: js notranslate">function Parent() { /* ... */ } +function CreatedConstructor() { + Parent.call(this) +} + +CreatedConstructor.prototype = Object.create(Parent.prototype) + +CreatedConstructor.prototype.create = function create() { + return new this.constructor() +} + +new CreatedConstructor().create().create() // TypeError undefined is not a function since constructor === Parent</pre> + +<p>上記の例では、コンストラクターが Parent にリンクしているため、例外が発生します。</p> + +<p>これを防ぐには、利用したいことに必要なコンストラクターを割り当てるだけです。</p> + +<pre class="brush: js notranslate">function Parent() { /* ... */ } +function CreatedConstructor() { /* ... */ } + +CreatedConstructor.prototype = Object.create(Parent.prototype) +CreatedConstructor.prototype.constructor = CreatedConstructor // sets the correct constructor for future use + +CreatedConstructor.prototype.create = function create() { + return new this.constructor() +} + +new CreatedConstructor().create().create() // it's pretty fine</pre> + +<p>これで、コンストラクターの変更が有用である理由が明確になりました。</p> + +<p>もう一つの例を考えてみましょう。</p> + +<pre class="brush: js notranslate">function ParentWithStatic() {} + +ParentWithStatic.startPosition = { x: 0, y:0 } // Static member property +ParentWithStatic.getStartPosition = function getStartPosition() { + return this.startPosition +} + +function Child(x, y) { + this.position = { + x: x, + y: y + } +} + +Child = Object.assign(ParentWithStatic) +Child.prototype = Object.create(ParentWithStatic.prototype) +Child.prototype.constructor = Child + +Child.prototype.getOffsetByInitialPosition = function getOffsetByInitialPosition() { + let position = this.position + let startPosition = this.constructor.getStartPosition() // error undefined is not a function, since the constructor is Child + + return { + offsetX: startPosition.x - position.x, + offsetY: startPosition.y - position.y + } +};</pre> + +<p>この例では、正常に動作するように親のコンストラクターを維持するか、静的プロパティを子のコンストラクタに再割り当てする必要があります。</p> + +<pre class="brush: js notranslate">... +Child = Object.assign(ParentWithStatic) // Notice that we assign it before we create(...) a prototype below +Child.prototype = Object.create(ParentWithStatic.prototype) +... +</pre> + +<p>または、親コンストラクターの識別子を子コンストラクター関数の別のプロパティに代入し、そのプロパティを介してアクセスします。</p> + +<pre class="brush: js notranslate">... +Child.parentConstructor = ParentWithStatic +Child.prototype = Object.create(ParentWithStatic.prototype) +... + let startPosition = this.constructor.parentConstructor.getStartPosition() +... +</pre> + +<div class="blockIndicator note"> +<p><strong>まとめ</strong>: コンストラクターを手動で更新したり設定したりすると、異なる結果や混乱する結果を導くことがあります。これを防ぐためには、それぞれの場合に応じてコンストラクターの役割を定義することが必要です。多くの場合、コンストラクター使用されず、再割り当ての必要はありません。</p> +</div> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.prototype.constructor', 'Object.prototype.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.Object.constructor")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<div class="hidden"> +<p>ここでの中括弧は MDN wiki で定義されている標準マクロを呼び出します。詳細はこちらを確認してください。 <a href="/en-US/docs/MDN/Contribute/Structures/Macros/Commonly-used_macros">https://developer.mozilla.org/en-US/docs/MDN/Contribute/Structures/Macros/Commonly-used_macros</a></p> +</div> + +<ul> + <li>{{jsxref("statements/class","クラス定義","",1)}}</li> + <li>{{jsxref("Classes/constructor","クラスのコンストラクター","",1)}}</li> + <li>用語集: {{Glossary("constructor", "コンストラクター", 1)}}</li> +</ul> diff --git a/files/ja/web/javascript/reference/global_objects/object/count/index.html b/files/ja/web/javascript/reference/global_objects/object/count/index.html new file mode 100644 index 0000000000..62975242b6 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/object/count/index.html @@ -0,0 +1,44 @@ +--- +title: Object.prototype.__count__ +slug: Web/JavaScript/Reference/Global_Objects/Object/count +tags: + - JavaScript + - Object + - Obsolute + - Property + - Prototype +translation_of: Archive/Web/JavaScript/Object.count +--- +<div>{{JSRef}}{{Non-standard_Header}}{{obsolete_header("gecko2")}}</div> + +<p><strong><code>__count__</code></strong> プロパティはオブジェクトの列挙可能なプロパティの数を保存するために使用されていましたが、削除されました。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><code><var>obj</var>.__count__</code></pre> + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush: js">{ 1: 1 }.__count__ // 1 +[].__count__ // 0 +[1].__count__ // 1 +[1, /* hole */, 2, 3].__count__ // 3 +</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<p>どの仕様書でも定義されていません。</p> + +<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.Object.count")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a class="external" href="http://whereswalden.com/2010/04/06/more-changes-coming-to-spidermonkey-the-magical-__count__-property-of-objects-is-being-removed/">[Blog post] More changes coming to SpiderMonkey: the magical __count__ property is being removed</a></li> +</ul> diff --git a/files/ja/web/javascript/reference/global_objects/object/create/index.html b/files/ja/web/javascript/reference/global_objects/object/create/index.html new file mode 100644 index 0000000000..f59ce00141 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/object/create/index.html @@ -0,0 +1,404 @@ +--- +title: Object.create() +slug: Web/JavaScript/Reference/Global_Objects/Object/create +tags: + - ECMAScript 5 + - JavaScript + - Method + - 'Null' + - Object + - Reference + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Object/create +--- +<p>{{JSRef}}</p> + +<p><code><strong>Object.create()</strong></code> メソッドは、既存のオブジェクトを新しく生成されるオブジェクトのプロトタイプとして使用して、新しいオブジェクトを生成します。</p> + +<div>{{EmbedInteractiveExample("pages/js/object-create.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">Object.create(<var>proto</var>, [<var>propertiesObject</var>])</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code><var>proto</var></code></dt> + <dd>新たに生成されるオブジェクトのプロトタイプになるべきオブジェクトです。</dd> + <dt><code><var>propertiesObject</var></code> {{Optional_inline}}</dt> + <dd>指定されていて、 {{jsxref("undefined")}} でない場合、それ自身が所有する一連の列挙可能なプロパティ (つまり、それ自身に定義されていて、プロトタイプチェインの中では<em>列挙可能でない</em>プロパティ) が、それらのプロパティ名を伴う一連のプロパティ記述子を指定し、新たに生成されるオブジェクトに追加されることになります。これらのプロパティは、 {{jsxref("Object.defineProperties()")}} の2番目の引数に対応するものです。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>指定したプロトタイプオブジェクトとプロパティを持つ新しいオブジェクトです。</p> + +<h3 id="Exceptions" name="Exceptions">例外</h3> + +<p><code><var>proto</var></code> 引数は次のいずれかになります。</p> + +<ul> + <li>{{jsxref("null")}} または</li> + <li>{{jsxref("Object")}} ただし<a href="/ja/docs/Glossary/Primitive#Primitive_wrapper_objects_in_JavaScript">プリミティブラッパーオブジェクト</a>を除く</li> +</ul> + +<p><code>proto</code> がどちらでもない場合、 {{jsxref("TypeError")}} がスローされます。</p> + +<h2 id="Custom_and_Null_objects" name="Custom_and_Null_objects">カスタムオブジェクトと Null オブジェクト</h2> + +<p>完全にカスタムされたオブジェクトから作成された新しいオブジェクト (特に <code>null</code> オブジェクトから作成されたもの、基本的にはメンバーを持たないカスタムオブジェクト) は、予想外の振る舞いをすることがあります。これは特にデバッグ時に当てはまります。一般的なオブジェクト-プロパティ変換/検出ユーティリティ関数はエラーを生成したり、単に情報を失ったりする可能性があるからです (特にエラーを無視するサイレントエラートラップを使用している場合)。例えば、ここに二つのオブジェクトがあります。</p> + +<pre class="brush: js notranslate">oco = Object.create( {} ); // create a normal object +ocn = Object.create( null ); // create a "null" object + +> console.log(oco) // {} -- Seems normal +> console.log(ocn) // {} -- Seems normal here too, so far + +oco.p = 1; // create a simple property on normal obj +ocn.p = 0; // create a simple property on "null" obj + +> console.log(oco) // {p: 1} -- Still seems normal +> console.log(ocn) // {p: 0} -- Still seems normal here too. BUT WAIT... +</pre> + +<p>上記のように、今のところすべてが正常なように見えます。しかし、実際に使ってみると、その違いはすぐに明らかになります。</p> + +<pre class="brush: js notranslate">> "oco is: " + oco // shows "oco is: [object Object]" + +> "ocn is: " + ocn // throws error: Cannot convert object to primitive value +</pre> + +<p>多くの最も基本的な組み込み機能のほんの一部をテストするだけで、問題の大きさがより明確にわかります。</p> + +<pre class="brush: js notranslate">> alert(oco) // shows [object Object] +> alert(ocn) // throws error: Cannot convert object to primitive value + +> oco.toString() // shows [object Object] +> ocn.toString() // throws error: ocn.toString is not a function + +> oco.valueOf() // shows {} +> ocn.valueOf() // throws error: ocn.valueOf is not a function + +> oco.hasOwnProperty("p") // shows "true" +> ocn.hasOwnProperty("p") // throws error: ocn.hasOwnProperty is not a function + +> oco.constructor // shows "Object() { [native code] }" +> ocn.constructor // shows "undefined" +</pre> + +<p>このように、これらの違いにより、一見単純そうに見える問題であっても、デバッグがすぐに迷走してしまうことがあります。例えば、以下のようなものです。</p> + +<p><em>シンプルな共通デバッグ関数です。</em></p> + +<pre class="brush: js notranslate">// display top-level property name:value pairs of given object +function ShowProperties(obj){ + for(var prop in obj){ + console.log(prop + ": " + obj[prop] + "\n" ); + } +}</pre> + +<p><em>このような単純な結果ではありません。 (特にサイレントエラートラップがエラーメッセージを隠していた場合)</em></p> + +<pre class="brush: js notranslate">ob={}; ob.po=oco; ob.pn=ocn; // create a compound object using the test objects from above as property values + +> ShowProperties( ob ) // display top-level properties +- po: [object Object] +- Error: Cannot convert object to primitive value + +Note that only first property gets shown. +</pre> + +<p><em>(しかし、同じオブジェクトが単に順番が違うだけで作成されている場合 -- 少なくともいくつかの実装では...)</em></p> + +<pre class="brush: js notranslate">ob={}; ob.pn=ocn; ob.po=oco; // create same compound object again, but create same properties in different order + +> ShowProperties( ob ) // display top-level properties +- Error: Cannot convert object to primitive value + +Note that neither property gets shown.</pre> + +<p>Note that such a different order may arise statically via disparate fixed codings such as here, but also dynamically via whatever the order any such property-adding code-branches actually get executed at runtime as depends on inputs and/or random-variables. Then again, the actual iteration order is not guaranteed no matter what the order members are added.</p> + +<p>Be aware of, also, that using Object.entries() on an object created via Object.create() will result in an empty array being returned.</p> + +<pre class="brush: js notranslate">var obj = Object.create({ a: 1, b: 2 }); + +> console.log(Object.entries(obj)); // shows "[]" +</pre> + +<h4 id="Some_NON-solutions">Some NON-solutions</h4> + +<p>A good solution for the missing object-methods is not immediately apparent.</p> + +<p>Adding the missing object-method directly from the standard-object does NOT work:</p> + +<pre class="brush: js notranslate">ocn = Object.create( null ); // create "null" object (same as before) + +ocn.toString = Object.toString; // since new object lacks method then try assigning it directly from standard-object + +<span>> ocn.toString // shows "toString() { [native code] }" -- missing method seems to be there now</span> +> ocn.toString == Object.toString // shows "true" -- method seems to be same as the standard object-method + +> ocn.toString() // error: Function.prototype.toString requires that 'this' be a Function +</pre> + +<p><br> + Adding the missing object-method directly to new object's "prototype" does not work either, since the new object does not have a real prototype (which is really the cause of ALL these problems) and one cannot be <strong>directly</strong> added:</p> + +<pre class="brush: js notranslate">ocn = Object.create( null ); // create "null" object (same as before) + +ocn.prototype.toString = Object.toString; // Error: Cannot set property 'toString' of undefined + +ocn.prototype = {}; // try to create a prototype +ocn.prototype.toString = Object.toString; // since new object lacks method then try assigning it from standard-object <span> + +> ocn.toString() // error: ocn.toString is not a function</span> +</pre> + +<p><br> + Adding the missing object-method by using the standard-object<strong> </strong>as new object's prototype does not work either:</p> + +<pre class="brush: js notranslate">ocn = Object.create( null ); // create "null" object (same as before) +Object.setPrototypeOf(ocn, Object); // set new object's prototype to the standard-object + +> ocn.toString() // error: Function.prototype.toString requires that 'this' be a Function +</pre> + +<h4 id="Some_OK_solutions">Some OK solutions</h4> + +<p>Again, adding the missing object-method directly from the <strong>standard-object </strong>does NOT work. However, adding the <strong>generic</strong> method directly, DOES:</p> + +<pre class="brush: js notranslate">ocn = Object.create( null ); // create "null" object (same as before) + +ocn.toString = toString; // since new object lacks method then assign it directly from generic version + +> ocn.toString() // shows "[object Object]" +> "ocn is: " + ocn // shows "ocn is: [object Object]" + + +ob={}; ob.pn=ocn; ob.po=oco; // create a compound object (same as before) + +> ShowProperties(ob) // display top-level properties +- po: [object Object] +- pn: [object Object] +</pre> + +<p>However, setting the generic <strong>prototype</strong> as the new object's prototype works even better:</p> + +<pre class="brush: js notranslate">ocn = Object.create( null ); // create "null" object (same as before) +Object.setPrototypeOf(ocn, Object.prototype); // set new object's prototype to the "generic" object (NOT standard-object) +</pre> + +<p><em>(In addition to all the string-related functions shown above, this also adds:)</em></p> + +<pre class="brush: js notranslate">> ocn.valueOf() // shows {} +> ocn.hasOwnProperty("x") // shows "false" +> ocn.constructor // shows "Object() { [native code] }" + +// ...and all the rest of the properties and methods of Object.prototype. +</pre> + +<p>As shown, objects modified this way now look very much like ordinary objects.</p> + +<h2 id="Polyfill" name="Polyfill">ポリフィル</h2> + +<p>このポリフィルは、プロトタイプは選択されたが第二引数を考慮しない状況向けに、新規オブジェクトを生成する主要な利用法に対応します。</p> + +<p>実際の ES5 の <code>Object.create</code> では、<code>[[Prototype]]</code> として <code>null</code> を設定することがサポートされていますが、このポリフィルは ECMAScript5 以前のサポートをする制約上、null を使用できないことに注意してください。</p> + +<pre class="brush: js notranslate"> if (typeof Object.create !== "function") { + Object.create = function (proto, propertiesObject) { + if (typeof proto !== 'object' && typeof proto !== 'function') { + throw new TypeError('Object prototype may only be an Object: ' + proto); + } else if (proto === null) { + throw new Error("This browser's implementation of Object.create is a shim and doesn't support 'null' as the first argument."); + } + + if (typeof propertiesObject != 'undefined') { + throw new Error("This browser's implementation of Object.create is a shim and doesn't support a second argument."); + } + + function F() {} + F.prototype = proto; + + return new F(); + }; +} +</pre> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Classical_inheritance_with_Object.create" name="Classical_inheritance_with_Object.create"><code>Object.create()</code> を用いた古典的な継承</h3> + +<p>以下の例は、古典的な継承をするための <code>Object.create()</code> の使用方法です。これは、すべての JavaScript が対応している単一継承です。</p> + +<pre class="brush: js notranslate">// Shape - superclass +function Shape() { + this.x = 0; + this.y = 0; +} + +// superclass method +Shape.prototype.move = function(x, y) { + this.x += x; + this.y += y; + console.info('Shape moved.'); +}; + +// Rectangle - subclass +function Rectangle() { + Shape.call(this); // call super constructor. +} + +// subclass extends superclass +Rectangle.prototype = Object.create(Shape.prototype); + +//If you don't set Rectangle.prototype.constructor to Rectangle, +//it will take the prototype.constructor of Shape (parent). +//To avoid that, we set the prototype.constructor to Rectangle (child). +Rectangle.prototype.constructor = Rectangle; + +var rect = new Rectangle(); + +console.log('Is rect an instance of Rectangle?', rect instanceof Rectangle); // true +console.log('Is rect an instance of Shape?', rect instanceof Shape); // true +rect.move(1, 1); // Outputs, 'Shape moved.' +</pre> + +<p>複数のオブジェクトから継承したい場合は、ミックスインが可能です。</p> + +<pre class="brush: js notranslate">function MyClass() { + SuperClass.call(this); + OtherSuperClass.call(this); +} + +// inherit one class +MyClass.prototype = Object.create(SuperClass.prototype); +// mixin another +Object.assign(MyClass.prototype, OtherSuperClass.prototype); +// re-assign constructor +MyClass.prototype.constructor = MyClass; + +MyClass.prototype.myMethod = function() { + // do something +}; +</pre> + +<p>{{jsxref("Object.assign()")}} は OtherSuperClass プロトタイプから MyClass プロトタイプへプロパティをコピーし、 MyClass のすべてのインスタンスで利用できるようにします。 <code>Object.assign()</code> は ES2015 で導入され、<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/assign#Polyfill">ポリフィルを利用することができます</a>。古いブラウザーへの対応が必要な場合は、 <code><a href="https://api.jquery.com/jQuery.extend/">jQuery.extend()</a></code> または <code><a href="https://lodash.com/docs/#assign">_.assign()</a></code> を利用することができます。</p> + +<h3 id="Using_propertiesObject_argument_with_Object.create" name="Using_propertiesObject_argument_with_Object.create">Object.create() と propertiesObject 引数の併用</h3> + +<pre class="brush: js notranslate">var o; + +// プロトタイプを null にしてオブジェクトを生成 +o = Object.create(null); + + +o = {}; +// is equivalent to: +o = Object.create(Object.prototype); + + +// Example where we create an object with a couple of +// sample properties. (Note that the second parameter +// maps keys to *property descriptors*.) +o = Object.create(Object.prototype, { + // foo is a regular 'value property' + foo: { + writable: true, + configurable: true, + value: 'hello' + }, + // bar is a getter-and-setter (accessor) property + bar: { + configurable: false, + get: function() { return 10; }, + set: function(value) { + console.log('Setting `o.bar` to', value); + } +/* with ES2015 Accessors our code can look like this + get() { return 10; }, + set(value) { + console.log('Setting `o.bar` to', value); + } */ + } +}); + + +function Constructor() {} +o = new Constructor(); +// is equivalent to: +o = Object.create(Constructor.prototype); +// Of course, if there is actual initialization code +// in the Constructor function, +// the Object.create() cannot reflect it + + +// Create a new object whose prototype is a new, empty +// object and add a single property 'p', with value 42. +o = Object.create({}, { p: { value: 42 } }); + +// by default properties ARE NOT writable, +// enumerable or configurable: +o.p = 24; +o.p; +// 42 + +o.q = 12; +for (var prop in o) { + console.log(prop); +} +// 'q' + +delete o.p; +// false + +// to specify an ES3 property +o2 = Object.create({}, { + p: { + value: 42, + writable: true, + enumerable: true, + configurable: true + } +}); +/* is not equivalent to: +This will create an object with prototype : {p: 42 } +o2 = Object.create({p: 42}) */ +</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-object.create', 'Object.create')}}</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.Object.create")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Object.defineProperty()")}}</li> + <li>{{jsxref("Object.defineProperties()")}}</li> + <li>{{jsxref("Object.prototype.isPrototypeOf()")}}</li> + <li>{{jsxref("Reflect.construct()")}}</li> + <li><a href="http://ejohn.org/blog/objectgetprototypeof/">getPrototypeOf()</a> に関する John Resig 氏の投稿</li> +</ul> diff --git a/files/ja/web/javascript/reference/global_objects/object/defineproperties/index.html b/files/ja/web/javascript/reference/global_objects/object/defineproperties/index.html new file mode 100644 index 0000000000..29e646d673 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/object/defineproperties/index.html @@ -0,0 +1,182 @@ +--- +title: Object.defineProperties() +slug: Web/JavaScript/Reference/Global_Objects/Object/defineProperties +tags: + - ECMAScript 5 + - JavaScript + - Method + - Object +translation_of: Web/JavaScript/Reference/Global_Objects/Object/defineProperties +--- +<div>{{JSRef}}</div> + +<p><strong><code>Object.defineProperties()</code></strong> メソッドは、オブジェクトに直接新しいプロパティを定義し、あるいは既存のプロパティを変更して、そのオブジェクトを返します。</p> + +<div>{{EmbedInteractiveExample("pages/js/object-defineproperties.html")}}</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">Object.defineProperties(<var>obj</var>, <var>props</var>)</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code><var>obj</var></code></dt> + <dd>プロパティを定義または変更するオブジェクト。</dd> + <dt><code><var>props</var></code></dt> + <dd>キーが定義または変更されるプロパティの名前を表し、値がそれらのプロパティを記述するオブジェクトであるオブジェクトです。 <code>props</code> の各値は、データ記述子かアクセサー記述子のいずれかでなければなりませんが、両方を指定することはできません (詳細は {{jsxref("Object.defineProperty()")}} を参照してください)。</dd> + <dd>データ記述子およびアクセサー記述子は、オプションで以下のキーを含むことができます。</dd> + <dd> + <dl> + <dt><code>configurable</code></dt> + <dd>プロパティの記述子が変更でき、プロパティが対応するオブジェクトから削除できるときのみ <code>true</code>。<br> + <strong>既定値は <code>false</code>。</strong></dd> + <dt><code>enumerable</code></dt> + <dd>対応するオブジェクトのプロパティを列挙したとき表示される場合のみ <code>true</code>。<br> + <strong>既定値は <code>false</code>。</strong></dd> + </dl> + + <p>データ記述子には以下のオプションのキーもあります。</p> + + <dl> + <dt><code>value</code></dt> + <dd>プロパティに関連づける値。 JavaScript で有効な任意の値です (数値、オブジェクト、関数など)。<br> + <strong>既定値は {{jsxref("undefined")}}。</strong></dd> + <dt><code>writable</code></dt> + <dd>プロパティに関連づけられた値が{{jsxref("Operators/Assignment_Operators", "代入演算子", "", 1)}}で変更できる場合のみ <code>true</code>。<br> + <strong>既定値は <code>false</code>。</strong></dd> + </dl> + + <p>アクセサー記述子には、以下のオプションのキーもあります。</p> + + <dl> + <dt><code>get</code></dt> + <dd>プロパティのゲッターとして用いられる関数。ゲッターがなければ {{jsxref("undefined")}} になります。関数の返値がプロパティの値として使用されます。<br> + <strong>既定値は {{jsxref("undefined")}}。</strong></dd> + <dt><code>set</code></dt> + <dd>プロパティのセッターとして用いられる関数。セッターがなければ {{jsxref("undefined")}} になります。関数はただひとつの引数として、プロパティに代入された新たな値を受取ります。<br> + <strong>既定値は {{jsxref("undefined")}}。</strong></dd> + </dl> + + <p>記述子が <code>value</code>, <code>writable</code>, <code>get</code> <code>set</code> キーのいずれでもない場合は、データ記述子として扱われます。記述子に <code>value</code> または <code>writable</code> と <code>get</code> または <code>set</code> キーの両方があった場合は、例外が発生します。</p> + </dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>関数に渡されたオブジェクト。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Using_Object.defineProperties" name="Using_Object.defineProperties">Object.defineProperties の使用</h3> + +<pre class="brush: js notranslate">var obj = {}; +Object.defineProperties(obj, { + 'property1': { + value: true, + writable: true + }, + 'property2': { + value: 'Hello', + writable: false + } + // etc. etc. +}); +</pre> + +<h2 id="Polyfill" name="Polyfill">ポリフィル</h2> + +<p>すべての名前とプロパティが自身の初期値を参照する基本的な実行環境において、 <code>Object.defineProperties</code> は以下の JavaScript による再実装とほぼ同等です(<code>isCallable</code> のコメントに注意)。</p> + +<pre class="brush: js;highlight:[8] notranslate">function defineProperties(obj, properties) { + function convertToDescriptor(desc) { + function hasProperty(obj, prop) { + return Object.prototype.hasOwnProperty.call(obj, prop); + } + + function isCallable(v) { + // 注意: 関数以外の値が呼び出し可能である場合、必要に応じて変更。 + return typeof v === 'function'; + } + + if (typeof desc !== 'object' || desc === null) + throw new TypeError('bad desc'); + + var d = {}; + + if (hasProperty(desc, 'enumerable')) + d.enumerable = !!desc.enumerable; + if (hasProperty(desc, 'configurable')) + d.configurable = !!desc.configurable; + if (hasProperty(desc, 'value')) + d.value = desc.value; + if (hasProperty(desc, 'writable')) + d.writable = !!desc.writable; + if (hasProperty(desc, 'get')) { + var g = desc.get; + + if (!isCallable(g) && typeof g !== 'undefined') + throw new TypeError('bad get'); + d.get = g; + } + if (hasProperty(desc, 'set')) { + var s = desc.set; + if (!isCallable(s) && typeof s !== 'undefined') + throw new TypeError('bad set'); + d.set = s; + } + + if (('get' in d || 'set' in d) && ('value' in d || 'writable' in d)) + throw new TypeError('identity-confused descriptor'); + + return d; + } + + if (typeof obj !== 'object' || obj === null) + throw new TypeError('bad obj'); + + properties = Object(properties); + + var keys = Object.keys(properties); + var descs = []; + + for (var i = 0; i < keys.length; i++) + descs.push([keys[i], convertToDescriptor(properties[keys[i]])]); + + for (var i = 0; i < descs.length; i++) + Object.defineProperty(obj, descs[i][0], descs[i][1]); + + return obj; +} +</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-object.defineproperties', 'Object.defineProperties')}}</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.Object.defineProperties")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Object.defineProperty()")}}</li> + <li>{{jsxref("Object.keys()")}}</li> + <li><a href="/ja/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">プロパティの列挙可能性と所有権</a></li> +</ul> diff --git a/files/ja/web/javascript/reference/global_objects/object/defineproperty/index.html b/files/ja/web/javascript/reference/global_objects/object/defineproperty/index.html new file mode 100644 index 0000000000..b4b7fa05ca --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/object/defineproperty/index.html @@ -0,0 +1,499 @@ +--- +title: Object.defineProperty() +slug: Web/JavaScript/Reference/Global_Objects/Object/defineProperty +tags: + - ECMAScript 5 + - JavaScript + - JavaScript 1.8.5 + - Method + - Object +translation_of: Web/JavaScript/Reference/Global_Objects/Object/defineProperty +--- +<div>{{JSRef}}</div> + +<p>静的メソッドの <code><strong>Object.defineProperty()</strong></code> は、あるオブジェクトに新しいプロパティを直接定義したり、オブジェクトの既存のプロパティを変更したりして、そのオブジェクトを返します。</p> + +<div class="note"> +<p><strong>メモ:</strong> このメソッドは {{jsxref("Object")}} コンストラクターで直接呼び出すものであって、<code>Object</code> 型のインスタンスで呼ぶものではありません。</p> +</div> + +<div>{{EmbedInteractiveExample("pages/js/object-defineproperty.html")}}</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">Object.defineProperty(<var>obj</var>, <var>prop</var>, <var>descriptor</var>)</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code><var>obj</var></code></dt> + <dd>プロパティを定義したいオブジェクト。</dd> + <dt><code><var>prop</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>渡されたオブジェクトをそのまま返します。</p> + +<h2 id="Description" name="Description">解説</h2> + +<p>このメソッドで、あるオブジェクトのプロパティを明示的に追加または変更することができます。代入による通常のプロパティ追加では、プロパティ列挙 ({{jsxref("Statements/for...in", "for...in")}} ループや {{jsxref("Object.keys")}} メソッド) に現れ、値は変更可能で、また{{jsxref("Operators/delete", "削除", "", 1)}}も可能なプロパティが生成されます。このメソッドでは、これらの詳細事項を既定値から変えることが可能です。既定では、<code>Object.defineProperty()</code> を使って追加された値は不変になります。</p> + +<p>プロパティの記述子は、データ記述子とアクセサー記述子の二つに分かれます。<em><dfn>データ記述子</dfn></em>は値を持つプロパティで、その値は書き換え可能にも不可能にもできます。<em><dfn>アクセサー記述子</dfn></em>は、関数のゲッターとセッターの組で表されるプロパティです。記述子はこれら二種類のどちらかでなければならず、両方になることはできません。</p> + +<p>どちらの形でも記述子はオブジェクトで表現します。共通して以下のキーを持つことができます (既定値は Object.defineProperty() を使ってプロパティを定義する場合)。</p> + +<dl> + <dt><code>configurable</code></dt> + <dd><code>true</code> である場合のみ、この種の記述子を変更することや、対応するオブジェクトからプロパティを削除することができます。<br> + <strong>既定値は <code>false</code> です。</strong></dd> + <dt><code>enumerable</code></dt> + <dd><code>true</code> である場合のみ、このプロパティは対応するオブジェクトでのプロパティ列挙に現れます。<br> + <strong>既定値は <code>false</code> です。</strong></dd> +</dl> + +<p>データ記述子の場合はオプションとして次のキーを持つことができます:</p> + +<dl> + <dt><code>value</code></dt> + <dd>プロパティに関連づけられた値です。有効な JavaScript の値 (number, object, function など) である必要があります。<br> + <strong>既定値は {{jsxref("undefined")}} です。</strong></dd> + <dt><code>writable</code></dt> + <dd><code>true</code> である場合のみ、プロパティに関連づけられた値は{{jsxref("Operators/Assignment_Operators", "代入演算子", "", 1)}}で変更することができます。<br> + <strong>既定値は <code>false</code> です。</strong></dd> +</dl> + +<p>アクセサー記述子の場合はオプションとして次のキーを持つことができます。</p> + +<dl> + <dt><code>get</code></dt> + <dd>プロパティのゲッターとなる関数で、ゲッターを設けない場合は {{jsxref("undefined")}} です。プロパティにアクセスするとこの関数が引数なしでコールされます。この関数内で <code>this</code> はアクセスしようとしたプロパティを持つオブジェクトになります(プロパティを定義するために作成した記述子オブジェクトではありません)。戻り値はこのプロパティの値として使われます。<br> + <strong>既定値は {{jsxref("undefined")}} です。</strong></dd> + <dt><code>set</code></dt> + <dd>プロパティのセッターとなる関数で、セッターがない場合は {{jsxref("undefined")}} です。プロパティに値が割り当てられたとき、その値を引数としてこの関数がコールされます。この関数内で <code>this</code> は割り当てようとしたプロパティを持つオブジェクトになります。<br> + <strong>既定値は {{jsxref("undefined")}} です。</strong></dd> +</dl> + +<p>記述子に <code>value</code>, <code>writable</code>, <code>get</code>, <code>set</code> のいずれのキーもない場合、データ記述子として扱われます。記述子に <code>value</code> または <code>writable</code> と、<code>get</code> または <code>set</code> のキーの両方がある場合は、例外が投げられます。</p> + +<p>これらのキーは必ずしも記述子が直接所有しているとは限らないことに留意してください。継承されたプロパティも同様です。これらの既定値が存在することを保証するには、先行して {{jsxref("Object.prototype")}} を freeze しておくか、すべてのオプションを明示的に指定するか、{{jsxref("Object.create", "Object.create(null)")}} で {{jsxref("null")}} に設定するかします。</p> + +<pre class="brush: js">// __proto__ を使うやり方 +var obj = {}; +var descriptor = Object.create(null); // 意図しないキーの継承を防止します。 +descriptor.value = 'static'; + +// 既定で継承不可、変更不可、書換不可のプロパティとなります。 +Object.defineProperty(obj, 'key', descriptor); + +// 明示的な指定 +Object.defineProperty(obj, 'key', { + enumerable: false, + configurable: false, + writable: false, + value: 'static' +}); + +// 同じオブジェクトを再利用 +function withValue(value) { + var d = withValue.d || ( + withValue.d = { + enumerable: false, + writable: false, + configurable: false, + value: value + } + ); + + // 値の代入で重複操作を防ぐ + if (d.value !== value) d.value = value; + + return d; +} +// このように使います。 +Object.defineProperty(obj, 'key', withValue('static')); + +// freeze が利用できるなら、オブジェクトのプロトタイプのプロパティ +// (value, get, set, enumerable, writable, configurable) を +// 追加・削除することを防ぐことができます。 +(Object.freeze || Object)(Object.prototype); +</pre> + +<h2 id="Examples" name="Examples">例</h2> + +<p><em>バイナリーフラグ</em>を使って <code>Object.defineProperty</code> を利用したい場合は <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty/Additional_examples">追加の例</a> を見てください。</p> + +<h3 id="Creating_a_property" name="Creating_a_property">プロパティの生成</h3> + +<p>オブジェクトに指定されたプロパティが存在しないとき、<code>Object.defineProperty()</code> は指定された形で新たなプロパティを生成します。記述子のキーは省略することができ、そのようなキーには既定値が適用されます。</p> + +<pre class="brush: js">var o = {}; // 新しいオブジェクトの生成 + +// データ記述子により、defineProperty を用いて +// オブジェクトプロパティを追加する例 +Object.defineProperty(o, 'a', { + value: 37, + writable: true, + enumerable: true, + configurable: true +}); +// o オブジェクトに 'a' プロパティが存在するようになり、その値は 37 となります + +// アクセサー記述子により、defineProperty を用いて +// オブジェクトプロパティを追加する例 +var bValue = 38; +Object.defineProperty(o, 'b', { + // メソッド名ショートハンドを利用しています(ES2015 の機能)。 + // 次のように書いているのと同じことです: + // get: function() { return bValue; }, + // set: function(newValue) { bValue = newValue; }, + get() { return bValue; }, + set(newValue) { bValue = newValue; }, + enumerable: true, + configurable: true +}); +o.b; // 38 +// o オブジェクトに 'b' プロパティが存在するようになり、 +// その値は 38 となります +// o.b は再定義されない限り、その値は常に bValue と同じです。 + +// (訳注:データとアクセサーを)両方を混在させることはできません: +Object.defineProperty(o, 'conflict', { + value: 0x9f91102, + get() { return 0xdeadbeef; } +}); +// TypeError が発生します。value はデータ記述子にのみ、 +// get はアクセサー記述子にのみ存在していなければなりません。 +</pre> + +<h3 id="Modifying_a_property" name="Modifying_a_property">プロパティの変更</h3> + +<p>プロパティが既に存在している場合、<code>Object.defineProperty()</code> は記述子の値および現在のオブジェクトの設定に基づいて、プロパティの変更を試みます。元の記述子で <code>configurable</code> 属性が <code>false</code> なら、そのプロパティは「変更不可」です。変更不可のプロパティは記述子の属性を変更することができません。データプロパティで <code>writable</code> なら、値を変更することができますし、<code>writable</code> 属性を <code>true</code> から <code>false</code> に変更することが出来ます。変更不可のプロパティはデータとアクセサーの種別を切り替えることはできません。</p> + +<p>変更不可なプロパティに変更を加えようとすると、新旧の値が同じでない限り {{jsxref("TypeError")}} が投げられます(可能な場合の <code>value</code> と <code>writable</code> の変更は除きます)。</p> + +<h4 id="Writable_attribute" name="Writable_attribute">Writable 属性</h4> + +<p><code>writable</code> プロパティ属性が <code>false</code> に設定されているとき、そのプロパティは書換不可になります。代入が出来なくなります。</p> + +<pre class="brush: js">var o = {}; // 新しいオブジェクトの生成 + +Object.defineProperty(o, 'a', { + value: 37, + writable: false +}); + +console.log(o.a); // 37 がログ出力されます +o.a = 25; // エラーは発生しません +// (strict モードでは発生します。同じ値を代入したとしても。) +console.log(o.a); // 37 がログ出力されます。代入文は動作しません。 + +// strict mode +(function() { + 'use strict'; + var o = {}; + Object.defineProperty(o, 'b', { + value: 2, + writable: false + }); + o.b = 3; // TypeError がスローされます: "b" is read-only + return o.b; // 上の行は動作せず 2 が返ります(訳注:正しくは「ここに制御は来ません」) +}()); +</pre> + +<p>例で見たように、書き込み不可のプロパティに書き込もうとしても変更されず、またエラーは発生しません。</p> + +<h4 id="Enumerable_attribute" name="Enumerable_attribute">Enumerable 属性</h4> + +<p><code>enumerable</code> プロパティ属性は、プロパティが {{jsxref("Statements/for...in", "for...in")}} ループや {{jsxref("Object.keys()")}} に現れるか否かを定義します。</p> + +<pre class="brush: js">var o = {}; +Object.defineProperty(o, 'a', { + value: 1, + enumerable: true +}); +Object.defineProperty(o, 'b', { + value: 2, + enumerable: false +}); +Object.defineProperty(o, 'c', { + value: 3 +}); // enumerable の既定値は false +o.d = 4; // このようにプロパティを生成するとき、 + // enumerable の既定値は true +Object.defineProperty(o, Symbol.for('e'), { + value: 5, + enumerable: true +}); +Object.defineProperty(o, Symbol.for('f'), { + value: 6, + enumerable: false +}); + +for (var i in o) { + console.log(i); +} +// 'a' と 'd' がログされます(順不同) + +Object.keys(o); // ['a', 'd'] + +o.propertyIsEnumerable('a'); // true +o.propertyIsEnumerable('b'); // false +o.propertyIsEnumerable('c'); // false +o.propertyIsEnumerable('d'); // true +o.propertyIsEnumerable(Symbol.for('e')); // true +o.propertyIsEnumerable(Symbol.for('f')); // false + +var p = { ...o } +p.a // 1 +p.b // undefined +p.c // undefined +p.d // 4 +p[Symbol.for('e')] // 5 +p[Symbol.for('f')] // undefined +</pre> + +<h4 id="Configurable_attribute" name="Configurable_attribute">Configurable 属性</h4> + +<p><code>configurable</code> 属性は、プロパティをオブジェクトから削除できるかとプロパティの属性 (<code>value</code> と <code>writable</code> 以外) を変更できるかを同時に制御します。</p> + +<pre class="brush: js">var o = {}; +Object.defineProperty(o, 'a', { + get() { return 1; }, + configurable: false +}); + +Object.defineProperty(o, 'a', { + configurable: true +}); // TypeError が発生 +Object.defineProperty(o, 'a', { + enumerable: true +}); // TypeError が発生 +Object.defineProperty(o, 'a', { + set() {} +}); // TypeError が発生 (set は未定義であった) +Object.defineProperty(o, 'a', { + get() { return 1; } +}); // TypeError が発生 (新たな get は全く同じであるにもかかわらず) +Object.defineProperty(o, 'a', { + value: 12 +}); // TypeError が発生 ('configurable' が false でも 'value' は変更できますが、ここでは 'get' アクセサーがあるため変更できません) + +console.log(o.a); // logs 1 +delete o.a; // 何も起きません +console.log(o.a); // logs 1 +</pre> + +<p><code>o.a</code> の <code>configurable</code> 属性が <code>true</code> である場合、エラーが発生することなく最終的にプロパティが削除されます。</p> + +<h3 id="Adding_properties_and_default_values" name="Adding_properties_and_default_values">プロパティおよび既定値の追加</h3> + +<p>属性の既定値がどう適用されるかを考えることは重要です。値の割り当てにドット表記を用いた場合と <code>Object.defineProperty()</code> を用いた場合とでは、以下の例で示したとおりに違いがあります。</p> + +<pre class="brush: js">var o = {}; + +o.a = 1; +// これは以下と同じです: +Object.defineProperty(o, 'a', { + value: 1, + writable: true, + configurable: true, + enumerable: true +}); + +// その一方で、 +Object.defineProperty(o, 'a', { value: 1 }); +// これは以下と同じです: +Object.defineProperty(o, 'a', { + value: 1, + writable: false, + configurable: false, + enumerable: false +}); +</pre> + +<h3 id="Custom_Setters_and_Getters" name="Custom_Setters_and_Getters">独自のゲッターおよびセッター</h3> + +<p>例として自律的に記録を行うオブジェクトを作成してみます。<code>temperature</code> プロパティに値が代入されると、配列 <code>archive</code> に要素が一つ追加されます。</p> + +<pre class="brush: js">function Archiver() { + var temperature = null; + var archive = []; + + Object.defineProperty(this, 'temperature', { + get() { + console.log('get!'); + return temperature; + }, + set(value) { + temperature = value; + archive.push({ val: temperature }); + } + }); + + this.getArchive = function() { return archive; }; +} + +var arc = new Archiver(); +arc.temperature; // 'get!' +arc.temperature = 11; +arc.temperature = 13; +arc.getArchive(); // [{ val: 11 }, { val: 13 }] +</pre> + +<p>次の例では、ゲッターが常に同じ値を返すようにしています。</p> + +<pre class="brush: js">var pattern = { + get() { + return 'I always return this string, ' + + 'whatever you have assigned'; + }, + set() { + this.myname = 'this is my name string'; + } +}; + +function TestDefineSetAndGet() { + Object.defineProperty(this, 'myproperty', pattern); +} + +var instance = new TestDefineSetAndGet(); +instance.myproperty = 'test'; +console.log(instance.myproperty); +// I always return this string, whatever you have assigned + +console.log(instance.myname); // this is my name string +</pre> + +<h3 id="Inheritance_of_properties" name="Inheritance_of_properties">プロパティの継承</h3> + +<p>アクセサープロパティを継承されると、その派生クラスでもプロパティがアクセスされたり書き換えられるときに <code>get</code> と <code>set</code> が呼ばれます。これらのメソッドが値を保持するために変数を使っていると、すべてのオブジェクトがその値を共有することになります。</p> + +<pre class="brush: js">function myclass() { +} + +var value; +Object.defineProperty(myclass.prototype, "x", { + get() { + return value; + }, + set(x) { + value = x; + } +}); + +var a = new myclass(); +var b = new myclass(); +a.x = 1; +console.log(b.x); // 1 +</pre> + +<p>この問題を回避する方法は値を別のプロパティで保持することです。<code>get</code> と <code>set</code> メソッド内で <code>this</code> はアクセス／書き換えされようとしているプロパティを納めるオブジェクトを指しています。</p> + +<pre class="brush: js">function myclass() { +} + +Object.defineProperty(myclass.prototype, "x", { + get() { + return this.stored_x; + }, + set(x) { + this.stored_x = x; + } +}); + +var a = new myclass(); +var b = new myclass(); +a.x = 1; +console.log(b.x); // undefined +</pre> + +<p>アクセサープロパティとは違い、データプロパティは常にオブジェクト自身に格納されるのであって、prototype に格納されるわけではありません。しかし、書き込み不可能なデータプロパティを継承している場合、継承先オブジェクトでも書き換えは阻止されます。</p> + +<pre class="brush: js">function myclass() { +} + +myclass.prototype.x = 1; +Object.defineProperty(myclass.prototype, "y", { + writable: false, + value: 1 +}); + +var a = new myclass(); +a.x = 2; +console.log(a.x); // 2 +console.log(myclass.prototype.x); // 1 +a.y = 2; // 無視されます。strict モードではエラースローされます。 +console.log(a.y); // 1 +console.log(myclass.prototype.y); // 1 +</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-object.defineproperty', 'Object.defineProperty')}}</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.Object.defineProperty")}}</p> + +<h2 id="Compatibility_notes" name="Compatibility_notes">互換性のメモ</h2> + +<h3 id="Redefining_the_length_property_of_an_Array_object" name="Redefining_the_length_property_of_an_Array_object"><code>Array</code> オブジェクトの <code>length</code> プロパティの再定義</h3> + +<p>配列の {{jsxref("Array.length", "length")}} プロパティを再定義することは、通常の再定義の制限に照らせば可能です。({{jsxref("Array.length", "length")}} プロパティは初期状態で構成不可、列挙不可、書き込み可能です。つまり、変更されていない配列では、{{jsxref("Array.length", "length")}} プロパティの値を変更したり書き込み不可にしたりすることが可能です。列挙可否や構成可否、また書き込み不可に変更した後は値や書き込み可否も、変更することはできません。) しかし、すべてのブラウザーがこの再定義を許可しているとは限りません。</p> + +<p>Firefox 4 から 22 までの間では、配列の {{jsxref("Array.length", "length")}} プロパティを再定義しようとすると、無条件に (許可の有無にかかわらず) {{jsxref("TypeError")}} が発生します。</p> + +<p><code>Object.defineProperty()</code> を実装している Chrome のバージョンでは、状況によっては配列の現在の {{jsxref("Array.length", "length")}} プロパティとは異なる length の値を無視することがあります。状況によっては書き込み可否が暗黙に動作しない (そして例外を発生させない) こともあります。また、関連して、{{jsxref("Array.prototype.push")}} のような配列を変更する一部のメソッドが、書き込み不可であることを尊重しないことがあります。</p> + +<p><code>Object.defineProperty()</code> を実装する Safari のバージョンでは配列の現在の {{jsxref("Array.length", "length")}} プロパティと異なる値の length を無視し、また書き込み許可を変更する試みはエラーなしに実行されますが、実際はプロパティの書き込み許可が変更されません。</p> + +<p>Internet Explorer 9 以降と Firefox 23 以降のみが、完全かつ正確に配列の {{jsxref("Array.length", "length")}} プロパティの再定義を実装しているようです。現時点では、配列の {{jsxref("Array.length", "length")}} プロパティの再定義はどのブラウザーでも動作する、あるいは特定のルールに則って動作するとは考えないようにしてください。そして、もしこれが実行<em>できた</em>としても、<a href="http://whereswalden.com/2013/08/05/new-in-firefox-23-the-length-property-of-an-array-can-be-made-non-writable-but-you-shouldnt-do-it/">これを行う本当に良い理由はありません</a>。</p> + +<h3 id="Internet_Explorer_8_specific_notes" name="Internet_Explorer_8_specific_notes">Internet Explorer 8 の特記事項</h3> + +<p>Internet Explorer 8 は <code>Object.defineProperty()</code> メソッドを <a class="external" href="https://msdn.microsoft.com/en-us/library/dd229916%28VS.85%29.aspx">DOM オブジェクトでのみ使用できる</a>ものとして実装しました。以下 2 点に注意が必要です:</p> + +<ul> + <li>ネイティブオブジェクトに対して <code>Object.defineProperty()</code> を用いようとするとエラーが発生します。</li> + <li>プロパティの属性には特定の値を設定しなければなりません。<code>configurable</code>, <code>enumerable</code>, <code>writable</code> の各属性に対して、データ記述子ではすべて <code>true</code> に、アクセサー記述子では <code>configurable</code> に <code>true</code>、<code>enumerable</code> に <code>false</code> にです。(?)ほかの値(?)を与えようとすると、エラーが発生します。</li> + <li>プロパティの再設定には、始めにプロパティの削除が必要です。プロパティが削除されていない場合、再設定を試みる前の状態のままになります。</li> +</ul> + +<h3 id="Chrome_37_and_below_specific_notes" name="Chrome_37_and_below_specific_notes">Chrome 37 以下の特記事項</h3> + +<p>Chrome 37 以下には、<code>writable: false</code> 指定を行なった "prototype" プロパティを関数に定義する場合に、想定通りに動かない <a href="https://bugs.chromium.org/p/v8/issues/detail?id=3448">バグ</a> があります。</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Enumerability_and_ownership_of_properties">列挙可能性とプロパティの所有権</a></li> + <li>{{jsxref("Object.defineProperties()")}}</li> + <li>{{jsxref("Object.propertyIsEnumerable()")}}</li> + <li>{{jsxref("Object.getOwnPropertyDescriptor()")}}</li> + <li>{{jsxref("Object.prototype.watch()")}}</li> + <li>{{jsxref("Object.prototype.unwatch()")}}</li> + <li>{{jsxref("Operators/get", "get")}}</li> + <li>{{jsxref("Operators/set", "set")}}</li> + <li>{{jsxref("Object.create()")}}</li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty/Additional_examples">追加の <code>Object.defineProperty</code> の例</a></li> + <li>{{jsxref("Reflect.defineProperty()")}}</li> +</ul> diff --git a/files/ja/web/javascript/reference/global_objects/object/entries/index.html b/files/ja/web/javascript/reference/global_objects/object/entries/index.html new file mode 100644 index 0000000000..9b1787ea03 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/object/entries/index.html @@ -0,0 +1,155 @@ +--- +title: Object.entries() +slug: Web/JavaScript/Reference/Global_Objects/Object/entries +tags: + - JavaScript + - Method + - Object + - Reference + - メソッド +translation_of: Web/JavaScript/Reference/Global_Objects/Object/entries +--- +<div>{{JSRef}}</div> + +<p><code><strong>Object.entries()</strong></code> メソッドは、引数に与えたオブジェクトが所有する、文字列をキーとした列挙可能なプロパティの組 <code>[<var>key</var>, <var>value</var>]</code> からなる配列を返します。配列要素の順序は {{jsxref("Statements/for...in", "for...in")}} ループによる順序と同じです (両者の主な違いは、<code>for...in</code> ループではプロトタイプチェーン内のプロパティも列挙されることです)。</p> + +<p><code><strong>Object.entries()</strong></code> で返される配列の順序は、オブジェクトがどのように定義されたかに依存しません。特定の順序にする必要があるのであれば、<code>Object.entries(obj).sort((a, b) => a[0] - b[0]);</code> のようにして、まず配列を整列する必要があります。</p> + +<div>{{EmbedInteractiveExample("pages/js/object-entries.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">Object.entries(<var>obj</var>)</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code><var>obj</var></code></dt> + <dd>返されることになる文字列をキーとした列挙可能な所有プロパティの組 <code>[<var>key</var>, <var>value</var>]</code> を持つオブジェクト。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>引数に与えたオブジェクトが所有する、文字列をキーとした列挙可能なプロパティの組 <code>[<var>key</var>, <var>value</var>]</code> の配列。</p> + +<h2 id="Description" name="Description">解説</h2> + +<p><code>Object.entries()</code> は、<code>object</code> に直接存在する文字列をキーとした列挙可能プロパティの組 <code>[<var>key</var>, <var>value</var>]</code> が配列要素に対応した配列を返します。プロパティの順序はオブジェクト内のプロパティに対してループさせた時の順序と同じになります。</p> + +<h2 id="Polyfill" name="Polyfill">ポリフィル</h2> + +<p>ネイティブで <code>Object.entries</code> に対応していない古い環境に互換性を持たせる場合は、以下のいずれかを使用することができます。</p> + +<ul> + <li><code>Object.entries</code> の試験的実装である <a href="https://github.com/tc39/proposal-object-values-entries">tc39/proposal-object-values-entries</a> (IE に対応する必要がない場合)</li> + <li><a href="https://github.com/es-shims/Object.entries">es-shims/Object.entries</a> リポジトリにあるポリフィル</li> + <li>または、単純に、下記の配布可能なポリフィルを使うこともできます。</li> +</ul> + +<pre class="brush: js notranslate">if (!Object.entries) { + Object.entries = function( obj ){ + var ownProps = Object.keys( obj ), + i = ownProps.length, + resArray = new Array(i); // preallocate the Array + while (i--) + resArray[i] = [ownProps[i], obj[ownProps[i]]]; + + return resArray; + }; +} +</pre> + +<p>上記のポリフィルのコードスニペットで、IE<9 の対応が必要な場合、Object.keys の polyfill ({{jsxref("Object.keys")}} ページにあるようなもの) も必要となります。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush: js notranslate">const obj = { foo: 'bar', baz: 42 }; +console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ] + +// 配列様オブジェクト +const obj = { 0: 'a', 1: 'b', 2: 'c' }; +console.log(Object.entries(obj)); // [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ] + +// ランダムなキー順序を持つ配列様オブジェクト +const anObj = { 100: 'a', 2: 'b', 7: 'c' }; +console.log(Object.entries(anObj)); // [ ['2', 'b'], ['7', 'c'], ['100', 'a'] ] + +// 列挙可能でないプロパティ getFoo がある +const myObj = Object.create({}, { getFoo: { value() { return this.foo; } } }); +myObj.foo = 'bar'; +console.log(Object.entries(myObj)); // [ ['foo', 'bar'] ] + +// オブジェクトでない引数はオブジェクトへと型強制されます +console.log(Object.entries('foo')); // [ ['0', 'f'], ['1', 'o'], ['2', 'o'] ] + +// returns an empty array for any primitive type, since primitives have no own properties +console.log(Object.entries(100)); // [ ] + +// iterate through key-value gracefully +const obj = { a: 5, b: 7, c: 9 }; +for (const [key, value] of Object.entries(obj)) { + console.log(`${key} ${value}`); // "a 5", "b 7", "c 9" +} + +// Or, using array extras +Object.entries(obj).forEach(([key, value]) => { +console.log(`${key} ${value}`); // "a 5", "b 7", "c 9" +}); +</pre> + +<h3 id="Converting_an_Object_to_a_Map" name="Converting_an_Object_to_a_Map"><code>Object</code> から <code>Map</code> への変換</h3> + +<p>{{jsxref("Map", "new Map()")}} コンストラクターは <code>entries</code> による反復処理に対応しています。<code>Object.entries</code> を使うと、{{jsxref("Object")}} から {{jsxref("Map")}} へと簡単に変換できます。:</p> + +<pre class="brush: js notranslate">const obj = { foo: 'bar', baz: 42 }; +const map = new Map(Object.entries(obj)); +console.log(map); // Map { foo: "bar", baz: 42 } +</pre> + +<h3 id="Iterating_through_an_Object" name="Iterating_through_an_Object"><code>Object</code> をループする</h3> + +<p><a href="/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">Array Destructuring</a> を使って、objects を簡単にループできます。</p> + +<pre class="brush: js notranslate">const obj = { foo: 'bar', baz: 42 }; +Object.entries(obj).forEach(([key, value]) => console.log(`${key}: ${value}`)); // "foo: bar", "baz: 42" +</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-object.entries', 'Object.entries')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Object.entries")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">プロパティの列挙可能性と所有権</a></li> + <li>{{jsxref("Object.keys()")}}</li> + <li>{{jsxref("Object.values()")}}</li> + <li>{{jsxref("Object.prototype.propertyIsEnumerable()")}}</li> + <li>{{jsxref("Object.create()")}}</li> + <li>{{jsxref("Object.fromEntries()")}}</li> + <li>{{jsxref("Object.getOwnPropertyNames()")}}</li> + <li>{{jsxref("Map.prototype.entries()")}}</li> + <li>{{jsxref("Map.prototype.keys()")}}</li> + <li>{{jsxref("Map.prototype.values()")}}</li> +</ul> diff --git a/files/ja/web/javascript/reference/global_objects/object/freeze/index.html b/files/ja/web/javascript/reference/global_objects/object/freeze/index.html new file mode 100644 index 0000000000..5f5ee145fd --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/object/freeze/index.html @@ -0,0 +1,245 @@ +--- +title: Object.freeze() +slug: Web/JavaScript/Reference/Global_Objects/Object/freeze +tags: + - ECMAScript5 + - JavaScript + - Object + - Reference + - freeze + - メソッド + - ロック + - 不変性 + - 凍結 + - 変更 + - 変更可能性 +translation_of: Web/JavaScript/Reference/Global_Objects/Object/freeze +--- +<div>{{JSRef}}</div> + +<p><code><strong>Object.freeze()</strong></code> メソッドはオブジェクトを<strong>凍結</strong>します。凍結されたオブジェクトは変更できなくなります。オブジェクトを凍結すると、新しいプロパティを追加したり、既存のプロパティを削除したりすることができなくなり、既存のプロパティに対する列挙可否、構成可否、書き込み可否の変更ができなくなり、既存のプロパティの値が変更できなくなります。加えて、オブジェクトを凍結するとプロトタイプも変更できなくなります。<code>freeze()</code> は渡されたものと同じオブジェクトを返します。</p> + +<div>{{EmbedInteractiveExample("pages/js/object-freeze.html")}}</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">Object.freeze(<var>obj</var>)</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code><var>obj</var></code></dt> + <dd>凍結するオブジェクトです。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>この関数に渡されたオブジェクトです。</p> + +<h2 id="Description" name="Description">説明</h2> + +<p>凍結されたオブジェクトにプロパティのセットを追加あるいは削除することはできません。実行しようとすると暗黙に失敗するか、または {{jsxref("TypeError")}} 例外が発生して失敗します (多くの場合は、ただし{{jsxref("Strict_mode", "厳格モード", "", 1)}}ではこれに限りません)。</p> + +<p>凍結されたオブジェクトデータプロパティについては、値を変更することはできず、構成可否、書き込み可否の属性は false に設定されます。アクセサープロパティ (ゲッターおよびセッター) は同様に動作します (そして、値を変更しているかのようにみえます)。なお、オブジェクトである値については、それも凍結されていない限り変更可能です。オブジェクトとして、配列は凍結可能です。凍結すると、要素が変更可能ではなくなり、配列に対する要素の追加や削除ができなくなります。</p> + +<p><code>freeze()</code> は関数に渡されたものと同じオブジェクトを返します。凍結されたコピーを生成する訳では<em>ありません</em>。</p> + +<p>ECMAScript 5 では、このメソッドの引数がオブジェクトではない (プリミティブである) 場合、{{jsxref("TypeError")}} が発生します。ECMAScript 2015 では、オブジェクトではない引数は通常の凍結済みのオブジェクトである場合と同様に扱い、単純に返されます。</p> + +<pre class="brush: js notranslate">> Object.freeze(1) +TypeError: 1 is not an object // ES5 のコード + +> Object.freeze(1) +1 // ES2015 のコード +</pre> + +<p>要素を伴う {{domxref("ArrayBufferView")}} では、メモリー上のビューであり絶対的に他の問題の可能性があるため、{{jsxref("TypeError")}} が発生します。</p> + +<pre class="brush: js notranslate">> Object.freeze(new Uint8Array(0)) // 要素なし +<em>Uint8Array</em> [] + +> Object.freeze(new Uint8Array(1)) // 要素あり +TypeError: Cannot freeze array buffer views with elements + +> Object.freeze(new DataView(new ArrayBuffer(32))) // 要素なし +<em>DataView</em> {} + +> Object.freeze(new Float64Array(new ArrayBuffer(64), 63, 0)) // 要素なし +<em>Float64Array</em> [] + +> Object.freeze(new Float64Array(new ArrayBuffer(64), 32, 2)) // 要素あり +TypeError: Cannot freeze array buffer views with elements +</pre> + +<p>なお、標準の3つのプロパティ (<code>buf.byteLength</code>, <code>buf.byteOffset</code> and <code>buf.buffer</code>) は読み取り専用ですので ({{jsxref("ArrayBuffer")}} または {{jsxref("SharedArrayBuffer")}} の場合)、これらのプロパティを凍結しようとする理由はありません。</p> + +<h3 id="Comparison_to_Object.seal" name="Comparison_to_Object.seal()">Object.seal() との比較</h3> + +<p>{{jsxref("Object.seal()")}} によって封印されたオブジェクトは、既存のプロパティを変更することができます。<code>Object.freeze()</code> によって凍結されたオブジェクトの既存のプロパティは、不変になります。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Freezing_objects" name="Freezing_objects">オブジェクトの凍結</h3> + +<pre class="brush: js notranslate">const obj = { + prop() {}, + foo: 'bar' +}; + +// 凍結前: 新しいプロパティが追加でき、 +// 既存のプロパティは変更や削除ができます +obj.foo = 'baz'; +obj.lumpy = 'woof'; +delete obj.prop; + +// 凍結 +const o = Object.freeze(obj); + +// 返値は渡したオブジェクトとまったく同じものです。 +o === obj; // true + +// オブジェクトは凍結されています。 +Object.isFrozen(obj); // === true + +// すべての変更が失敗するようになりました +obj.foo = 'quux'; // 暗黙的に何も行われません +// 暗黙的にプロパティは追加されません +obj.quaxxor = 'the friendly duck'; + +// また、厳格モードではこれらの試みに対して TypeError が発生します +function fail(){ + 'use strict'; + obj.foo = 'sparky'; // TypeError が発生 + delete obj.foo; // TypeError が発生 + delete obj.quaxxor; // 属性 'quaxxor' が追加されたことがないため true を返す + obj.sparky = 'arf'; // TypeError が発生 +} + +fail(); + +// Object.defineProperty; から変更を試みますが、 +// 以下のどちらの文も TypeError が発生します。 +Object.defineProperty(obj, 'ohai', { value: 17 }); +Object.defineProperty(obj, 'foo', { value: 'eit' }); + +// プロトタイプを変更することもできず、 +// 以下のどちらの文も TypeError が発生します。 +Object.setPrototypeOf(obj, { x: 20 }) +obj.__proto__ = { x: 20 } +</pre> + +<h3 id="Freezing_arrays" name="Freezing_arrays">配列の凍結</h3> + +<pre class="brush: js notranslate">let a = [0]; +Object.freeze(a); // 配列が変更できなくなりました。 + +a[0] = 1; // 暗黙に失敗 + +// 厳格モードで試みると TypeError が発生します +function fail() { + "use strict" + a[0] = 1; +} + +fail(); + +// push を試みる +a.push(2); // TypeError が発生</pre> + +<p>凍結されたオブジェクトは<em>不変</em>になります。しかし、<em>定数</em>であるとは限りません。以下の例では、凍結されたオブジェクトが定数ではないことを示しています (凍結が浅い)。</p> + +<pre class="brush: js notranslate">const obj1 = { + internal: {} +}; + +Object.freeze(obj1); +obj1.internal.a = 'aValue'; + +obj1.internal.a // 'aValue'</pre> + +<p>定数オブジェクトになるには、参照のつながり全体 (他のオブジェクトへの直接または間接的な参照) が不変で凍結されたオブジェクトのみを参照していなければなりません。凍結されるオブジェクトは、オブジェクト全体の中にあるオブジェクトの<em>状態</em> (値と他のオブジェクトへの参照) がすべて固定されているので、不変ということができます。なお、文字列、数値、真偽値はすべて不変となり、関数や配列はオブジェクト扱いです。</p> + +<h4 id="What_is_shallow_freeze" name="What_is_shallow_freeze">浅い凍結とは</h4> + +<p><code>Object.freeze(<var>object</var>)</code> を呼び出した結果は、<code>object</code> の直属のプロパティにのみ適用され、<code>object</code> 上<em>のみ</em>に対するその後のプロパティの追加、削除、値の再割り当て操作を禁止します。これらのプロパティの値がオブジェクトそのものであった場合、これらのオブジェクトは凍結されず、プロパティの追加、削除、値の再割り当て操作の対象になり得ます。</p> + +<pre class="brush: js notranslate">const employee = { + name: "Mayank", + designation: "Developer", + address: { + street: "Rohini", + city: "Delhi" + } +}; + +Object.freeze(employee); + +employee.name = "Dummy"; // 非 strict モードでは暗黙に失敗 +employee.address.city = "Noida"; // 子オブジェクトの属性は変更できる + +console.log(employee.address.city) // 出力: "Noida" +</pre> + +<p>オブジェクトを不変にするには、オブジェクト型のプロパティをそれぞれ再帰的に凍結させてください (深い凍結)。オブジェクトが参照グラフに{{interwiki("wikipedia", "閉路")}}を含まないことが分かっている場合は、デザインパターンに基づいてケースバイケースのパターンを使用してください。そうでないと、無限ループが発生します。<code>deepFreeze()</code> をパス (例えば配列) 引数を受け取る内部関数を持つよう拡張すると、オブジェクトを不変にするプロセスにいるときに、<code>deepFreeze()</code> が再帰的に呼び出されることを防ぐことができます。凍結させてはいけない [window] のようなオブジェクトを凍結させる危険性がなおあります。</p> + +<pre class="brush: js notranslate">function deepFreeze(object) { + // オブジェクトで定義されたプロパティ名を取得 + const propNames = Object.getOwnPropertyNames(object); + + // 自分自身を凍結する前にプロパティを凍結 + + for (const name of propNames) { + const value = object[name]; + + if (value && typeof value === "object") { + deepFreeze(value); + } + } + + return Object.freeze(object); +} + +const obj2 = { + internal: { + a: null + } +}; + +deepFreeze(obj2); + +obj2.internal.a = 'anotherValue'; // 非 strict モードでは暗黙に失敗 +obj2.internal.a; // null +</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-object.freeze', 'Object.freeze')}}</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.Object.freeze")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Object.isFrozen()")}}</li> + <li>{{jsxref("Object.preventExtensions()")}}</li> + <li>{{jsxref("Object.isExtensible()")}}</li> + <li>{{jsxref("Object.seal()")}}</li> + <li>{{jsxref("Object.isSealed()")}}</li> +</ul> diff --git a/files/ja/web/javascript/reference/global_objects/object/fromentries/index.html b/files/ja/web/javascript/reference/global_objects/object/fromentries/index.html new file mode 100644 index 0000000000..04f84e02d2 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/object/fromentries/index.html @@ -0,0 +1,108 @@ +--- +title: Object.fromEntries() +slug: Web/JavaScript/Reference/Global_Objects/Object/fromEntries +tags: + - JavaScript + - Method + - Object + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Object/fromEntries +--- +<p>{{JSRef}}</p> + +<p><code><strong>Object.fromEntries()</strong></code> メソッドは、キーと値の組み合わせのリストをオブジェクトに変換します。</p> + +<div>{{EmbedInteractiveExample("pages/js/object-fromentries.html")}}</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">Object.fromEntries(<var>iterable</var>);</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code><var>iterable</var></code></dt> + <dd><a href="/ja/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterable_protocol">反復処理プロトコル</a>を実装している {{jsxref("Array")}} や {{jsxref("Map")}} やその他の反復処理可能なオブジェクトです。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>反復可能な項目から作成されたプロパティを持つ新しいオブジェクト。</p> + +<h2 id="Description" name="Description">説明</h2> + +<p><code>Object.fromEntries()</code> メソッドは、キーと値のリストを取り、これらの項目から作成されたプロパティを持つ新しいオブジェクトを返します。引数の <var>iterable</var> は <code>@@iterator</code> メソッドを実装しており、オブジェクトのような二つの要素を持ち、最初の要素がプロパティキーとして使われる値であり、次の要素がプロパティのキーに関連付けられる値であるようなオブジェクトであることが求められます。</p> + +<p><code>Object.fromEntries()</code> は {{jsxref("Object.entries()")}} の逆の動作をします。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Converting_a_Map_to_an_Object" name="Converting_a_Map_to_an_Object">Map から Object への変換</h3> + +<p><code>Object.fromEntries</code> では、 {{jsxref("Map")}} を {{jsxref("Object")}} に変換することができます。</p> + +<pre class="brush: js notranslate">const map = new Map([ ['foo', 'bar'], ['baz', 42] ]); +const obj = Object.fromEntries(map); +console.log(obj); // { foo: "bar", baz: 42 } +</pre> + +<h3 id="Converting_an_Array_to_an_Object" name="Converting_an_Array_to_an_Object">Array から Object への変換</h3> + +<p><code>Object.fromEntries</code> では、 {{jsxref("Array")}} を {{jsxref("Object")}} に変換することができます。</p> + +<pre class="brush: js notranslate">const arr = [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ]; +const obj = Object.fromEntries(arr); +console.log(obj); // { 0: "a", 1: "b", 2: "c" } +</pre> + +<h3 id="Object_transformations" name="Object_transformations">オブジェクトの変形</h3> + +<p><code>Object.fromEntries</code>、逆のメソッド {{jsxref("Object.entries()")}}、<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#Methods_2">配列操作メソッド</a>を使用して、以下のようにオブジェクトを変形することができます。</p> + +<pre class="brush: js notranslate">const object1 = { a: 1, b: 2, c: 3 }; + +const object2 = Object.fromEntries( + Object.entries(object1) + .map(([ key, val ]) => [ key, val * 2 ]) +); + +console.log(object2); +// { a: 2, b: 4, c: 6 }</pre> + +<div class="hidden"> +<p>MDN のページにポリフィルを追加しないでください。詳しくは、 <a href="https://discourse.mozilla.org/t/mdn-rfc-001-mdn-wiki-pages-shouldnt-be-a-distributor-of-polyfills/24500">https://discourse.mozilla.org/t/mdn-rfc-001-mdn-wiki-pages-shouldnt-be-a-distributor-of-polyfills/24500</a> を参照してください。</p> +</div> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.fromentries', 'Object.fromEntries')}}</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.Object.fromEntries")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Object.entries()")}}</li> + <li>{{jsxref("Object.keys()")}}</li> + <li>{{jsxref("Object.values()")}}</li> + <li>{{jsxref("Map.prototype.entries()")}}</li> + <li>{{jsxref("Map.prototype.keys()")}}</li> + <li>{{jsxref("Map.prototype.values()")}}</li> +</ul> diff --git a/files/ja/web/javascript/reference/global_objects/object/getownpropertydescriptor/index.html b/files/ja/web/javascript/reference/global_objects/object/getownpropertydescriptor/index.html new file mode 100644 index 0000000000..5f0db498a0 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/object/getownpropertydescriptor/index.html @@ -0,0 +1,149 @@ +--- +title: Object.getOwnPropertyDescriptor() +slug: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor +tags: + - ECMAScript 5 + - JavaScript + - Method + - Object +translation_of: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor +--- +<div>{{JSRef}}</div> + +<p><strong><code>Object.getOwnPropertyDescriptor()</code></strong> メソッドは、与えられたオブジェクトの特定のプロパティ (すなわち、あるオブジェクトの直接の表現であり、オブジェクトのプロトタイプチェーン内のものではない) の構成を記述するオブジェクトを返します。返されるオブジェクトは変更可能ですが、変更しても元のプロパティの構成には影響を与えません。</p> + +<div>{{EmbedInteractiveExample("pages/js/object-getownpropertydescriptor.html")}}</div> + +<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">Object.getOwnPropertyDescriptor(<var>obj</var>, <var>prop</var>)</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code><var>obj</var></code></dt> + <dd>プロパティの確認を行うオブジェクトです。</dd> + <dt><code><var>prop</var></code></dt> + <dd>記述子を受け取るプロパティの名前または {{jsxref("Symbol")}} です。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>指定されたプロパティがオブジェクトにある場合は、プロパティ記述子で、それ以外の場合は {{jsxref("undefined")}} です。</p> + +<h2 id="Description" name="Description">解説</h2> + +<p>このメソッドで、プロパティの正確な定義を確認することができます。 JavaScript の<dfn>プロパティ</dfn>は、文字列値の名前または {{jsxref("Symbol")}} とプロパティ記述子から成ります。プロパティ記述子およびその属性についての詳細情報は、 {{jsxref("Object.defineProperty()")}} にあります。</p> + +<p><dfn>プロパティ記述子</dfn>は、以下の属性のいくつかを記録したものです。</p> + + + +<dl> + <dt><code>value</code></dt> + <dd>プロパティに関連づけられた値です (データ記述子のみ)。</dd> + <dt><code>writable</code></dt> + <dd><code>true</code> である場合、プロパティに関連づけられた値は変更することができます (データ記述子のみ)。</dd> + <dt><code>get</code></dt> + <dd>プロパティのゲッターとして提供する関数、あるいはゲッターがない場合は <code>undefined</code> です (アクセサ記述子のみ)。</dd> + <dt><code>set</code></dt> + <dd>プロパティのセッターとして提供する関数、あるいはセッターがない場合は <code>undefined</code> です (アクセサ記述子のみ)。</dd> + <dt><code>configurable</code></dt> + <dd><code>true</code> である場合、この種の記述子を変更することや、対応するオブジェクトからプロパティを削除することができます。</dd> + <dt><code>enumerable</code></dt> + <dd><code>true</code> である場合、このプロパティは対応するオブジェクトでのプロパティ列挙に現れます。</dd> +</dl> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Using_Object.getOwnPropertyDescriptor" name="Using_Object.getOwnPropertyDescriptor">Object.getOwnPropertyDescriptor の使用</h3> + +<pre class="brush: js notranslate">var o, d; + +o = { get foo() { return 17; } }; +d = Object.getOwnPropertyDescriptor(o, 'foo'); +// d is { +// configurable: true, +// enumerable: true, +// get: /*the getter function*/, +// set: undefined +// } + +o = { bar: 42 }; +d = Object.getOwnPropertyDescriptor(o, 'bar'); +// d is { +// configurable: true, +// enumerable: true, +// value: 42, +// writable: true +// } + +o = { [Symbol.for('baz')]: 73 } +d = Object.getOwnPropertyDescriptor(o, Symbol.for('baz')); +// d is { +// configurable: true, +// enumerable: true, +// value: 73, +// writable: true +// } + +o = {}; +Object.defineProperty(o, 'qux', { + value: 8675309, + writable: false, + enumerable: false +}); +d = Object.getOwnPropertyDescriptor(o, 'qux'); +// d is { +// value: 8675309, +// writable: false, +// enumerable: false, +// configurable: false +// } +</pre> + +<h3 id="Non-object_coercion" name="Non-object_coercion">オブジェクト以外の型変換</h3> + +<p>ECMAScript 5 では、このメソッドへの最初の引数がオブジェクトでない (プリミティブである) 場合は、 {{jsxref("TypeError")}} が発生します。 ECMAScript 2015 では、最初の引数がオブジェクトでなくても、最初に強制的にオブジェクトに変換します。</p> + +<pre class="brush: js notranslate">Object.getOwnPropertyDescriptor('foo', 0); +// TypeError: "foo" is not an object // ES5 code + +Object.getOwnPropertyDescriptor('foo', 0); +// Object returned by ES2015 code: { +// configurable: false, +// enumerable: true, +// value: "f", +// writable: 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-object.getownpropertydescriptor', 'Object.getOwnPropertyDescriptor')}}</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.Object.getOwnPropertyDescriptor")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Object.defineProperty()")}}</li> + <li>{{jsxref("Reflect.getOwnPropertyDescriptor()")}}</li> +</ul> diff --git a/files/ja/web/javascript/reference/global_objects/object/getownpropertydescriptors/index.html b/files/ja/web/javascript/reference/global_objects/object/getownpropertydescriptors/index.html new file mode 100644 index 0000000000..3232f7de88 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/object/getownpropertydescriptors/index.html @@ -0,0 +1,110 @@ +--- +title: Object.getOwnPropertyDescriptors() +slug: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptors +tags: + - JavaScript + - Method + - Object +translation_of: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptors +--- +<div>{{JSRef}}</div> + +<p><code><strong>Object.getOwnPropertyDescriptors()</strong></code> メソッドは、指定したオブジェクトのすべてのプロパティ記述子を返します。</p> + +<div>{{EmbedInteractiveExample("pages/js/object-getownpropertydescriptors.html")}}</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">Object.getOwnPropertyDescriptors(<var>obj</var>)</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>すべてのプロパティディスクリプタを取得するオブジェクト。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>オブジェクトのすべてのプロパティ記述子を含むオブジェクト。プロパティがない場合、空オブジェクトの可能性がある。</p> + +<h2 id="Description" name="Description">説明</h2> + +<p>このメソッドは、オブジェクトのすべての独自のプロパティの正確な記述の検査を可能にします。 JavaScript では、<dfn>プロパティ</dfn>は文字列値による名前または {{jsxref("Symbol")}} とプロパティ記述子で構成されています。プロパティ記述子の型と属性についての詳細情報は、{{jsxref("Object.defineProperty()")}} で確認してください。</p> + +<p><dfn>プロパティディスクリプタ</dfn> は、次の属性のいくつかを持ちます。</p> + +<dl> + <dt><code>value</code></dt> + <dd>プロパティに関連づけられた値です (データディスクリプタのみ)。</dd> + <dt><code>writable</code></dt> + <dd><code>true</code> である場合、プロパティに関連づけられた値は変更することができます (データ記述子のみ)。</dd> + <dt><code>get</code></dt> + <dd>プロパティのゲッターとして提供する関数、あるいはゲッターがない場合は {{jsxref("undefined")}} です (アクセサ記述子のみ)。</dd> + <dt><code>set</code></dt> + <dd>プロパティのセッターとして提供する関数、あるいはセッターがない場合は {{jsxref("undefined")}} です (アクセサ記述子のみ)。</dd> + <dt><code>configurable</code></dt> + <dd><code>true</code> である場合、この種の記述子を変更することや、対応するオブジェクトからプロパティを削除することができます。</dd> + <dt><code>enumerable</code></dt> + <dd><code>true</code> である場合、このプロパティは対応するオブジェクトでのプロパティ列挙に現れます。</dd> +</dl> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Creating_a_shallow_clone" name="Creating_a_shallow_clone">浅いコピーの生成</h3> + +<p>{{jsxref("Object.assign()")}} メソッドは、ソースオブジェクトから対象のオブジェクトに対して enumerable とプロパティのみコピーできる一方、2 つの未知のオブジェクト間の浅いコピーのために、このメソッドと {{jsxref("Object.create()")}} を使用できます：</p> + +<pre class="brush: js notranslate">Object.create( + Object.getPrototypeOf(obj), + Object.getOwnPropertyDescriptors(obj) +); +</pre> + +<h3 id="Creating_a_subclass" name="Creating_a_subclass">サブクラスの作成</h3> + +<p>サブクラスを作成する通常の方法は、サブクラスを定義し、そのプロトタイプをスーパークラスのインスタンスに設定し、そのインスタンスにプロパティを定義することです。これは特にセッターやゲッターが無骨になることがあります。代わりに、プロトタイプを設定するためにこのコードを使用することもできます。</p> + +<pre class="brush: js notranslate">function superclass() {} +superclass.prototype = { + // Define your methods and properties here +}; +function subclass() {} +subclass.prototype = Object.create( + superclass.prototype, + { + // Define your methods and properties here + } +); +</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-object.getownpropertydescriptors', 'Object.getOwnPropertyDescriptors')}}</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.Object.getOwnPropertyDescriptors")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Object.getOwnPropertyDescriptor()")}}</li> + <li>{{jsxref("Object.defineProperty()")}}</li> + <li><a href="https://github.com/tc39/proposal-object-getownpropertydescriptors">Polyfill</a></li> +</ul> diff --git a/files/ja/web/javascript/reference/global_objects/object/getownpropertynames/index.html b/files/ja/web/javascript/reference/global_objects/object/getownpropertynames/index.html new file mode 100644 index 0000000000..adc5db5aed --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/object/getownpropertynames/index.html @@ -0,0 +1,157 @@ +--- +title: Object.getOwnPropertyNames() +slug: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames +tags: + - ECMAScript 5 + - JavaScript + - JavaScript 1.8.5 + - Method + - Object + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames +--- +<div>{{JSRef}}</div> + +<p><strong><code>Object.getOwnPropertyNames()</code></strong> メソッドは、与えられたオブジェクトで発見されたすべての直接のプロパティを含む配列を (シンボルを使用したものを除き、列挙不可能なプロパティを含んで) 返します。</p> + +<div>{{EmbedInteractiveExample("pages/js/object-getownpropertynames.html")}}</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">Object.getOwnPropertyNames(<var>obj</var>)</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code><var>obj</var></code></dt> + <dd>オブジェクトで、これ自身の列挙可能および列挙不可能なプロパティが返されます。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>指定されたオブジェクトで発見された、列挙可能および列挙不可能なプロパティに対応する文字列を要素とする配列。</p> + +<h2 id="Description" name="Description">解説</h2> + +<p><code>Object.getOwnPropertyNames()</code> は、 <code><var>obj</var></code> で発見された列挙可能および列挙不可能なプロパティに対応する文字列を要素とする配列を返します。配列内における列挙可能なプロパティの順序は、オブジェクトで {{jsxref("Statements/for...in", "for...in")}} (または {{jsxref("Object.keys()")}}) を実行して見つかるものの順序と同じです。 ES6 によれば、オブジェクトの整数のキーは (列挙可能であっても列挙不可能であっても) 最初の配列に昇順で追加され、その後に挿入順を表す文字列キーが続きます。</p> + +<p>ES5 では、このメソッドの引数がオブジェクトではない (プリミティブである) 場合、 {{jsxref("TypeError")}} が発生します。 ES2015 では、引数がオブジェクトではない場合はオブジェクトに型変換されます。</p> + +<pre class="brush: js notranslate">Object.getOwnPropertyNames('foo'); +// TypeError: "foo" is not an object (ES5 code) + +Object.getOwnPropertyNames('foo'); +// ["0", "1", "2", "length"] (ES2015 code) +</pre> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Using_Object.getOwnPropertyNames" name="Using_Object.getOwnPropertyNames">Object.getOwnPropertyNames() の使用</h3> + +<pre class="brush: js notranslate">var arr = ['a', 'b', 'c']; +console.log(Object.getOwnPropertyNames(arr).sort()); // .sort() は配列のメソッド +// ["0", "1", "2", "length"] と出力される + +// 配列風オブジェクト +var obj = { 0: 'a', 1: 'b', 2: 'c' }; +console.log(Object.getOwnPropertyNames(obj).sort()); // .sort() は配列のメソッド +// ["0", "1", "2"] と出力される + +// Array.forEach を使ったプロパティと値の出力 +Object.getOwnPropertyNames(obj).forEach( + function (val, idx, array) { + console.log(val + ' -> ' + obj[val]); + } +); +// 出力結果 +// 0 -> a +// 1 -> b +// 2 -> c + +// 列挙不可能なプロパティ +var my_obj = Object.create({}, { + getFoo: { + value: function() { return this.foo; }, + enumerable: false + } +}); +my_obj.foo = 1; + +console.log(Object.getOwnPropertyNames(my_obj).sort()); +// ["foo", "getFoo"] と出力されます +</pre> + +<p>列挙可能なプロパティのみ取得したい場合は {{jsxref("Object.keys()")}} を参照するか、 {{jsxref("Statements/for...in", "for...in")}} ループを用いるかしてください。 (なお、 for...in ループでは {{jsxref("Object.prototype.hasOwnProperty()", "hasOwnProperty()")}} でフィルタリングされない限りは、そのオブジェクト上で直接見つかるプロパティだけでなく、プロトタイプチェーン上の列挙可能なプロパティも返されることに注意してください。)</p> + +<p>プロトタイプチェーン上のプロパティは配列に含まれません。</p> + +<pre class="brush: js notranslate">function ParentClass() {} +ParentClass.prototype.inheritedMethod = function() {}; + +function ChildClass() { + this.prop = 5; + this.method = function() {}; +} +ChildClass.prototype = new ParentClass; +ChildClass.prototype.prototypeMethod = function() {}; + +console.log( + Object.getOwnPropertyNames( + new ChildClass() // ["prop", "method"] + ) +); +</pre> + +<h3 id="Get_non-enumerable_properties_only" name="Get_non-enumerable_properties_only">列挙不可能なプロパティのみを取得する</h3> + +<p>ここでは {{jsxref("Array.prototype.filter()")}} 関数を使用して、 ({{jsxref("Object.keys()")}} で取得した) 列挙可能なキーを (<code>Object.getOwnPropertyNames()</code> で取得した) すべてのキーからフィルタリングし、出力として列挙不可能なキーのみを取得します。</p> + +<pre class="brush: js notranslate">var target = myObject; +var enum_and_nonenum = Object.getOwnPropertyNames(target); +var enum_only = Object.keys(target); +var nonenum_only = enum_and_nonenum.filter(function(key) { + var indexInEnum = enum_only.indexOf(key); + if (indexInEnum == -1) { + // このキーが enum_only の中になければ、 + // そのキーは列挙不可能であることを意味するので、 + // true を返してフィルターの中に残します。 + return true; + } else { + return false; + } +}); + +console.log(nonenum_only); +</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-object.getownpropertynames', 'Object.getOwnPropertyNames')}}</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.Object.getOwnPropertyNames")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Enumerability_and_ownership_of_properties">プロパティの列挙可能性と所有権</a></li> + <li>{{jsxref("Object.prototype.hasOwnProperty()")}}</li> + <li>{{jsxref("Object.prototype.propertyIsEnumerable()")}}</li> + <li>{{jsxref("Object.create()")}}</li> + <li>{{jsxref("Object.keys()")}}</li> + <li>{{jsxref("Array.forEach()")}}</li> +</ul> diff --git a/files/ja/web/javascript/reference/global_objects/object/getownpropertysymbols/index.html b/files/ja/web/javascript/reference/global_objects/object/getownpropertysymbols/index.html new file mode 100644 index 0000000000..284dc92554 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/object/getownpropertysymbols/index.html @@ -0,0 +1,86 @@ +--- +title: Object.getOwnPropertySymbols() +slug: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols +tags: + - ECMAScript 2015 + - JavaScript + - Method + - Object +translation_of: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols +--- +<div>{{JSRef}}</div> + +<p><strong><code>Object.getOwnPropertySymbols()</code></strong> メソッドは、与えられたオブジェクト上で直接見つかるシンボルプロパティすべての配列を返します。</p> + +<div>{{EmbedInteractiveExample("pages/js/object-getownpropertysymbols.html")}}</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">Object.getOwnPropertySymbols(<var>obj</var>)</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code><var>obj</var></code></dt> + <dd>シンボルプロパティが返されるオブジェクトです。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>与えられたオブジェクト上で直接見つかるシンボルプロパティすべての配列です。</p> + +<h2 id="Description" name="Description">解説</h2> + +<p>{{jsxref("Object.getOwnPropertyNames()")}} と同様、与えられたオブジェクトのすべてのシンボルプロパティをシンボルの配列として取得することができます。 {{jsxref("Object.getOwnPropertyNames()")}} 自体はオブジェクトのシンボルプロパティを含まず、文字列プロパティのみを含むことに注意して下さい。</p> + +<p>すべてのオブジェクトが最初に自身のシンボルプロパティを持っているとは限らないので、 <code>Object.getOwnPropertySymbols()</code> は、オブジェクトにシンボルプロパティを設定しない限りは空の配列を返します。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Using_getOwnPropertySymbols" name="Using_getOwnPropertySymbols">getOwnPropertySymbols の使用</h3> + +<pre class="brush: js notranslate">var obj = {}; +var a = Symbol('a'); +var b = Symbol.for('b'); + +obj[a] = 'localSymbol'; +obj[b] = 'globalSymbol'; + +var objectSymbols = Object.getOwnPropertySymbols(obj); + +console.log(objectSymbols.length); // 2 +console.log(objectSymbols); // [Symbol(a), Symbol(b)] +console.log(objectSymbols[0]); // Symbol(a) +</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-object.getownpropertysymbols', 'Object.getOwnPropertySymbols')}}</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.Object.getOwnPropertySymbols")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Object.getOwnPropertyNames()")}}</li> + <li>{{jsxref("Symbol")}}</li> +</ul> diff --git a/files/ja/web/javascript/reference/global_objects/object/getprototypeof/index.html b/files/ja/web/javascript/reference/global_objects/object/getprototypeof/index.html new file mode 100644 index 0000000000..22d3bd5976 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/object/getprototypeof/index.html @@ -0,0 +1,86 @@ +--- +title: Object.getPrototypeOf() +slug: Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf +tags: + - ECMAScript 5 + - JavaScript + - Method + - Object +translation_of: Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf +--- +<div>{{JSRef}}</div> + +<p><strong><code>Object.getPrototypeOf()</code></strong> メソッドは、指定されたオブジェクトのプロトタイプ (つまり、内部プロパティ <code>[[Prototype]]</code> の値) を返します。</p> + +<div>{{EmbedInteractiveExample("pages/js/object-getprototypeof.html")}}</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">Object.getPrototypeOf(<var>obj</var>)</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code><var>obj</var></code></dt> + <dd>プロトタイプを取得したいオブジェクト。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>指定されたオブジェクトのプロトタイプです。何も継承していないオブジェクトの場合は {{jsxref("null")}} です。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Using_getPrototypeOf" name="Using_getPrototypeOf">getPrototypeOf の使用</h3> + +<pre class="brush: js notranslate">var proto = {}; +var obj = Object.create(proto); +Object.getPrototypeOf(obj) === proto; // true +</pre> + +<h3 id="Non-object_coercion" name="Non-object_coercion">オブジェクト以外の型変換</h3> + +<p>ES5 では引数 <var>obj</var> がオブジェクトではない場合 {{jsxref("TypeError")}} が発生します。しかし ES2015 では対応する {{jsxref("Object")}} に変換されてから処理されます。</p> + +<pre class="brush: js notranslate">Object.getPrototypeOf('foo'); +// TypeError: "foo" is not an object (ES5 code) +Object.getPrototypeOf('foo'); +// String.prototype (ES2015 code) +</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-object.getprototypeof', 'Object.getPrototypeOf')}}</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.Object.getPrototypeOf")}}</p> + +<h3 id="Opera-specific_notes" name="Opera-specific_notes">Opera 固有のメモ</h3> + +<p>古いバージョンの Opera は <code>Object.getPrototypeOf()</code> に対応していませんが、 Opera 10.50 以降で標準外の {{jsxref("Object.proto", "__proto__")}} に対応しています。</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Object.prototype.isPrototypeOf()")}}</li> + <li>{{jsxref("Object.setPrototypeOf()")}}</li> + <li>{{jsxref("Object.prototype.__proto__")}}</li> + <li>John Resig 氏の記事 : <a href="http://ejohn.org/blog/objectgetprototypeof/">getPrototypeOf</a></li> + <li>{{jsxref("Reflect.getPrototypeOf()")}}</li> +</ul> diff --git a/files/ja/web/javascript/reference/global_objects/object/hasownproperty/index.html b/files/ja/web/javascript/reference/global_objects/object/hasownproperty/index.html new file mode 100644 index 0000000000..177ea1a986 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/object/hasownproperty/index.html @@ -0,0 +1,146 @@ +--- +title: Object.prototype.hasOwnProperty() +slug: Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty +tags: + - JavaScript + - Method + - Object + - Prototype + - hasOwnProperty + - メソッド +translation_of: Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty +--- +<div>{{JSRef}}</div> + +<p><strong><code>hasOwnProperty()</code></strong> メソッドは、オブジェクト自身が（継承されていない）指定されたプロパティを持っているかどうかを示す真偽値を返します。</p> + +<div>{{EmbedInteractiveExample("pages/js/object-prototype-hasownproperty.html")}}</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"><var>obj</var>.hasOwnProperty(<var>prop</var>)</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><var>prop</var></dt> + <dd>テストするプロパティの名前の {{jsxref("String")}} または {{Glossary("Symbol")}} 。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>{{jsxref("Boolean")}} で、オブジェクトが指定されたプロパティを自身のプロパティとして持っているかどうかを示す</p> + +<h2 id="Description" name="Description">解説</h2> + +<p>{{jsxref("Object")}} のすべての子孫は <code>hasOwnProperty</code> メソッドを継承しています。このメソッドはあるオブジェクトが指定されたプロパティを、そのオブジェクトの直接のプロパティとして持っているかどうかを特定するのに使うことができます。 {{jsxref("Operators/in", "in")}} 演算子とは異なり、このメソッドはオブジェクトのプロトタイプチェーンをたどってチェックしません。 {{jsxref("Object")}} が {{jsxref("Array")}} の場合、 <code>hasOwnProperty</code> メソッドはある添字が存在するかどうかを調べることができます。</p> + +<h2 id="Note" name="Note">注</h2> + +<p><code>hasOwnProperty</code> はプロパティの値が <code>null</code> または <code>undefined</code> であっても true を返します。</p> + +<pre class="brush: js notranslate">o = new Object(); +o.propOne = null; +o.hasOwnProperty('propOne'); // true を返す +o.propTwo = undefined; +o.hasOwnProperty('propTwo'); // true を返す +</pre> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Using_hasOwnProperty_to_test_for_a_propertys_existence" name="Using_hasOwnProperty_to_test_for_a_property's_existence">hasOwnProperty を使ってプロパティの存在を調べる</h3> + +<p>オブジェクト <code>o</code> が <code>prop</code> という名前のプロパティを持っているかどうかを特定する例を以下に示します。</p> + +<pre class="brush: js notranslate">o = new Object(); +o.hasOwnProperty('prop'); // false を返す +o.prop = 'exists'; +o.hasOwnProperty('prop'); // true を返す +</pre> + +<h3 id="Direct_versus_inherited_properties" name="Direct_versus_inherited_properties">直接のプロパティと継承されたプロパティ</h3> + +<p>以下の例では、直接のプロパティとプロトタイプチェーンを通じて継承されたプロパティを区別します。</p> + +<pre class="brush: js notranslate">o = new Object(); +o.prop = 'exists'; +o.hasOwnProperty('prop'); // true を返す +o.hasOwnProperty('toString'); // false を返す +o.hasOwnProperty('hasOwnProperty'); // false を返す +</pre> + +<h3 id="Iterating_over_the_properties_of_an_object" name="Iterating_over_the_properties_of_an_object">オブジェクトのプロパティの反復処理</h3> + +<p>以下の例では、継承されたプロパティを除いてオブジェクトのプロパティを反復処理する方法を示します。なお、 {{jsxref("Statements/for...in", "for...in")}} ループですでに列挙可能なアイテムのみが反復処理されるので、 <code>hasOwnProperty</code> 自体は列挙可能なアイテムに厳密に限定されているため、ループ内に列挙できないプロパティが見られないことに基づいて想定するべきではありません ({{jsxref("Object.getOwnPropertyNames()")}} のように)。</p> + +<pre class="brush: js notranslate">var buz = { + fog: 'stack' +}; + +for (var name in buz) { + if (buz.hasOwnProperty(name)) { + console.log('this is fog (' + + name + ') for sure. Value: ' + buz[name]); + } + else { + console.log(name); // toString or something else + } +} +</pre> + +<h3 id="Using_hasOwnProperty_as_a_property_name" name="Using_hasOwnProperty_as_a_property_name">プロパティ名としての hasOwnProperty の使用</h3> + +<p>JavaScript は <code>hasOwnProperty</code> というプロパティ名を保護していません。したがって、オブジェクトがこの名前のプロパティを持っている場合が存在すれば、正しい結果を得るためには<em>外部の</em> <code>hasOwnProperty</code> を使用する必要があります。</p> + +<pre class="brush: js notranslate">var foo = { + hasOwnProperty: function() { + return false; + }, + bar: 'Here be dragons' +}; + +foo.hasOwnProperty('bar'); // 常に false を返す + +// 別な Object の hasOwnProperty 使用して、 +// this を foo に設定して呼び出す +({}).hasOwnProperty.call(foo, 'bar'); // true + +// この目的では、 Object プロトタイプの hasOwnProperty プロパティを +// 使用することもできます。 +Object.prototype.hasOwnProperty.call(foo, 'bar'); // true +</pre> + +<p>なお、後者の場合は新しくオブジェクトを生成しません。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.prototype.hasownproperty', 'Object.prototype.hasOwnProperty')}}</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.Object.hasOwnProperty")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Enumerability_and_ownership_of_properties">プロパティの列挙可能性と所有権</a></li> + <li>{{jsxref("Object.getOwnPropertyNames()")}}</li> + <li>{{jsxref("Statements/for...in", "for...in")}}</li> + <li>{{jsxref("Operators/in", "in")}}</li> + <li><a href="/ja/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">継承とプロトタイプチェーン</a></li> +</ul> diff --git a/files/ja/web/javascript/reference/global_objects/object/index.html b/files/ja/web/javascript/reference/global_objects/object/index.html new file mode 100644 index 0000000000..15b8d88d07 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/object/index.html @@ -0,0 +1,287 @@ +--- +title: Object +slug: Web/JavaScript/Reference/Global_Objects/Object +tags: + - Constructor + - JavaScript + - Object + - コンストラクター +translation_of: Web/JavaScript/Reference/Global_Objects/Object +--- +<div>{{JSRef}}</div> + +<p><code><strong>Object</strong></code> クラスは <a href="/ja/docs/Web/JavaScript/Data_structures">JavaScript のデータ型</a>の一つを表します。これは様々なキー付きコレクションとより複雑な実態を格納するために使用されます。Object は {{jsxref("Object/Object", "Object()")}} コンストラクターまたは<a href="/ja/docs/Web/JavaScript/Reference/Operators/Object_initializer">オブジェクト初期化子/リテラル構文</a>を使用して生成することができます。</p> + +<h2 id="Description" name="Description">解説</h2> + +<p>JavaScript のほぼすべてのオブジェクトが {{jsxref("Object")}} のインスタンスです。一般的なオブジェクトは、プロパティを (メソッドを含めて) <code>Object.prototype</code> から継承していますが、これらのプロパティはシャドウ化 (別名オーバーライド) されている場合があります。しかし、意図的にそうではない <code>Object</code> を生成したり (例えば {{jsxref("Object.create", "Object.create(null)")}} によって)、変更した結果そうではなくなる場合 (例えば {{jsxref("Object.setPrototypeOf")}}) もあります。</p> + +<p><code>Object</code> プロトタイプオブジェクトへの変更は、その変更の対象となるプロパティやメソッドがプロトタイプチェーンに沿ってさらにオーバーライドされない限り、プロトタイプチェーンを通してすべてのオブジェクトに表示されます。これはとても強力ですが、オブジェクトの動作をオーバーライドしたり拡張したりするのは潜在的に危険をはらむ仕組みでもあります。</p> + +<p><code>Object</code> コンストラクターは、指定された値のオブジェクトラッパーを生成します。</p> + +<ul> + <li>値が {{jsxref("null")}} または {{jsxref("undefined")}} である場合、空のオブジェクトを生成して返します。</li> + <li>それ以外の場合は、与えられた値に関連する型のオブジェクトを返します。</li> + <li>値がすでにオブジェクトであった場合は、その値を返します。</li> +</ul> + +<p>コンストラクター以外のコンテキストで呼び出された場合、<code>Object</code> は <code>new Object()</code> と同等に動作します。</p> + +<p><a href="/ja/docs/Web/JavaScript/Reference/Operators/Object_initializer">オブジェクト初期化子/リテラル構文</a>も参照してください。</p> + +<h3 id="Deleting_a_property_from_an_object" name="Deleting_a_property_from_an_object">オブジェクトからプロパティを削除する</h3> + +<p>オブジェクト自体には、自身のプロパティを削除するメソッドはありません ( {{jsxref("Map.prototype.delete", "Map.prototype.delete()")}}) など)。これを行うには、<a href="/ja/docs/Web/JavaScript/Reference/Operators/delete">delete 演算子</a>を使用する必要があります。</p> + +<h2 id="Constructor" name="Constructor">コンストラクター</h2> + +<dl> + <dt>{{jsxref("Object/Object", "Object()")}}</dt> + <dd><code>Object</code> コンストラクターは指定された値のオブジェクトラッパーを生成します。</dd> +</dl> + +<h2 id="Static_methods" name="Static_methods">静的メソッド</h2> + +<dl> + <dt>{{jsxref("Object.assign","Object.assign()")}}</dt> + <dd>1 個以上のソースオブジェクトから、自身の列挙可能なプロパティの値をすべてターゲットオブジェクトにコピーします。</dd> + <dt>{{jsxref("Object.create","Object.create()")}}</dt> + <dd>指定されたプロトタイプオブジェクトとプロパティから、新しいオブジェクトを生成します。</dd> + <dt>{{jsxref("Object.defineProperty","Object.defineProperty()")}}</dt> + <dd>指定された記述子で記述された名前付きプロパティをオブジェクトへ追加します。</dd> + <dt>{{jsxref("Object.defineProperties","Object.defineProperties()")}}</dt> + <dd>指定された記述子で記述された複数の名前付きプロパティをオブジェクトへ追加します。</dd> + <dt>{{jsxref("Object.entries","Object.entries()")}}</dt> + <dd>指定したオブジェクトの<strong>自身の</strong>列挙可能な文字列プロパティのすべての <code>[key, value]</code> ペアを含む配列を返します。</dd> + <dt>{{jsxref("Object.freeze","Object.freeze()")}}</dt> + <dd>オブジェクトを凍結します。他のコードがプロパティを削除したり変更したりすることができなくなります。</dd> + <dt>{{jsxref("Object.fromEntries","Object.fromEntries()")}}</dt> + <dd>反復可能な <code>[key, value]</code> の組から新しいオブジェクトを返します。(これは {{jsxref("Object.entries")}} の逆です。)</dd> + <dt>{{jsxref("Object.getOwnPropertyDescriptor","Object.getOwnPropertyDescriptor()")}}</dt> + <dd>オブジェクトの名前付きプロパティに対応するプロパティ記述子を返します。</dd> + <dt>{{jsxref("Object.getOwnPropertyDescriptors","Object.getOwnPropertyDescriptors()")}}</dt> + <dd>オブジェクトの自身のすべてのプロパティの記述子を含むオブジェクトを返します。</dd> + <dt>{{jsxref("Object.getOwnPropertyNames","Object.getOwnPropertyNames()")}}</dt> + <dd>指定したオブジェクトの<strong>自身の</strong>列挙可能および列挙不可なすべてのプロパティの名前を、配列として返します。</dd> + <dt>{{jsxref("Object.getOwnPropertySymbols","Object.getOwnPropertySymbols()")}}</dt> + <dd>指定したオブジェクト上に直接存在するすべてのシンボルプロパティからなる配列を返します。</dd> + <dt>{{jsxref("Object.getPrototypeOf","Object.getPrototypeOf()")}}</dt> + <dd>指定されたオブジェクトのプロトタイプ (内部の <code>[[Prototype]]</code> プロパティ) を返します。</dd> + <dt>{{jsxref("Object.is","Object.is()")}}</dt> + <dd>二つの値が同じ値であるかどうかを比較します。<code>NaN</code> 値はすべて同じとして扱われます (抽象的等価比較とも厳密等価比較とも異なります)。</dd> + <dt>{{jsxref("Object.isExtensible","Object.isExtensible()")}}</dt> + <dd>オブジェクトの拡張が許可されているかどうかを判定します。</dd> + <dt>{{jsxref("Object.isFrozen","Object.isFrozen()")}}</dt> + <dd>オブジェクトが凍結されているかどうかを判定します。</dd> + <dt>{{jsxref("Object.isSealed","Object.isSealed()")}}</dt> + <dd>オブジェクトが封印されているかどうかを判定します。</dd> + <dt>{{jsxref("Object.keys","Object.keys()")}}</dt> + <dd>指定されたオブジェクト<strong>自身</strong>の列挙可能なプロパティの名前をすべて含む配列を返します。</dd> + <dt>{{jsxref("Object.preventExtensions","Object.preventExtensions()")}}</dt> + <dd>オブジェクトに対するあらゆる拡張を禁止します。</dd> + <dt>{{jsxref("Object.seal","Object.seal()")}}</dt> + <dd>オブジェクトを封印し、オブジェクトのプロパティの削除を禁止します。</dd> + <dt>{{jsxref("Object.setPrototypeOf","Object.setPrototypeOf()")}}</dt> + <dd>プロトタイプ (内部の <code>[[Prototype]]</code> プロパティ) を設定します。</dd> + <dt>{{jsxref("Object.values","Object.values()")}}</dt> + <dd>指定したオブジェクトの<strong>自身</strong>の列挙可能な文字列プロパティのすべてに対応する値を含む配列を返します。</dd> +</dl> + +<h2 id="Instance_properties" name="Instance_properties">インスタンスプロパティ</h2> + +<div> +<dl> + <dt>{{jsxref("Object.prototype.constructor")}}</dt> + <dd>オブジェクトのプロトタイプを生成する関数を指定します。</dd> + <dt>{{jsxref("Object.prototype.__proto__")}}</dt> + <dd>オブジェクトがインスタンス化されたとき、プロトタイプとして使用されたオブジェクトを指します。</dd> + <dt>{{jsxref("Object.prototype.__noSuchMethod__")}}</dt> + <dd>未定義のオブジェクトメンバーがメソッドとして呼び出された際に実行される関数を定義します。</dd> +</dl> +</div> + +<h2 id="Instance_methods" name="Instance_methods">インスタンスメソッド</h2> + +<div> +<dl> + <dt>{{jsxref("Object.prototype.__defineGetter__()")}}</dt> + <dd>指定したプロパティに、アクセスの際に実行されて戻り値を返す関数を関連付けます。</dd> + <dt>{{jsxref("Object.prototype.__defineSetter__()")}}</dt> + <dd>指定したプロパティに、設定の際に実行されてプロパティを変更する関数を関連付けます。</dd> + <dt>{{jsxref("Object.prototype.__lookupGetter__()")}}</dt> + <dd>{{jsxref("Object.prototype.__defineGetter__()", "__defineGetter__()")}} メソッドによって特定のプロパティに関連付けされた関数を返します。</dd> + <dt>{{jsxref("Object.prototype.__lookupSetter__()")}}</dt> + <dd>{{jsxref("Object.prototype.__defineSetter__()", "__defineSetter__()")}} メソッドによって特定のプロパティに関連付けされた関数を返します。</dd> + <dt>{{jsxref("Object.prototype.hasOwnProperty()")}}</dt> + <dd>指定したプロパティが、プロトタイプチェーンを通じて継承されたものではなくオブジェクトが直接持っているプロパティかどうかを示す真偽値を返します。</dd> + <dt>{{jsxref("Object.prototype.isPrototypeOf()")}}</dt> + <dd>指定したオブジェクトが、このメソッドを呼び出した元であるオブジェクトのプロトタイプチェーンにあるかどうかを示す真偽値を返します。</dd> + <dt>{{jsxref("Object.prototype.propertyIsEnumerable()")}}</dt> + <dd>内部の <a href="/ja/docs/Web/JavaScript/Data_structures#Properties">ECMAScript [[Enumerable]] 属性</a> の設定状態を示す真偽値を返します。</dd> + <dt>{{jsxref("Object.prototype.toSource()")}}</dt> + <dd>このメソッドの呼び出し元オブジェクトを表すオブジェクトリテラルからなるソース文字列を返します。この値を使って新しいオブジェクトを作成できます。</dd> + <dt>{{jsxref("Object.prototype.toLocaleString()")}}</dt> + <dd>{{jsxref("Object.toString", "toString()")}} を呼び出します。</dd> + <dt>{{jsxref("Object.prototype.toString()")}}</dt> + <dd>指定したオブジェクトを表す文字列を返します。</dd> + <dt>{{jsxref("Object.prototype.unwatch()")}}</dt> + <dd>オブジェクトのプロパティから代入処理を監視するウォッチポイントを取り除きます。</dd> + <dt>{{jsxref("Object.prototype.valueOf()")}}</dt> + <dd>指定したオブジェクトのプリミティブ値を返します。</dd> + <dt>{{jsxref("Object.prototype.watch()")}}</dt> + <dd>オブジェクトのプロパティに代入処理を監視するウォッチポイントを追加します。</dd> +</dl> +</div> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Using_Object_given_undefined_and_null_types" name="Using_Object_given_undefined_and_null_types"><code>undefined</code> と <code>null</code> データ型を与えられた <code>Object</code> を使用する</h3> + +<p>次の例は、<code>o</code> に空の <code>Object</code> オブジェクトを格納します。</p> + +<pre class="brush: js notranslate">let o = new Object() +</pre> + +<pre class="brush: js notranslate">let o = new Object(undefined) +</pre> + +<pre class="brush: js notranslate">let o = new Object(null) +</pre> + +<h3 id="Using_Object_to_create_Boolean_objects" name="Using_Object_to_create_Boolean_objects"><code>Boolean</code> オブジェクトの生成に <code>Object</code> を使用する</h3> + +<p>次の例は、<code>o</code> に {{jsxref("Boolean")}} オブジェクトを格納します。</p> + +<pre class="brush: js notranslate">// o = new Boolean(true) に同じ +let o = new Object(true) +</pre> + +<pre class="brush: js notranslate">// to o = new Boolean(false) に同じ +let o = new Object(Boolean()) +</pre> + +<h3 id="Object_prototypes" name="Object_prototypes">オブジェクトのプロトタイプ</h3> + +<p><code>Object.prototype</code> の既存のメソッドの動作を変更する場合は、既存のロジックの前または後で独自の拡張を囲む形でコードを挿入するようにしてください。例えば、この (テストされていない) コードは、組込みロジックや誰かの拡張機能が実行される前に、条件付きで独自のロジックを実行します。</p> + +<p>関数が呼び出されると、呼び出す引数は配列状「変数」 <a href="/ja/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a> に保持されます。例えば <code>myFn(a, b, c)</code> の呼び出しでは、myFn の本体内での引数は (a, b, c) に対応する 3 つの配列状要素を含みます。</p> + +<p>フックを使ってプロトタイプを変更する場合は、関数で <code>apply()</code> を呼び出すことで、<code>this</code> と引数 (呼び出し状態) を現在の動作に渡します。このパターンは、<code>Node.prototype</code> や <code>Function.prototype</code> など、どんなプロトタイプにも使えます。</p> + +<pre class="brush: js notranslate">var current = Object.prototype.valueOf; + +// Since my property "-prop-value" is cross-cutting and isn't always +// on the same prototype chain, I want to modify Object.prototype: +Object.prototype.valueOf = function() { + if (this.hasOwnProperty('-prop-value')) { + return this['-prop-value']; + } else { + // It doesn't look like one of my objects, so let's fall back on + // the default behavior by reproducing the current behavior as best we can. + // The apply behaves like "super" in some other languages. + // Even though valueOf() doesn't take arguments, some other hook may. + return current.apply(this, arguments); + } +} +</pre> + +<p>JavaScript はサブクラスオブジェクトを持っていないため、プロトタイプはオブジェクトとして機能する特定の関数の「基本クラス」オブジェクトを作成するための有用な回避策です。例えば、以下のようになります。</p> + +<pre class="brush: js notranslate">var Person = function(name) { + this.name = name; + this.canTalk = true; +}; + +Person.prototype.greet = function() { + if (this.canTalk) { + console.log('Hi, I am ' + this.name); + } +}; + +var Employee = function(name, title) { + Person.call(this, name); + this.title = title; +}; + +Employee.prototype = Object.create(Person.prototype); +Employee.prototype.constructor = Employee; //If you don't set Object.prototype.constructor to Employee, + //it will take prototype.constructor of Person (parent). + //To avoid that, we set the prototype.constructor to Employee (child). + + +Employee.prototype.greet = function() { + if (this.canTalk) { + console.log('Hi, I am ' + this.name + ', the ' + this.title); + } +}; + +var Customer = function(name) { + Person.call(this, name); +}; + +Customer.prototype = Object.create(Person.prototype); +Customer.prototype.constructor = Customer; //If you don't set Object.prototype.constructor to Customer, + //it will take prototype.constructor of Person (parent). + //To avoid that, we set the prototype.constructor to Customer (child). + + +var Mime = function(name) { + Person.call(this, name); + this.canTalk = false; +}; + +Mime.prototype = Object.create(Person.prototype); +Mime.prototype.constructor = Mime; //If you don't set Object.prototype.constructor to Mime, + //it will take prototype.constructor of Person (parent). + //To avoid that, we set the prototype.constructor to Mime (child). + + +var bob = new Employee('Bob', 'Builder'); +var joe = new Customer('Joe'); +var rg = new Employee('Red Green', 'Handyman'); +var mike = new Customer('Mike'); +var mime = new Mime('Mime'); + +bob.greet(); +// Hi, I am Bob, the Builder + +joe.greet(); +// Hi, I am Joe + +rg.greet(); +// Hi, I am Red Green, the Handyman + +mike.greet(); +// Hi, I am Mike + +mime.greet();</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-object-objects', 'Object')}}</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.Object")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Object_initializer">オブジェクト初期化子</a></li> +</ul> diff --git a/files/ja/web/javascript/reference/global_objects/object/is/index.html b/files/ja/web/javascript/reference/global_objects/object/is/index.html new file mode 100644 index 0000000000..ab871c5ab4 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/object/is/index.html @@ -0,0 +1,125 @@ +--- +title: Object.is() +slug: Web/JavaScript/Reference/Global_Objects/Object/is +tags: + - Comparison + - Condition + - Conditional + - ECMAScript 2015 + - Equality + - JavaScript + - Method + - Object +translation_of: Web/JavaScript/Reference/Global_Objects/Object/is +--- +<div>{{JSRef}}</div> + +<p><strong><code>Object.is()</code></strong> メソッドは 2 つの値が<a href="/ja/docs/Web/JavaScript/Equality_comparisons_and_sameness">同一値</a>であるかどうかを判定します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><code>Object.is(<var>value1</var>, <var>value2</var>);</code></pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code><var>value1</var></code></dt> + <dd>比較する 1 つ目の値。</dd> + <dt><code><var>value2</var></code></dt> + <dd>比較する 2 つ目の値。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>{{jsxref("Boolean")}} で、 2 つの引数が同一値であるかどうかを表します。</p> + +<h2 id="Description" name="Description">解説</h2> + +<p><code>Object.is()</code> は 2 つの値が<a href="/ja/docs/Web/JavaScript/Equality_comparisons_and_sameness">同一値</a>であるかどうかを判定します。2 つの値が以下の規則の一つに当てはまる場合に同一となります。</p> + +<ul> + <li>どちらも {{jsxref("undefined")}}</li> + <li>どちらも {{jsxref("null")}}</li> + <li>どちらも <code>true</code> かどちらも <code>false</code></li> + <li>どちらも同じ文字からなる同じ長さの文字列</li> + <li>どちらも同じオブジェクト</li> + <li>どちらも数で、 + <ul> + <li>どちらも <code>+0</code></li> + <li>どちらも <code>-0</code></li> + <li>どちらも {{jsxref("NaN")}}</li> + <li>あるいはどちらもゼロ以外で {{jsxref("NaN")}} でなく、同じ数値を持つ</li> + </ul> + </li> +</ul> + +<p>このメソッドは {{jsxref("Operators/Comparison_Operators", "==", "#Equality")}} 演算子による等値比較と同じものでは<strong>ありません</strong>。 <code>==</code> 演算子は等値性比較の前に (同じ型でなければ) 両辺に対して様々な型変換を適用します (結果、例えば <code>"" == false</code> は <code>true</code> に評価されます) が、<code>Object.is</code> は両辺どちらの値にも型変換を行いません。</p> + +<p>また {{jsxref("Operators/Comparison_Operators", "===", "#Identity")}} 演算子による同値比較とも同じものでも<strong>ありません</strong>。 <code>===</code> 演算子は (そして <code>==</code> 演算子も) 数値 <code>-0</code> と <code>+0</code> は同じものとして扱い、 {{jsxref("Number.NaN")}} と {{jsxref("NaN")}} は異なるものとして扱います。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Using_Object.is" name="Using_Object.is">Object.is の使用</h3> + +<pre class="brush: js notranslate">Object.is('foo', 'foo'); // true +Object.is(window, window); // true + +Object.is('foo', 'bar'); // false +Object.is([], []); // false + +var foo = { a: 1 }; +var bar = { a: 1 }; +Object.is(foo, foo); // true +Object.is(foo, bar); // false + +Object.is(null, null); // true + +// 特殊なケース +Object.is(0, -0); // false +Object.is(-0, -0); // true +Object.is(NaN, 0/0); // true +</pre> + +<h2 id="Polyfill" name="Polyfill">ポリフィル</h2> + +<pre class="brush: js notranslate">if (!Object.is) { + Object.defineProperty(Object, "is", { + value: function (x, y) { + // 同値アルゴリズム + if (x === y) { // ステップ 1 から 5、および 7 から 10 + // ステップ 6.b から 6.e までの場合: +0 != -0 + return x !== 0 || 1 / x === 1 / y; + } else { + // ステップ 6.a の場合: NaN == NaN + return x !== x && y !== y; + } + } + }); +}</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-object.is', 'Object.is')}}</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.Object.is")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/JavaScript/Equality_comparisons_and_sameness">等値比較と同一性</a> — 標準搭載されている 3 つの同一性比較支援機能の比較</li> +</ul> diff --git a/files/ja/web/javascript/reference/global_objects/object/isextensible/index.html b/files/ja/web/javascript/reference/global_objects/object/isextensible/index.html new file mode 100644 index 0000000000..048fc8733d --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/object/isextensible/index.html @@ -0,0 +1,103 @@ +--- +title: Object.isExtensible() +slug: Web/JavaScript/Reference/Global_Objects/Object/isExtensible +tags: + - ECMAScript 5 + - JavaScript + - JavaScript 1.8.5 + - Method + - Object +translation_of: Web/JavaScript/Reference/Global_Objects/Object/isExtensible +--- +<div>{{JSRef}}</div> + +<p><strong><code>Object.isExtensible()</code></strong> メソッドは、オブジェクトが拡張可能であるか (新しいプロパティを追加することができるかどうか) を判定します。</p> + +<div>{{EmbedInteractiveExample("pages/js/object-isextensible.html")}}</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">Object.isExtensible(<var>obj</var>)</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code><var>obj</var></code></dt> + <dd>チェックするオブジェクトです。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>{{jsxref("Boolean")}} で、与えられたオブジェクトが拡張可能であるかどうかを示します。</p> + +<h2 id="Description" name="Description">解説</h2> + +<p>オブジェクトは既定では拡張可能です。つまり、新しいプロパティの追加が可能であり、 ({{jsxref("Object.proto", "__proto__")}} のプロパティに対応しているエンジンでは) <code>__proto__</code> プロパティを変更することができます。オブジェクトは {{jsxref("Object.preventExtensions()")}}, {{jsxref("Object.seal()")}}, {{jsxref("Object.freeze()")}} の何れかを用いる事で拡張不能に設定する事が可能です。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Using_Object.isExtensible" name="Using_Object.isExtensible">Object.isExtensible の使用</h3> + +<pre class="brush: js notranslate">// 新規のオブジェクトは拡張可能 +var empty = {}; +Object.isExtensible(empty); // === true + +// その設定は変える事が可能 +Object.preventExtensions(empty); +Object.isExtensible(empty); // === false + +// seal メソッドで封印されたオブジェクトは拡張不可と定義される +var sealed = Object.seal({}); +Object.isExtensible(sealed); // === false + +// freeze メソッドで凍結されたオブジェクトも拡張不可と定義される +var frozen = Object.freeze({}); +Object.isExtensible(frozen); // === false +</pre> + +<h3 id="Non-object_coercion" name="Non-object_coercion">オブジェクト以外の型強制</h3> + +<p>ES5 では、このメソッドの引数がオブジェクトではない場合 (プリミティブの場合)、 {{jsxref("TypeError")}} が発生します。 ES2015 以降では、オブジェクトでない引数は、それが拡張不可能な通常のオブジェクトであるかのように扱われ、単に <code>false</code> を返します。</p> + +<pre class="brush: js notranslate">Object.isExtensible(1); +// TypeError: 1 is not an object (ES5 code) + +Object.isExtensible(1); +// false (ES2015 code) +</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-object.isextensible', 'Object.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.Object.isExtensible")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Object.preventExtensions()")}}</li> + <li>{{jsxref("Object.seal()")}}</li> + <li>{{jsxref("Object.isSealed()")}}</li> + <li>{{jsxref("Object.freeze()")}}</li> + <li>{{jsxref("Object.isFrozen()")}}</li> + <li>{{jsxref("Reflect.isExtensible()")}}</li> +</ul> diff --git a/files/ja/web/javascript/reference/global_objects/object/isfrozen/index.html b/files/ja/web/javascript/reference/global_objects/object/isfrozen/index.html new file mode 100644 index 0000000000..14526c51f8 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/object/isfrozen/index.html @@ -0,0 +1,167 @@ +--- +title: Object.isFrozen() +slug: Web/JavaScript/Reference/Global_Objects/Object/isFrozen +tags: + - ECMAScript 5 + - JavaScript + - Method + - Object +translation_of: Web/JavaScript/Reference/Global_Objects/Object/isFrozen +--- +<div>{{JSRef}}</div> + +<p><strong><code>Object.isFrozen()</code></strong> はオブジェクトが{{jsxref("Object.freeze()", "凍結されている", "", 1)}}かどうかを判定します。</p> + +<div>{{EmbedInteractiveExample("pages/js/object-isfrozen.html")}}</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">Object.isFrozen(<var>obj</var>)</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code><var>obj</var></code></dt> + <dd>確認したいオブジェクトです。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>与えられたオブジェクトが凍結されているかどうかを示す {{jsxref("Boolean")}}。</p> + +<h2 id="Description" name="Description">解説</h2> + +<p>オブジェクトが{{jsxref("Object.isExtensible()", "拡張可能", "", 1)}}ではなく、すべてのプロパティは設定変更不可であり、そしてすべてのデータプロパティ (これはゲッターやセッターコンポーネントを持つアクセサプロパティではないものを指します) が書き込み不可である場合に、凍結されているとなります。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Object.isFrozen_の使用">Object.isFrozen の使用</h3> + +<pre class="brush: js notranslate">// 新しいオブジェクトは拡張可能であるので、凍結されていません +Object.isFrozen({}); // === false + +// 拡張可能ではない空のオブジェクトは、他に何もしなくても +// 凍結されています +var vacuouslyFrozen = Object.preventExtensions({}); +Object.isFrozen(vacuouslyFrozen); // === true + +// プロパティをひとつ持つ新しいオブジェクトも拡張可能であり、 +// それゆえ凍結されていません +var oneProp = { p: 42 }; +Object.isFrozen(oneProp); // === false + +// オブジェクトを拡張不可にしても、それは凍結されません +// なぜなら、まだプロパティが設定変更可能 +// (かつ書き込み可能) であるからです +Object.preventExtensions(oneProp); +Object.isFrozen(oneProp); // === false + +// ...しかしプロパティを削除すると、そのオブジェクトは +// 他に何もしなくても凍結されます +delete oneProp.p; +Object.isFrozen(oneProp); // === true + +// 書き込み不可であるが設定変更可能なプロパティを持つ、 +// 拡張不可のオブジェクトは、凍結されていません +var nonWritable = { e: 'plep' }; +Object.preventExtensions(nonWritable); +Object.defineProperty(nonWritable, 'e', { + writable: false +}); // 書き込み不可にします +Object.isFrozen(nonWritable); // === false + +// プロパティを設定変更不可にすると、 +// オブジェクトは凍結されます +Object.defineProperty(nonWritable, 'e', { + configurable: false +}); // 設定変更不可にします +Object.isFrozen(nonWritable); // === true + +// 設定変更不可であるが書き込み可能なプロパティを持つ、 +// 拡張不可のオブジェクトは、やはり凍結されていません +var nonConfigurable = { release: 'the kraken!' }; +Object.preventExtensions(nonConfigurable); +Object.defineProperty(nonConfigurable, 'release', { + configurable: false +}); +Object.isFrozen(nonConfigurable); // === false + +// プロパティを書き込み不可にすると、オブジェクトは +// 凍結されます +Object.defineProperty(nonConfigurable, 'release', { + writable: false +}); +Object.isFrozen(nonConfigurable); // === true + +// 設定変更可能なアクセサープロパティを持つ拡張不可の +// オブジェクトは、凍結されていません +var accessor = { get food() { return 'yum'; } }; +Object.preventExtensions(accessor); +Object.isFrozen(accessor); // === false + +// ...しかしプロパティを設定変更不可にすると、 +// オブジェクトは凍結されます +Object.defineProperty(accessor, 'food', { + configurable: false +}); +Object.isFrozen(accessor); // === true + +// なお、オブジェクトを凍結するもっとも簡単な方法は、 +// Object.freeze を呼び出すことです +var frozen = { 1: 81 }; +Object.isFrozen(frozen); // === false +Object.freeze(frozen); +Object.isFrozen(frozen); // === true + +// 定義によると、凍結されたオブジェクトは拡張不可です +Object.isExtensible(frozen); // === false + +// また、凍結されたオブジェクトは封印されています +Object.isSealed(frozen); // === true +</pre> + +<h3 id="Non-object_coercion" name="Non-object_coercion">オブジェクト以外の型強制</h3> + +<p>ES5 では、このメソッドの引数がオブジェクトではない場合 (プリミティブの場合)、 {{jsxref("TypeError")}} が発生します。 ES2015 以降では、オブジェクトでない引数は、それが凍結された通常のオブジェクトであるかのように扱われ、単に <code>true</code> を返します。</p> + +<pre class="brush: js notranslate">Object.isFrozen(1); +// TypeError: 1 is not an object (ES5 code) + +Object.isFrozen(1); +// true (ES2015 code) +</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-object.isfrozen', 'Object.isFrozen')}}</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.Object.isFrozen")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Object.freeze()")}}</li> + <li>{{jsxref("Object.preventExtensions()")}}</li> + <li>{{jsxref("Object.isExtensible()")}}</li> + <li>{{jsxref("Object.seal()")}}</li> + <li>{{jsxref("Object.isSealed()")}}</li> +</ul> diff --git a/files/ja/web/javascript/reference/global_objects/object/isprototypeof/index.html b/files/ja/web/javascript/reference/global_objects/object/isprototypeof/index.html new file mode 100644 index 0000000000..c019b11ef9 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/object/isprototypeof/index.html @@ -0,0 +1,113 @@ +--- +title: Object.prototype.isPrototypeOf() +slug: Web/JavaScript/Reference/Global_Objects/Object/isPrototypeOf +tags: + - JavaScript + - Mehtod + - Object + - Prototype + - Reference + - isPrototype +translation_of: Web/JavaScript/Reference/Global_Objects/Object/isPrototypeOf +--- +<div>{{JSRef}}</div> + +<p><code><strong>isPrototypeOf()</strong></code> メソッドは、オブジェクトが別のオブジェクトのプロトタイプチェーンに存在するかどうかを判定します。</p> + +<div>{{EmbedInteractiveExample("pages/js/object-prototype-isprototypeof.html")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<div class="note"> +<p><code>isPrototypeOf()</code> は、{{jsxref("Operators/instanceof", "instanceof")}} 演算子とは異なります。"<code>object instanceof AFunction</code>" 式では、<code>object</code> のプロトタイプチェーンは <code>AFunction</code> 自身ではなく、<code>AFunction.prototype</code> に対して判定されます。</p> +</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><var>prototypeObj</var>.isPrototypeOf(<var>object</var>)</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code><var>object</var></code></dt> + <dd>プロトタイプチェーンの検索対象。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>呼び出されたオブジェクトがプロトタイプチェーン内に指定されたオブジェクトを持つかどうかを示す {{jsxref("Boolean")}}。</p> + +<h3 id="Errors_thrown" name="Errors_thrown">発生するエラー</h3> + +<dl> + <dt>{{jsxref("TypeError")}}</dt> + <dd><code><var>prototypeObj</var></code> が undefined か null の場合、{{jsxref("TypeError")}} 発生する</dd> +</dl> + +<h2 id="Description" name="Description">解説</h2> + +<p><code>isPrototypeOf()</code> を用いると、オブジェクトが別のオブジェクト内のプロトタイプチェーンに存在するかどうかをチェックする事ができます。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Using_isPrototypeOf" name="Using_isPrototypeOf">isPrototypeOf の使用</h3> + +<p>この例は、<code>baz</code> オブジェクトのプロトタイプチェーンに、<code>Baz.prototype</code> と <code>Bar.prototype</code>、<code>Foo.prototype</code>、<code>Object.prototype</code> が存在しているデモです。</p> + +<pre class="brush: js notranslate">function Foo() {} +function Bar() {} +function Baz() {} + +Bar.prototype = Object.create(Foo.prototype); +Baz.prototype = Object.create(Bar.prototype); + +var baz = new Baz(); + +console.log(Baz.prototype.isPrototypeOf(baz)); // true +console.log(Bar.prototype.isPrototypeOf(baz)); // true +console.log(Foo.prototype.isPrototypeOf(baz)); // true +console.log(Object.prototype.isPrototypeOf(baz)); // true +</pre> + +<p><code>isPrototypeOf()</code> メソッドは、{{jsxref("Operators/instanceof", "instanceof")}} 演算子と同様に、特定のプロトタイプチェーンから継承されたオブジェクトを扱うときにのみ機能するコードを持つ場合、たとえばそのオブジェクトに特定のメソッドやプロパティが存在することを保証する場合に特に便利です。</p> + +<p>たとえば、<code>baz</code> オブジェクトが <code>Foo.prototype</code> に由来しているか検証してみます:</p> + +<pre class="brush: js notranslate">if (Foo.prototype.isPrototypeOf(baz)) { + // do something safe +} +</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-object.prototype.isprototypeof', 'Object.prototype.isPrototypeOf')}}</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.Object.isPrototypeOf")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Operators/instanceof", "instanceof")}}</li> + <li>{{jsxref("Object.getPrototypeOf()")}}</li> + <li> + <div>{{jsxref("Object.setPrototypeOf()")}}</div> + </li> + <li>{{jsxref("Object.prototype.__proto__")}} </li> +</ul> diff --git a/files/ja/web/javascript/reference/global_objects/object/issealed/index.html b/files/ja/web/javascript/reference/global_objects/object/issealed/index.html new file mode 100644 index 0000000000..1daa6cf391 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/object/issealed/index.html @@ -0,0 +1,130 @@ +--- +title: Object.isSealed() +slug: Web/JavaScript/Reference/Global_Objects/Object/isSealed +tags: + - ECMAScript 5 + - JavaScript + - JavaScript 1.8.5 + - Method + - Object +translation_of: Web/JavaScript/Reference/Global_Objects/Object/isSealed +--- +<div>{{JSRef}}</div> + +<p><strong><code>Object.isSealed()</code></strong> メソッドは、オブジェクトが封印されているかどうかを判定します。</p> + +<div>{{EmbedInteractiveExample("pages/js/object-issealed.html")}}</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">Object.isSealed(<var>obj</var>)</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code><var>obj</var></code></dt> + <dd>確認したいオブジェクトです。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>与えられたオブジェクトが封印されているかどうかを示す {{jsxref("Boolean")}}。</p> + +<h2 id="Description" name="Description">解説</h2> + +<p>オブジェクトが封印されている場合は <code>true</code> が、そうでない場合は <code>false</code> が返ります。オブジェクトが{{jsxref("Object.isExtensible", "拡張不可", "", 1)}}かつすべてのプロパティが設定変更不可であり、それゆえ削除できない場合 (ただし書き込み不可である必要はありません) 場合に、封印されているとなります。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Object.isSealed_の使用">Object.isSealed の使用</h3> + +<pre class="brush: js notranslate">// 既定でオブジェクトは封印されていません +var empty = {}; +Object.isSealed(empty); // === false + +// 空のオブジェクトを拡張不可にすると、 +// そのまま封印状態になります +Object.preventExtensions(empty); +Object.isSealed(empty); // === true + +// 空でないオブジェクトでは、そのプロパティをすべて設定変更不可にしない限り +// 上記と同じにはなりません +var hasProp = { fee: 'fie foe fum' }; +Object.preventExtensions(hasProp); +Object.isSealed(hasProp); // === false + +// そこですべてのプロパティを設定変更不可にすると、 +// オブジェクトは封印状態になります +Object.defineProperty(hasProp, 'fee', { + configurable: false +}); +Object.isSealed(hasProp); // === true + +// オブジェクトを封印する最も簡単な方法は、 +// もちろん Object.seal です +var sealed = {}; +Object.seal(sealed); +Object.isSealed(sealed); // === true + +// 封印されたオブジェクトはその定義により、拡張できません +Object.isExtensible(sealed); // === false + +// 封印されたオブジェクトは凍結されているかも +// しれませんが、必ずしもそうではありません +Object.isFrozen(sealed); // === true +// すべてのプロパティが書き込み不能でもあります + +var s2 = Object.seal({ p: 3 }); +Object.isFrozen(s2); // === false +// "p" は依然書き込み可能です + +var s3 = Object.seal({ get p() { return 0; } }); +Object.isFrozen(s3); // === true +// アクセサプロパティでは設定変更が可能かという事柄だけになります +</pre> + +<h3 id="Non-object_coercion" name="Non-object_coercion">オブジェクト以外の型強制</h3> + +<p>ES5 では、このメソッドの引数がオブジェクトではない場合 (プリミティブの場合)、 {{jsxref("TypeError")}} が発生します。 ES2015 以降では、オブジェクトでない引数は、それが封印された通常のオブジェクトであるかのように扱われ、単に <code>true</code> それを返します。</p> + +<pre class="brush: js notranslate">Object.isSealed(1); +// TypeError: 1 is not an object (ES5 code) + +Object.isSealed(1); +// true (ES2015 code) +</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-object.issealed', 'Object.isSealed')}}</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.Object.isSealed")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Object.seal()")}}</li> + <li>{{jsxref("Object.preventExtensions()")}}</li> + <li>{{jsxref("Object.isExtensible()")}}</li> + <li>{{jsxref("Object.freeze()")}}</li> + <li>{{jsxref("Object.isFrozen()")}}</li> +</ul> diff --git a/files/ja/web/javascript/reference/global_objects/object/keys/index.html b/files/ja/web/javascript/reference/global_objects/object/keys/index.html new file mode 100644 index 0000000000..2e7cc6c595 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/object/keys/index.html @@ -0,0 +1,161 @@ +--- +title: Object.keys() +slug: Web/JavaScript/Reference/Global_Objects/Object/keys +tags: + - ECMAScript 5 + - JavaScript + - JavaScript 1.8.5 + - Method + - Object +translation_of: Web/JavaScript/Reference/Global_Objects/Object/keys +--- +<div>{{JSRef}}</div> + +<p><code><strong>Object.keys()</strong></code> メソッドは、指定されたオブジェクトが持つプロパティの <strong>名前</strong>の配列を、通常のループで取得するのと同じ順序で返します。</p> + +<div>{{EmbedInteractiveExample("pages/js/object-keys.html")}}</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">Object.keys(<var>obj</var>)</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code><var>obj</var></code></dt> + <dd>自身の列挙可能なプロパティが返されるオブジェクトです。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>与えられたオブジェクトのすべての列挙可能なプロパティを表す文字列の配列。</p> + +<h2 id="Description" name="Description">解説</h2> + +<p><code>Object.keys()</code> は、<code>object</code> で直接発見された列挙可能なプロパティに対応する文字列を要素とする配列を返します。プロパティの順序は、オブジェクトのプロパティをループにより手動で取得した場合と同じです。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Using_Object.keys" name="Using_Object.keys">Object.keys の使用</h3> + +<pre class="brush: js notranslate">// 単純な配列 +const arr = ['a', 'b', 'c']; +console.log(Object.keys(arr)); // console: ['0', '1', '2'] + +// オブジェクトのような配列 +const obj = { 0: 'a', 1: 'b', 2: 'c' }; +console.log(Object.keys(obj)); // console: ['0', '1', '2'] + +// キーの順序がランダムなオブジェクトのような配列 +const anObj = { 100: 'a', 2: 'b', 7: 'c' }; +console.log(Object.keys(anObj)); // console: ['2', '7', '100'] + +// getFoo は列挙可能ではないプロパティ +const myObj = Object.create({}, { + getFoo: { + value: function () { return this.foo; } + } +}); +myObj.foo = 1; +console.log(Object.keys(myObj)); // console: ['foo'] +</pre> + +<p>列挙可能ではないものを含むすべてのプロパティを取得したい場合、{{jsxref("Object.getOwnPropertyNames()")}} をご覧ください。</p> + +<h3 id="Non-object_coercion" name="Non-object_coercion">オブジェクト以外の型変換</h3> + +<p>ES5 では、このメソッドへの引数がオブジェクトではない (プリミティブである) 場合、 {{jsxref("TypeError")}} が発生します。</p> + +<p>ES2015 以降では、オブジェクトでない引数はオブジェクトへ変換されるようになりました。</p> + +<pre class="brush: js notranslate">// In ES5 +Object.keys('foo'); // TypeError: "foo" is not an object + +Object.keys('foo'); +// ["0", "1", "2"] (ES2015 code) +</pre> + +<h2 id="Polyfill" name="Polyfill">ポリフィル</h2> + +<p><code>Object.keys</code> にネイティブに対応していない環境向けに互換性を確保するには、以下のコード部品をコピーしてください。</p> + +<pre class="brush: js notranslate">// From https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys +if (!Object.keys) { + Object.keys = (function() { + 'use strict'; + var hasOwnProperty = Object.prototype.hasOwnProperty, + hasDontEnumBug = !({ toString: null }).propertyIsEnumerable('toString'), + dontEnums = [ + 'toString', + 'toLocaleString', + 'valueOf', + 'hasOwnProperty', + 'isPrototypeOf', + 'propertyIsEnumerable', + 'constructor' + ], + dontEnumsLength = dontEnums.length; + + return function(obj) { + if (typeof obj !== 'function' && (typeof obj !== 'object' || obj === null)) { + throw new TypeError('Object.keys called on non-object'); + } + + var result = [], prop, i; + + for (prop in obj) { + if (hasOwnProperty.call(obj, prop)) { + result.push(prop); + } + } + + if (hasDontEnumBug) { + for (i = 0; i < dontEnumsLength; i++) { + if (hasOwnProperty.call(obj, dontEnums[i])) { + result.push(dontEnums[i]); + } + } + } + return result; + }; + }()); +} +</pre> + +<p>上記のコードは IE7 において (もしかすると IE8 でも)、他のウィンドウから渡されたオブジェクトの場合、列挙不可能な key を含むことに注意してください。</p> + +<p>より簡単なブラウザーのポリフィルについては、<a class="external" href="http://tokenposts.blogspot.com.au/2012/04/javascript-objectkeys-browser.html">Javascript - Object.keys Browser Compatibility</a> をご覧ください。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.keys', 'Object.keys')}}</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.Object.keys")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">列挙可能性とプロパティの所有権</a></li> + <li>{{jsxref("Object.prototype.propertyIsEnumerable()")}}</li> + <li>{{jsxref("Object.create()")}}</li> + <li>{{jsxref("Object.getOwnPropertyNames()")}}</li> + <li>{{jsxref("Object.values()")}}</li> + <li>{{jsxref("Object.entries()")}}</li> +</ul> diff --git a/files/ja/web/javascript/reference/global_objects/object/object/index.html b/files/ja/web/javascript/reference/global_objects/object/object/index.html new file mode 100644 index 0000000000..719a697a55 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/object/object/index.html @@ -0,0 +1,84 @@ +--- +title: Object() コンストラクター +slug: Web/JavaScript/Reference/Global_Objects/Object/Object +tags: + - Constructor + - JavaScript + - Object + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Object/Object +--- +<div>{{JSRef}}</div> + +<p><strong><code>Object</code> コンストラクター</strong>は、与えられた値のオブジェクトラッパーを生成します。</p> + +<ul> + <li>その値が {{jsxref("null")}} または {{jsxref("undefined")}} である場合、からのオブジェクトを生成して返します。</li> + <li>その他の場合は、与えらえた値に対応する型のオブジェクトを返します。</li> + <li>値がすでにオブジェクトであった場合は、その値を返します。</li> +</ul> + +<p>コンストラクターではない場面で <code>Object</code> が呼び出された場合は、 <code>new Object()</code> と同様に動作します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">new Object() +new Object(<var>value</var>)</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code><var>value</var></code></dt> + <dd>任意の値。</dd> +</dl> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Creating_a_new_Object" name="Creating_a_new_Object">新しい Object の生成</h3> + +<pre class="brush: js notranslate">let o = new Object() +o.foo = 42 + +console.log(o) +// Object { foo: 42 }</pre> + +<h3 id="Using_Object_given_undefined_and_null_types" name="Using_Object_given_undefined_and_null_types">undefined および null 型が与えられた Object の使用</h3> + +<p>次の例は、空の <code>Object</code> オブジェクトを <code>o</code> に格納します。</p> + +<pre class="brush: js notranslate">let o = new Object() +</pre> + +<pre class="brush: js notranslate">let o = new Object(undefined) +</pre> + +<pre class="brush: js notranslate">let o = new Object(null)</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-object-constructor', 'Object constructor')}}</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.Object.Object")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Object_initializer">オブジェクト初期化子</a></li> +</ul> diff --git a/files/ja/web/javascript/reference/global_objects/object/preventextensions/index.html b/files/ja/web/javascript/reference/global_objects/object/preventextensions/index.html new file mode 100644 index 0000000000..a9c97dd29b --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/object/preventextensions/index.html @@ -0,0 +1,129 @@ +--- +title: Object.preventExtensions() +slug: Web/JavaScript/Reference/Global_Objects/Object/preventExtensions +tags: + - ECMAScript 5 + - JavaScript + - JavaScript 1.8.5 + - Method + - Object +translation_of: Web/JavaScript/Reference/Global_Objects/Object/preventExtensions +--- +<div>{{JSRef}}</div> + +<p><strong><code>Object.preventExtensions()</code></strong> メソッドはすでにプロパティが追加されたオブジェクトで、新しいプロパティを抑制します (すなわち、オブジェクトのさらなる拡張を抑制します)。</p> + +<div>{{EmbedInteractiveExample("pages/js/object-preventextensions.html")}}</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">Object.preventExtensions(<var>obj</var>)</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code><var>obj</var></code></dt> + <dd>拡張を不可能にしたいオブジェクトです。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>拡張不可能にされたオブジェクトです。</p> + +<h2 id="Description" name="Description">解説</h2> + +<p>新しいプロパティを追加できる場合、オブジェクトは拡張可能です。 <code>Object.preventExtensions()</code> はオブジェクトを拡張不可能と標示することで、その時点で持っているプロパティ以外のプロパティを持たせることを不可能にします。拡張不可能なオブジェクトのプロパティは通常、依然として<em>削除</em>できることに注意してください。拡張不可能なオブジェクトへ新たにプロパティを追加しようとしても、暗黙的あるいは {{jsxref("TypeError")}} エラーを発生させて失敗します (通常は {{jsxref("Functions_and_function_scope/Strict_mode", "strict mode", "", 1)}} において、ただしこれに限定はされません)。</p> + +<p><code>Object.preventExtensions()</code> は、自身のプロパティの追加のみを抑制します。オブジェクトプロトタイプにプロパティを追加することは可能です。</p> + +<p>このメソッドは対象の <code>[[prototype]]</code> を不変にし、それ以降のあらゆる <code>[[prototype]]</code> への再代入は {{jsxref("TypeError")}} を発生します。この動作は <code>[[prototype]]</code> 内部プロパティ固有のものであり、他のプロパティは変更可能なままです。</p> + +<p>拡張可能なオブジェクトを拡張不可能にする方法はありますが、逆の方法はありません。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Using_Object.preventExtensions" name="Using_Object.preventExtensions">Object.preventExtensions の使用</h3> + +<pre class="brush: js notranslate">// Object.preventExtensions は拡張不可能にしたオブジェクトを返します +var obj = {}; +var obj2 = Object.preventExtensions(obj); +obj === obj2; // true + +// 既定でオブジェクトは拡張可能です +var empty = {}; +Object.isExtensible(empty); // === true + +// この性質は変更できます +Object.preventExtensions(empty); +Object.isExtensible(empty); // === false + +// Object.defineProperty で拡張不可能なオブジェクトに +// 新しいプロパティを追加する際、エラーが発生します +var nonExtensible = { removable: true }; +Object.preventExtensions(nonExtensible); +Object.defineProperty(nonExtensible, 'new', { + value: 8675309 +}); // TypeError が発生 + +// 厳格モードでは、拡張不可能なオブジェクトに +// 新たなプロパティを追加しようとすると TypeError が発生します +function fail() { + 'use strict'; + // TypeError が発生 + nonExtensible.newProperty = 'FAIL'; +} +fail(); +</pre> + +<p>拡張不可能なオブジェクトのプロトタイプは不変になります。</p> + +<pre class="brush: js notranslate">var fixed = Object.preventExtensions({}); +// TypeError が発生 +fixed.__proto__ = { oh: 'hai' };</pre> + +<h3 id="Non-object_coercion" name="Non-object_coercion">オブジェクト以外の型強制</h3> + +<p>ES5 では、このメソッドの引数がオブジェクトではない場合 (プリミティブの場合)、 {{jsxref("TypeError")}} が発生します。 ES2015 以降では、オブジェクトでない引数は、それが拡張不可能な通常のオブジェクトであるかのように扱われ、単にそれを返します。</p> + +<pre class="brush: js notranslate">Object.preventExtensions(1); +// TypeError: 1 is not an object (ES5 code) + +Object.preventExtensions(1); +// 1 (ES2015 code) +</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-object.preventextensions', 'Object.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.Object.preventExtensions")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Object.isExtensible()")}}</li> + <li>{{jsxref("Object.seal()")}}</li> + <li>{{jsxref("Object.isSealed()")}}</li> + <li>{{jsxref("Object.freeze()")}}</li> + <li>{{jsxref("Object.isFrozen()")}}</li> + <li>{{jsxref("Reflect.preventExtensions()")}}</li> +</ul> diff --git a/files/ja/web/javascript/reference/global_objects/object/propertyisenumerable/index.html b/files/ja/web/javascript/reference/global_objects/object/propertyisenumerable/index.html new file mode 100644 index 0000000000..6fe7395adf --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/object/propertyisenumerable/index.html @@ -0,0 +1,135 @@ +--- +title: Object.prototype.propertyIsEnumerable() +slug: Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable +tags: + - JavaScript + - Method + - Object + - Prototype + - プロトタイプ + - メソッド +translation_of: Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable +--- +<div>{{JSRef}}</div> + +<p> <code><strong>propertyIsEnumerable()</strong></code> メソッドは、指定されたプロパティが列挙可能で、オブジェクト自身のプロパティであることを示す Boolean を返します。</p> + +<div>{{EmbedInteractiveExample("pages/js/object-prototype-propertyisenumerable.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"><code><var>obj</var>.propertyIsEnumerable(<var>prop</var>)</code></pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code>prop</code></dt> + <dd>調べたいプロパティの名前。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>指定されたプロパティが列挙可能であり、かつオブジェクト自体のプロパティであるかどうかを示す {{jsxref("Boolean")}} 。</p> + +<h2 id="Description" name="Description">解説</h2> + +<p>すべてのオブジェクトは <code>propertyIsEnumerable</code> メソッドを持っています。このメソッドはあるオブジェクトのプロパティが、プロトタイプチェーンを通じて継承されたプロパティを除いて {{jsxref("Statements/for...in", "for...in")}} ループで列挙可能かどうかを特定することができます。もしオブジェクトが指定されたプロパティを持っていない場合、このメソッドは <code>false</code> を返します。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="A_basic_use_of_propertyIsEnumerable" name="A_basic_use_of_propertyIsEnumerable"><code>propertyIsEnumerable</code> の基本的な使い方</h3> + +<p>以下の例はオブジェクトと配列での <code>propertyIsEnumerable</code> の使い方を示しています。</p> + +<pre class="brush: js">var o = {}; +var a = []; +o.prop = 'is enumerable'; +a[0] = 'is enumerable'; + +o.propertyIsEnumerable('prop'); // true を返す +a.propertyIsEnumerable(0); // true を返す +</pre> + +<h3 id="User-defined_vs._built-in_objects" name="User-defined_vs._built-in_objects">ユーザー定義オブジェクトと組み込みオブジェクト</h3> + +<p>以下の例はユーザー定義プロパティと組み込みプロパティの列挙可能性を実証しています。</p> + +<pre class="brush: js">var a = ['is enumerable']; + +a.propertyIsEnumerable(0); // true を返す +a.propertyIsEnumerable('length'); // false を返す + +Math.propertyIsEnumerable('random'); // false を返す +this.propertyIsEnumerable('Math'); // false を返す +</pre> + +<h3 id="Direct_versus_inherited_properties" name="Direct_versus_inherited_properties">直接のプロパティと継承されたプロパティ</h3> + +<pre class="brush: js">var a = []; +a.propertyIsEnumerable('constructor'); // false を返す + +function firstConstructor() { + this.property = 'is not enumerable'; +} + +firstConstructor.prototype.firstMethod = function() {}; + +function secondConstructor() { + this.method = function method() { return 'is enumerable'; }; +} + +secondConstructor.prototype = new firstConstructor; +secondConstructor.prototype.constructor = secondConstructor; + +var o = new secondConstructor(); +o.arbitraryProperty = 'is enumerable'; + +o.propertyIsEnumerable('arbitraryProperty'); // true を返す +o.propertyIsEnumerable('method'); // true を返す +o.propertyIsEnumerable('property'); // false を返す + +o.property = 'is enumerable'; + +o.propertyIsEnumerable('property'); // true を返す + +// これらはすべて false を返します。これは、 (最後の2つは for-in で +// 反復処理可能であるにもかかわらず) propertyIsEnumerable が考慮しない +// プロトタイプであるためです。 +o.propertyIsEnumerable('prototype'); // false を返す (as of JS 1.8.1/FF3.6) +o.propertyIsEnumerable('constructor'); // false を返す +o.propertyIsEnumerable('firstMethod'); // 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-object.prototype.propertyisenumerable', 'Object.prototype.propertyIsEnumerable')}}</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.Object.propertyIsEnumerable")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">列挙可能性とプロパティの所有権</a></li> + <li>{{jsxref("Statements/for...in", "for...in")}}</li> + <li>{{jsxref("Object.keys()")}}</li> + <li>{{jsxref("Object.defineProperty()")}}</li> +</ul> diff --git a/files/ja/web/javascript/reference/global_objects/object/proto/index.html b/files/ja/web/javascript/reference/global_objects/object/proto/index.html new file mode 100644 index 0000000000..ac56d688c8 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/object/proto/index.html @@ -0,0 +1,131 @@ +--- +title: Object.prototype.__proto__ +slug: Web/JavaScript/Reference/Global_Objects/Object/proto +tags: + - Deprecated + - ECMAScript 2015 + - JavaScript + - Object + - Property + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Object/proto +--- +<div>{{JSRef}}{{Deprecated_header}} +<div class="blockIndicator warning"> +<p><strong>警告:</strong> オブジェクトの <code>[[Prototype]]</code> を変更することは、最新の JavaScript エンジンがプロパティアクセスを最適化する仕組み上、<strong><em>すべての</em></strong>ブラウザーや JavaScript エンジンにおいて、とても低速な操作となります。プロトタイプの継承関係を変更することによる性能上の影響は微細で広範囲にわたり、単に <code>obj.__proto__ = ...</code> という文の実行時間に留まらず、 <code>[[Prototype]]</code> が変更された<strong><em>いずれかの</em></strong>オブジェクトへのアクセスを持つ<strong><em>あらゆる</em></strong>コードに及ぶ可能性があります。性能を気にしている場合、オブジェクトの <code>[[Prototype]]</code> の変更は避けるべきです。代わりに、 {{JSxRef("Object.create()")}} を使用して意図する <code>[[Prototype]]</code> をもつオブジェクトを新たに生成してください。</p> +</div> + +<div class="blockIndicator warning"> +<p><strong>警告:</strong> <code>Object.prototype.__proto__</code> は現時点でほとんどのブラウザーが対応していますが、そのプロパティの存在と正確な動作は、ウェブブラウザーの互換性を確保するためのレガシー機能として、 ECMAScript 2015 で初めて標準化されました。代わりに {{JSxRef("Object.getPrototypeOf()")}} を使用してください。</p> +</div> +</div> + +<p>{{JSxRef("Object.prototype")}} の <code>__proto__</code> プロパティは、アクセスされるオブジェクトの内部の <code>[[Prototype]]</code> (オブジェクトまたは {{JSxRef("Global_Objects/null", "null")}} のどちらか) を暴露するアクセサプロパティ (ゲッター関数とセッター関数) です。</p> + +<p><code>__proto__</code> の使用は、論争の的になり、推奨されていません。もともと ECMAScript 言語仕様には含まれていませんでしたが、現在のブラウザーでは結局それを実装しています。最近になって、 <code>__proto__</code> プロパティはウェブブラウザー間の互換性を保つために ECMAScript2015 の仕様で標準化されたので、将来的には対応されることになります。これは非推奨扱いで、代わりに {{JSxRef("Object.getPrototypeOf")}}/{{JSxRef("Reflect.getPrototypeOf")}} および {{JSxRef("Object.setPrototypeOf")}}/{{JSxRef("Reflect.setPrototypeOf")}} を推奨しています (とはいえ、オブジェクトの <code>[[Prototype]]</code> の設定は、性能が気になる場合には避けるべき低速の操作ですが)。</p> + +<p>また、<code>__proto__</code> プロパティは、生成時に <code>[[Prototype]]</code> オブジェクトを設定するために {{JSxRef("Object.create()")}} の代わりとしてもオブジェクトリテラルの定義で使用されます。参照: <a href="/docs/Web/JavaScript/Reference/Operators/Object_initializer">オブジェクト初期化子</a></p> + +<h2 id="Description" name="Description">解説</h2> + +<p><code>__proto__</code> ゲッター関数はオブジェクトの内部の <code>[[Prototype]]</code> の値を外部に公開します。オブジェクトリテラルを使用して生成されたオブジェクトでは、この値は {{JSxRef("Object.prototype")}} です。配列リテラルを使用して生成されたオブジェクトでは、この値は {{JSxRef("Array.prototype")}} です。関数では、この値は {{JSxRef("Function.prototype")}} です。 <code>new fun</code> を使用して生成されたオブジェクトでは、 <code>fun</code> が JavaScript の ({{JSxRef("Array")}}、{{JSxRef("Boolean")}}、{{JSxRef("Date")}}、 {{JSxRef("Number")}}、 {{JSxRef("Object")}}、 {{JSxRef("String")}} などによって提供された内蔵コンストラクター関数のうちの一つである場合は — JavaScript の進化によって追加された新しいコンストラクタを含みます)、この値は常に <code>fun.prototype</code> です。 <code>new fun</code> を使用して生成されたオブジェクトでは、 <code>fun</code> がスクリプトで定義された関数である場合、この値は常に <code>fun.prototype</code> の値です。 (すなわち、コンストラクターがほかのオブジェクトを明示的に返さない場合、または <code>fun.prototype</code> に再代入されていない場合)。</p> + +<p><code>__proto__</code> のセッターでオブジェクトの <code>[[Prototype]]</code> を変更することができます。オブジェクトは、 {{JSxRef("Object.isExtensible()")}} に応じて拡張可能である必要があります。拡張可能ではない場合、 {{JSxRef("Global_Objects/TypeError", "TypeError")}} が発生します。与えられた値はオブジェクト、または {{JSxRef("Global_Objects/null", "null")}} である必要があります。他の値が与えられた場合は何もしません。</p> + +<p>プロトタイプが継承のためにどのように使用されるかを理解するには、ガイド記事の<a href="/ja/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain">継承とプロトタイプチェーン</a>を参照してください。</p> + +<p><code>__proto__</code> プロパティは、ゲッター関数とセッター関数からなる {{JSxRef("Object.prototype")}} 上の簡単なアクセサープロパティです。最終的にの {{JSxRef("Object.prototype")}} を参照する <code>__proto__</code> に対してのプロパティアクセスはこのプロパティを探します。しかし、 {{JSxRef("Object.prototype")}} を参照しないアクセスはこのプロパティを探しません。 {{JSxRef("Object.prototype")}} が参照される前にいくつかの他の <code>__proto__</code> プロパティが見つけられた場合、そのプロパティは、 {{JSxRef("Object.prototype")}} 上で見つけられたプロパティを隠します。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Using___proto__" name="Using___proto__">__proto__ の使用</h3> + +<pre class="brush: js notranslate">var Circle = function () {}; +var shape = {}; +var circle = new Circle(); + +// Set the object prototype. +// 非推奨。 参考用です。 実際のコードで使用しないでください。 +shape.__proto__ = circle; + +// オブジェクトのプロトタイプを取得します。 +console.log(shape.__proto__ === circle); // true + +var shape = function () {}; +var p = { + a: function () { + console.log('aaa'); + } +}; +shape.prototype.__proto__ = p; + +var circle = new shape(); +circle.a(); // aaa +console.log(shape.prototype === circle.__proto__); // true + +// or +var shape = function () {}; +var p = { + a: function () { + console.log('a'); + } +}; + +var circle = new shape(); +circle.__proto__ = p; +circle.a(); // a +console.log(shape.prototype === circle.__proto__); // false + +// or +function test() {}; +test.prototype.myname = function () { + console.log('myname'); +}; + +var a = new test(); +console.log(a.__proto__ === test.prototype); // true +a.myname(); // myname + + +// or +var fn = function () {}; +fn.prototype.myname = function () { + console.log('myname'); +}; + +var obj = { + __proto__: fn.prototype +}; + +obj.myname(); // myname +</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-additional-properties-of-the-object.prototype-object', 'Object.prototype.__proto__')}}</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.Object.proto")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{JSxRef("Object.prototype.isPrototypeOf()")}}</li> + <li>{{JSxRef("Object.getPrototypeOf()")}}</li> + <li>{{JSxRef("Object.setPrototypeOf()")}}</li> +</ul> diff --git a/files/ja/web/javascript/reference/global_objects/object/seal/index.html b/files/ja/web/javascript/reference/global_objects/object/seal/index.html new file mode 100644 index 0000000000..d08991c8ce --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/object/seal/index.html @@ -0,0 +1,136 @@ +--- +title: Object.seal() +slug: Web/JavaScript/Reference/Global_Objects/Object/seal +tags: + - ECMAScript 5 + - JavaScript + - JavaScript 1.8.5 + - Method + - Object + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Object/seal +--- +<p>{{JSRef}}</p> + +<p><code><strong>Object.seal()</strong></code> メソッドは、オブジェクトを封印して、新しいオブジェクトを追加することを抑制し、すべての既存のプロパティを設定変更不可にします。現存するプロパティの値は、書き込み可能である限り変更できます。</p> + +<div>{{EmbedInteractiveExample("pages/js/object-seal.html")}}</div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">Object.seal(<var>obj</var>)</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code><var>obj</var></code></dt> + <dd>封印するオブジェクトです。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>封印されたオブジェクトです。</p> + +<h2 id="Description" name="Description">解説</h2> + +<p>既定では、オブジェクトは{{jsxref("Object.isExtensible()", "拡張可能", "", 1)}} (新しいプロパティを追加できる状態) です。オブジェクトを封印することで、新しいオブジェクトの追加を抑制し、すべての既存のプロパティを設定変更を不可にします。これは、オブジェクトにあるプロパティ一式を固定かつ不変にする効果があります。プロパティを設定変更不可にすることで、データプロパティからアクセサプロパティへの変換やその逆を抑制しますが、データプロパティの値の変更は抑制しません。封印されたオブジェクトでプロパティの削除や追加、あるいはデータプロパティからアクセサプロパティへの変換およびその逆を試みると、暗黙的あるいは {{jsxref("TypeError")}} エラーを発生させて (もっとも一般的には {{jsxref("Strict_mode", "strict mode", "", 1)}} において、ただしこれに限定はされません) 失敗します。</p> + +<p>プロトタイプチェインには手をつけず、そのままにします。ただし、 {{jsxref("Object.proto", "__proto__")}} プロパティは同様に封印されます。</p> + +<h3 id="Comparison_to_Object.freeze" name="Comparison_to_Object.freeze">Object.freeze() との比較</h3> + +<p>{{jsxref("Object.freeze()")}} で凍結されたオブジェクトに存在するプロパティは不変になります。 <code>Object.seal()</code> で封印されたオブジェクトに存在するプロパティを変更することができます。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Using_Object.seal" name="Using_Object.seal">Object.seal の使用</h3> + +<pre class="brush: js notranslate">var obj = { + prop: function() {}, + foo: 'bar' +}; + +// 新しいプロパティは追加でき、既存のプロパティは変更や削除ができます。 +obj.foo = 'baz'; +obj.lumpy = 'woof'; +delete obj.prop; + +var o = Object.seal(obj); + +o === obj; // true +Object.isSealed(obj); // true + +// 封印されたオブジェクトで、プロパティの値の変更は依然としてできます。 +obj.foo = 'quux'; + +// しかし、データプロパティからアクセサプロパティの変換やその逆はできません。 +Object.defineProperty(obj, 'foo', { + get: function() { return 'g'; } +}); // TypeError が発生 + +// プロパティの値の変更を除き、あらゆる変更が失敗します。 +obj.quaxxor = 'the friendly duck'; +// 暗黙的にプロパティは追加されません。 +delete obj.foo; +// 暗黙的にプロパティは削除されません。 + +// また、 strict モードではこれらの試みに対して TypeErrors が発生します。 +function fail() { + 'use strict'; + delete obj.foo; // TypeError が発生 + obj.sparky = 'arf'; // TypeError が発生 +} +fail(); + +// Object.defineProperty を用いて追加しようとしてもエラーが発生します +Object.defineProperty(obj, 'ohai', { + value: 17 +}); // TypeError が発生 +Object.defineProperty(obj, 'foo', { + value: 'eit' +}); // 既存のプロパティの値を変更 +</pre> + +<h3 id="Non-object_coercion" name="Non-object_coercion">非オブジェクトの強制</h3> + +<p>ES5 では、このメソッドへの引数がオブジェクトではない場合 (プリミティブである場合)、 {{jsxref("TypeError")}} になります。 ES2015 では、オブジェクトではない引数は封印された通常のオブジェクトと同様に扱われ、単純にそれを返します。</p> + +<pre class="brush: js notranslate">Object.seal(1); +// TypeError: 1 is not an object (ES5 code) + +Object.seal(1); +// 1 (ES2015 code) +</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-object.seal', 'Object.seal')}}</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.Object.seal")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Object.isSealed()")}}</li> + <li>{{jsxref("Object.preventExtensions()")}}</li> + <li>{{jsxref("Object.isExtensible()")}}</li> + <li>{{jsxref("Object.freeze()")}}</li> + <li>{{jsxref("Object.isFrozen()")}}</li> +</ul> diff --git a/files/ja/web/javascript/reference/global_objects/object/setprototypeof/index.html b/files/ja/web/javascript/reference/global_objects/object/setprototypeof/index.html new file mode 100644 index 0000000000..23c7660fb9 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/object/setprototypeof/index.html @@ -0,0 +1,213 @@ +--- +title: Object.setPrototypeOf() +slug: Web/JavaScript/Reference/Global_Objects/Object/setPrototypeOf +tags: + - ECMAScript 2015 + - JavaScript + - Method + - Object + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Object/setPrototypeOf +--- +<div>{{JSRef}}</div> + +<p><code><strong>Object.setPrototypeOf()</strong></code> メソッドは、指定されたオブジェクトのプロトタイプ (つまり、内部の <code>[[Prototype]]</code> プロパティ) を、別のオブジェクトまたは {{jsxref("null")}} に設定します。</p> + +<div class="warning"> +<p><strong>警告:</strong> オブジェクトの <code>[[Prototype]]</code> を変更すると、 <a href="https://mathiasbynens.be/notes/prototypes">最近の JavaScript エンジンがプロパティへのアクセスを最適化する方法</a>の特質上、すべてのブラウザーや JavaScript エンジンで、操作がとても低速になります。さらに、プロトタイプを変更することの性能への影響は細かく広範囲にわたり、 <code>Object.setPrototypeOf(...)</code> 文に費やされる時間だけではなく、 <code>[[Prototype]]</code> が変更されたすべてのオブジェクトへのアクセスを持つ<strong><em>すべて</em></strong>のコードに影響する可能性があります。</p> + +<p>この機能は言語の一部であるため、その機能の実装による負荷は (理念上は) エンジンの開発者によります。エンジンの開発者がこの問題に対処するまでの間、性能が気になる場合は、オブジェクトの <code>[[Prototype]]</code> を変更することは避けるべきです。代わりに、 {{jsxref("Object.create()")}} を使用して必要な <code>[[Prototype]]</code> をもつオブジェクトを生成してください。</p> +</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">Object.setPrototypeOf(<var>obj</var>, <var>prototype</var>)</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code><var>obj</var></code></dt> + <dd>プロトタイプとして設定されるオブジェクト。</dd> + <dt><code><var>prototype</var></code></dt> + <dd>オブジェクトの新しいプロトタイプ (オブジェクトまたは {{jsxref("null")}})。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>指定されたオブジェクト。</p> + +<h2 id="Description" name="Description">解説</h2> + +<p><code>[[Prototype]]</code> が変更されるオブジェクトが {{jsxref("Object.isExtensible()")}} に応じて拡張不可の場合、 {{jsxref("Global_Objects/TypeError", "TypeError")}} 例外を投げます。<code>prototype</code> 引数がオブジェクトまたは {{jsxref("null")}} ではない場合(つまり、数値、文字列、boolean、 {{jsxref("undefined")}} のいずれか)、何もしません。さもなければ、このメソッドは <code>obj</code> の <code>[[Prototype]]</code> を新しい値に変更します。</p> + +<p><code>Object.setPrototypeOf()</code> は、 ECMAScript 2015 仕様書にあります。一般的には、オブジェクトのプロトタイプを設定するための適切な方法と考えられています。もっと物議を醸す{{jsxref("Object.prototype.__proto__")}} プロパティがあります。</p> + +<h2 id="Appending_Prototype_Chains" name="Appending_Prototype_Chains">プロトタイプチェーンの追加</h2> + +<p><code>Object.getPrototypeOf()</code> と {{jsxref("Object.proto", "Object.prototype.__proto__")}} の組み合わせによってプロトタイプチェーン全体を新しいプロトタイプオブジェクトに追加できます。</p> + +<pre class="brush: js notranslate">/** +*** Object.appendChain(@object, @prototype) +* +* Appends the first non-native prototype of a chain to a new prototype. +* Returns @object (if it was a primitive value it will transformed into an object). +* +*** Object.appendChain(@object [, "@arg_name_1", "@arg_name_2", "@arg_name_3", "..."], "@function_body") +*** Object.appendChain(@object [, "@arg_name_1, @arg_name_2, @arg_name_3, ..."], "@function_body") +* +* Appends the first non-native prototype of a chain to the native Function.prototype object, then appends a +* new Function(["@arg"(s)], "@function_body") to that chain. +* Returns the function. +* +**/ + +Object.appendChain = function(oChain, oProto) { + if (arguments.length < 2) { + throw new TypeError('Object.appendChain - 引数が足りません'); + } + if (typeof oProto !== 'object' && typeof oProto !== 'string') { + throw new TypeError('Object.appendChain の第二引数は object か string でなければなりません'); + } + + var oNewProto = oProto, + oReturn = o2nd = oLast = oChain instanceof this ? oChain : new oChain.constructor(oChain); + + for (var o1st = this.getPrototypeOf(o2nd); + o1st !== Object.prototype && o1st !== Function.prototype; + o1st = this.getPrototypeOf(o2nd) + ) { + o2nd = o1st; + } + + if (oProto.constructor === String) { + oNewProto = Function.prototype; + oReturn = Function.apply(null, Array.prototype.slice.call(arguments, 1)); + this.setPrototypeOf(oReturn, oLast); + } + + this.setPrototypeOf(o2nd, oNewProto); + return oReturn; +} +</pre> + +<h3 id="Usage" name="Usage">使い方</h3> + +<h4 id="First_example_Appending_a_chain_to_a_prototype" name="First_example_Appending_a_chain_to_a_prototype">最初の例: チェーンをプロトタイプに追加する</h4> + +<pre class="brush: js notranslate">function Mammal() { + this.isMammal = 'yes'; +} + +function MammalSpecies(sMammalSpecies) { + this.species = sMammalSpecies; +} + +MammalSpecies.prototype = new Mammal(); +MammalSpecies.prototype.constructor = MammalSpecies; + +var oCat = new MammalSpecies('Felis'); + +console.log(oCat.isMammal); // 'yes' + +function Animal() { + this.breathing = 'yes'; +} + +Object.appendChain(oCat, new Animal()); + +console.log(oCat.breathing); // 'yes' +</pre> + +<h4 id="Second_example_Transforming_a_primitive_value_into_an_instance_of_its_constructor_and_append_its_chain_to_a_prototype" name="Second_example_Transforming_a_primitive_value_into_an_instance_of_its_constructor_and_append_its_chain_to_a_prototype">二番目の例: そのコンストラクタのインスタンスにプリミティブ値を変換し、プロトタイプにそのチェーンを追加する</h4> + +<pre class="brush: js notranslate">function MySymbol() { + this.isSymbol = 'yes'; +} + +var nPrime = 17; + +console.log(typeof nPrime); // 'number' + +var oPrime = Object.appendChain(nPrime, new MySymbol()); + +console.log(oPrime); // '17' +console.log(oPrime.isSymbol); // 'yes' +console.log(typeof oPrime); // 'object' +</pre> + +<h4 id="Third_example_Appending_a_chain_to_the_Function.prototype_object_and_appending_a_new_function_to_that_chain" name="Third_example_Appending_a_chain_to_the_Function.prototype_object_and_appending_a_new_function_to_that_chain">三番目の例: チェーンを Function.prototype オブジェクトに追加し、新しい関数をそのチェーンに追加する</h4> + +<pre class="brush: js notranslate">function Person(sName) { + this.identity = sName; +} + +var george = Object.appendChain(new Person('George'), + 'console.log("Hello guys!!");'); + +console.log(george.identity); // 'George' +george(); // 'Hello guys!!' +</pre> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Using_Object.setPrototypeOf" name="Using_Object.setPrototypeOf">Object.setPrototypeOf の使用</h3> + +<pre class="brush: js notranslate">var dict = Object.setPrototypeOf({}, null); +</pre> + +<h2 id="Polyfill" name="Polyfill">ポリフィル</h2> + +<p><code>Object.setPrototypeOf</code> が利用できない場合、より古い {{jsxref("Object.prototype.__proto__")}} プロパティを使って、簡単に定義することができます。</p> + +<pre class="brush: js notranslate">if (!Object.setPrototypeOf) { + // Chrome および FireFox で動作しますが、 IE では動作しません + Object.prototype.setPrototypeOf = function(obj, proto) { + if(obj.__proto__) { + obj.__proto__ = proto; + return obj; + } else { + // Object.create(null) のプロトタイプを返したい場合 + var Fn = function() { + for (var key in obj) { + Object.defineProperty(this, key, { + value: obj[key], + }); + } + }; + Fn.prototype = proto; + return new Fn(); + } + } +}</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-object.setprototypeof', 'Object.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.Object.setPrototypeOf")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Reflect.setPrototypeOf()")}}</li> + <li>{{jsxref("Object.prototype.isPrototypeOf()")}}</li> + <li>{{jsxref("Object.getPrototypeOf()")}}</li> + <li>{{jsxref("Object.prototype.__proto__")}}</li> +</ul> diff --git a/files/ja/web/javascript/reference/global_objects/object/tolocalestring/index.html b/files/ja/web/javascript/reference/global_objects/object/tolocalestring/index.html new file mode 100644 index 0000000000..413205a593 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/object/tolocalestring/index.html @@ -0,0 +1,112 @@ +--- +title: Object.prototype.toLocaleString() +slug: Web/JavaScript/Reference/Global_Objects/Object/toLocaleString +tags: + - JavaScript + - Method + - Object + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Object/toLocaleString +--- +<p>{{JSRef}}</p> + +<p><code><strong>toLocaleString()</strong></code> メソッドは、オブジェクトを表す文字列を返します。このメソッドは、ロケール固有の目的のために派生オブジェクトによって上書きするためのものです。</p> + +<div>{{EmbedInteractiveExample("pages/js/object-prototype-tolocalestring.html")}}</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"><var>obj</var>.toLocaleString()</pre> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>オブジェクトを表現する文字列です。</p> + +<h2 id="Description" name="Description">解説</h2> + +<p>{{jsxref("Object")}} の <code>toLocaleString</code> は {{jsxref("Object.toString", "toString()")}} を呼び出した結果を返します。</p> + +<p>この関数は、すべての人が使うわけではありませんが、オブジェクトに汎用的な <code>toLocaleString</code> メソッドを与えるために提供されています。以下のリストを参照してください。</p> + +<h3 id="Objects_overriding_toLocaleString" name="Objects_overriding_toLocaleString">toLocaleString を上書きしているオブジェクト</h3> + +<ul> + <li>{{jsxref("Array")}}: {{jsxref("Array.prototype.toLocaleString()")}}</li> + <li>{{jsxref("Number")}}: {{jsxref("Number.prototype.toLocaleString()")}}</li> + <li>{{jsxref("Date")}}: {{jsxref("Date.prototype.toLocaleString()")}}</li> + <li>{{jsxref("TypedArray")}}: {{jsxref("TypedArray.prototype.toLocaleString()")}}</li> + <li>{{jsxref("BigInt")}}: {{jsxref("BigInt.prototype.toLocaleString()")}}</li> +</ul> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Array_toLocaleString_override" name="Array_toLocaleString_override">Array における toLocaleString() の上書き</h3> + +<p>{{jsxref("Array")}} オブジェクトでは、 {{jsxref("Array.toLocaleString", "toLocaleString()")}} を使用して配列の値を文字列として表示したり、オプションでロケール固有の識別子 (通貨記号など) を付加して表示したりすることができます。</p> + +<p>例を示します。</p> + +<pre class="brush: js notranslate">const testArray = [4, 7, 10]; + +let euroPrices = testArray.toLocaleString('fr', { style: 'currency', currency: 'EUR'}); +// "4,00 €,7,00 €,10,00 €"</pre> + +<h3 id="Date_における_toLocaleString_の上書き">Date における toLocaleString() の上書き</h3> + +<p>{{jsxref("Date")}} オブジェクトでは、 {{jsxref("Date.toLocaleString", "toLocaleString()")}} を使用して、特定のロケールに適した日付表示を出力します。</p> + +<p>例を示します。</p> + +<pre class="brush: js notranslate">const testDate = new Date(Date.now()); +// "Date Fri May 29 2020 18:04:24 GMT+0100 (British Summer Time)" + +let deDate = testDate.toLocaleString('de'); +// "29.5.2020, 18:04:24" + +var frDate = testDate.toLocaleString('fr'); +//"29/05/2020 à 18:04:24"</pre> + +<h3 id="Number_における_toLocaleString_の上書き">Number における toLocaleString() の上書き</h3> + +<p>{{jsxref("Number")}} オブジェクトでは、 {{jsxref("Number.toLocaleString", "toLocaleString()")}} を使用して、特定のロケールに適した数値表示、例えば正しい区切り文字を使って出力します。</p> + +<p>例を示します。</p> + +<pre class="brush: js notranslate">const testNumber = 2901234564; +// "2901234564" + +let deNumber = testNumber.toLocaleString('de'); +// "2.901.234.564" + +let frNumber = testNumber.toLocaleString('fr'); +// "2 901 234 564"</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-object.prototype.tolocalestring', 'Object.prototype.toLocaleString')}}</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.Object.toLocaleString")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Object.prototype.toString()")}}</li> +</ul> diff --git a/files/ja/web/javascript/reference/global_objects/object/tosource/index.html b/files/ja/web/javascript/reference/global_objects/object/tosource/index.html new file mode 100644 index 0000000000..691ea3adda --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/object/tosource/index.html @@ -0,0 +1,131 @@ +--- +title: Object.prototype.toSource() +slug: Web/JavaScript/Reference/Global_Objects/Object/toSource +tags: + - JavaScript + - Method + - Non-standard + - Object + - Obsolete + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Object/toSource +--- +<div>{{JSRef}} {{obsolete_header}}</div> + +<p><strong><code>toSource()</code></strong> メソッドは、オブジェクトのソースコードを表す文字列を返します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">Object.toSource(); +<var>obj</var>.toSource();</pre> + +<h3 id="Parameters" name="Parameters">返値</h3> + +<p>オブジェクトのソースコードを表す文字列です。</p> + +<h2 id="Description" name="Description">解説</h2> + +<p><code>toSource()</code> メソッドは以下の値を返します。</p> + +<ul> + <li>組み込みの {{jsxref("Object")}} オブジェクトに対しては、 <code>toSource()</code> はソースコードが利用できないことを示す次の文字列を返します。 + + <pre class="brush: js notranslate">function Object() { + [native code] +} +</pre> + </li> + <li>{{jsxref("Object")}} のインスタンスに対しては、<code>toSource()</code> はソースコードを表す文字列を返します。</li> +</ul> + +<p>デバッグ時に <code>toSource()</code> を呼び出して、オブジェクトの内容を調べることができます。</p> + +<h3 id="Overriding_the_toSource_method" name="Overriding_the_toSource_method">toSource() メソッドのオーバーライド</h3> + +<p>オブジェクトが <code>toSource()</code> メソッドをオーバーライドしても安全です。例えば次のコードを見てください。</p> + +<pre class="brush: js notranslate">function Person(name) { + this.name = name; +} + +Person.prototype.toSource = function Person_toSource() { + return 'new Person(' + uneval(this.name) + ')'; +}; + +console.log(new Person('Joe').toSource()); // ---> new Person("Joe") +</pre> + +<h3 id="Built-in_toSource_methods" name="Built-in_toSource_methods">組み込み toSource() メソッド</h3> + +<p>コア JavaScript のそれぞれの型は独自の <code>toSource()</code> メソッドを持っています。これらのオブジェクトの例を示します。</p> + +<ul> + <li>{{jsxref("Array.prototype.toSource()")}} — {{jsxref("Array")}} オブジェクト</li> + <li>{{jsxref("Boolean.prototype.toSource()")}} — {{jsxref("Boolean")}} オブジェクト</li> + <li>{{jsxref("Date.prototype.toSource()")}} — {{jsxref("Date")}} オブジェクト</li> + <li>{{jsxref("Function.prototype.toSource()")}} — {{jsxref("Function")}} オブジェクト</li> + <li>{{jsxref("Number.prototype.toSource()")}} — {{jsxref("Number")}} オブジェクト</li> + <li>{{jsxref("RegExp.prototype.toSource()")}} — {{jsxref("RegExp")}} オブジェクト</li> + <li>{{jsxref("String.prototype.toSource()")}} — {{jsxref("String")}} オブジェクト</li> + <li>{{jsxref("Symbol.prototype.toSource()")}} — {{jsxref("Symbol")}} オブジェクト</li> + <li><code>Math.toSource()</code> — 文字列 "Math" を返す。</li> +</ul> + +<h3 id="Limitations_on_cyclical_objects" name="Limitations_on_cyclical_objects">循環オブジェクトの正弦</h3> + +<p>再帰的にリンクされたリストや双方向に移動可能なツリーなど、自分自身への参照を含むオブジェクトの場合、 <code>toSource()</code> は Firefox 24 のように自己参照を再生成しません。例えば、次のようになります。</p> + +<pre class="brush: js notranslate">var obj1 = {}; +var obj2 = { a: obj1 }; +obj1.b = obj2; + +console.log('Cyclical: ' + (obj1.b.a == obj1)); + +var objSource = obj1.toSource(); // returns "({b:{a:{}}})" + +obj1 = eval(objSource); + +console.log('Cyclical: ' + (obj1.b.a == obj1)); +</pre> + +<p>循環構造が採用されていて <code>toSource()</code> が必要な場合、オブジェクトはコンストラクターへの参照を使用するか、無名関数を提供するかのいずれかの方法で、 <code>toSource()</code> へのオーバーライドを提供しなければなりません。</p> + +<h2 id="例">例</h2> + +<h3 id="Using_toSource" name="Using_toSource">toSource() の使用</h3> + +<p>次のコードは <code>Dog</code> オブジェクト型を定義して <code>theDog</code>、すなわち <code>Dog</code> 型のオブジェクトを生成します。</p> + +<pre class="brush: js notranslate">function Dog(name, breed, color, sex) { + this.name = name; + this.breed = breed; + this.color = color; + this.sex = sex; +} + +theDog = new Dog('Gabby', 'Lab', 'chocolate', 'female'); +</pre> + +<p><code>toSource()</code> メソッドを <code>theDog</code> に対して呼び出すと、そのオブジェクトを定義する JavaScript のソースが表示されます。</p> + +<pre class="brush: js notranslate">theDog.toSource(); +// returns ({name:"Gabby", breed:"Lab", color:"chocolate", sex:"female"}) +</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<p>標準の一部ではありません。 JavaScript 1.3 で実装されました。</p> + +<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.Object.toSource")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Object.prototype.toString()")}}</li> +</ul> diff --git a/files/ja/web/javascript/reference/global_objects/object/tostring/index.html b/files/ja/web/javascript/reference/global_objects/object/tostring/index.html new file mode 100644 index 0000000000..a152802a58 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/object/tostring/index.html @@ -0,0 +1,169 @@ +--- +title: Object.prototype.toString() +slug: Web/JavaScript/Reference/Global_Objects/Object/toString +tags: + - JavaScript + - Method + - Object + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Object/toString +--- +<div>{{JSRef}}</div> + +<p><code><strong>toString()</strong></code> メソッドは、オブジェクトを表す文字列を返します。</p> + +<div>{{EmbedInteractiveExample("pages/js/object-prototype-tostring.html")}}</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"><var>obj</var>.toString()</pre> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>オブジェクトを表す文字列です。</p> + +<h2 id="Description" name="Description">解説</h2> + +<p>すべてのオブジェクトは <code>toString</code> メソッドを持ち、オブジェクトが文字列値として表される場面や、文字列が期待される構文で参照されたときに自動的に呼び出されます。既定で、 <code>toString()</code> メソッドは <code>Object</code> の子孫にあたるあらゆるオブジェクトに継承されています。このメソッドがカスタムオブジェクト中で上書きされていない場合、 <code>toString()</code> は "<code>[object <var>type</var>]</code>" という文字列を返します (<code><var>type</var></code> は そのオブジェクトの型)。以下のコードがこれを例示しています。</p> + +<pre class="brush: js notranslate">const o = new Object(); +o.toString(); // [object Object] を返す +</pre> + +<div class="note"> +<p><strong>注:</strong> JavaScript 1.8.5 から、 <code>toString()</code> を {{jsxref("null")}} に対して呼び出した場合には <code>[object <em>Null</em>]</code> を、 {{jsxref("undefined")}} に対して呼び出した場合には <code>[object <em>Undefined</em>]</code> を返すようになり、これは ECMAScript 5<sup>th</sup> Edition とその後のエラッタによって定義されました。</p> + +<p><a href="#Using_toString_to_detect_object_class">toString() を使用したオブジェクトクラスの検出</a>を参照してください。</p> +</div> + +<h2 id="Parameters" name="Parameters">引数</h2> + +<p>Number と BigInt の <code>toString()</code> は、オプションの引数 <code>radix</code> で基数の値を取り、最小値は2で最大値は36です。</p> + +<p><code>radix</code> を使用すると、十進数 (1,2,3,4,5,.........) を他の基数の数字に変換することができます。以下の例では十進数を二進数 (バイナリ) に変換しています。</p> + +<pre class="notranslate">let baseTenInt = 10; +console.log(baseTenInt.toString(2)); +// 期待される結果は "1010" +</pre> + +<p>BigInt についても同じです。</p> + +<pre class="brush: js notranslate">let bigNum = BigInt(20); +console.log(bigNum.toString(2)); +// 期待される結果は "10100"</pre> + +<p>よくある基数としては次のものがあります。</p> + +<ul> + <li>2 は<a href="https://ja.wikipedia.org/wiki/%E4%BA%8C%E9%80%B2%E6%B3%95" rel="noopener">二進数</a>になります。</li> + <li>8 は<a href="https://ja.wikipedia.org/wiki/%E5%85%AB%E9%80%B2%E6%B3%95" rel="noopener">八進数</a>になります。</li> + <li>10 は <a href="https://ja.wikipedia.org/wiki/%E5%8D%81%E9%80%B2%E6%B3%95" rel="noopener">十真数</a>になります。</li> + <li>16 は <a href="https://ja.wikipedia.org/wiki/%E5%8D%81%E5%85%AD%E9%80%B2%E6%B3%95" rel="noopener">十六進数</a>になります。</li> +</ul> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Overriding_the_default_toString_method" name="Overriding_the_default_toString_method">既定の toString メソッドの上書き</h3> + +<p>既定の <code>toString()</code> メソッドに代わって呼び出される関数を作ることができます。 <code>toString()</code> メソッドは引数を取らず、文字列を返す必要があります。 <code>toString()</code> メソッドを作成した場合は好きな文字列を返すことができますが、オブジェクトに関する情報を伝えるのが一番役に立つでしょう。</p> + +<p>以下のコードは <code>Dog</code> オブジェクト型を定義し、 <code>Dog</code> 型のオブジェクト <code>theDog</code> を生成しています。</p> + +<pre class="brush: js notranslate">function Dog(name, breed, color, sex) { + this.name = name; + this.breed = breed; + this.color = color; + this.sex = sex; +} + +theDog = new Dog('Gabby', 'Lab', 'chocolate', 'female'); +</pre> + +<p>このカスタムオブジェクト上で <code>toString()</code> メソッドを呼び出した場合、メソッドは {{jsxref("Object")}} から継承された既定値を返します。</p> + +<pre class="brush: js notranslate">theDog.toString(); // [object Object] を返す +</pre> + +<p>以下のコードでは、 <code>dogToString()</code> を生成および割り当てし、既定の <code>toString()</code> メソッドを上書きします。この関数はオブジェクトの <code>name</code>, <code>breed</code>, <code>color</code>, <code>sex</code> を "<code>property = value;</code>" の形で含む文字列を生成します。</p> + +<pre class="brush: js notranslate">Dog.prototype.toString = function dogToString() { + const ret = 'Dog ' + this.name + ' is a ' + this.sex + ' ' + this.color + ' ' + this.breed; + return ret; +} +</pre> + +<p>または、 ES6 の {{jsxref("Template_literals", "テンプレート文字列", "", 1)}}を使用した例です。</p> + +<pre class="brush: js notranslate">Dog.prototype.toString = function dogToString() { + return `Dog ${this.name} is a ${this.sex} ${this.color} ${this.breed}`; +} +</pre> + +<p>前者のコードの中で、 <code>theDog</code> が文字列の文脈で使用されるたびに、 JavaScript は自動的に <code>dogToString()</code> 関数を呼び出し、以下の文字列を返します。</p> + +<pre class="brush: js notranslate">"Dog Gabby is a female chocolate Lab" +</pre> + +<h3 id="Using_toString_to_detect_object_class" name="Using_toString_to_detect_object_class">toString() を使用したオブジェクトクラスの判別</h3> + +<p><code>toString()</code> はすべてのオブジェクトに対し、(既定では) そのクラスを得るために使用することができます。</p> + +<p>すべてのオブジェクトで <code>Object.prototype.toString()</code> を使うためには、 {{jsxref("Function.prototype.call()")}} または {{jsxref("Function.prototype.apply()")}} を、第1引数 (<code>thisArg</code>) に調べたいオブジェクトを渡して呼び出す必要があります。</p> + +<pre class="brush: js notranslate">const toString = Object.prototype.toString; + +toString.call(new Date); // [object Date] +toString.call(new String); // [object String] +toString.call(Math); // [object Math] + +// Since JavaScript 1.8.5 +toString.call(undefined); // [object Undefined] +toString.call(null); // [object Null] +</pre> + +<p>このような <code>toString()</code> の使用は信頼できません。オブジェクトは <code>Object.prototype.toString()</code> の動作を {{jsxref("Symbol.toStringTag")}} プロパティを定義することで変更でき、それによって次のように予想外の動作になります。</p> + +<pre class="brush: js notranslate">const myDate = new Date(); +Object.prototype.toString.call(myDate); // [object Date] + +myDate[Symbol.toStringTag] = 'myDate'; +Object.prototype.toString.call(myDate); // [object myDate] + +Date.prototype[Symbol.toStringTag] = 'prototype polluted'; +Object.prototype.toString.call(new Date()); // [object prototype polluted] +</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-object.prototype.tostring', 'Object.prototype.toString')}}</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.Object.toString")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Object.prototype.toSource()")}}</li> + <li>{{jsxref("Object.prototype.valueOf()")}}</li> + <li>{{jsxref("Number.prototype.toString()")}}</li> + <li>{{jsxref("Symbol.toPrimitive")}}</li> +</ul> diff --git a/files/ja/web/javascript/reference/global_objects/object/valueof/index.html b/files/ja/web/javascript/reference/global_objects/object/valueof/index.html new file mode 100644 index 0000000000..e35464da62 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/object/valueof/index.html @@ -0,0 +1,120 @@ +--- +title: Object.prototype.valueOf() +slug: Web/JavaScript/Reference/Global_Objects/Object/valueOf +tags: + - JavaScript + - Method + - Object + - Prototype + - indexof +translation_of: Web/JavaScript/Reference/Global_Objects/Object/valueOf +--- +<div>{{JSRef}}</div> + +<p><strong><code>valueOf()</code></strong> メソッドは、指定されたオブジェクトのプリミティブな値を返します。</p> + +<div>{{EmbedInteractiveExample("pages/js/object-prototype-valueof.html")}}</div> + +<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><var>object</var>.valueOf()</pre> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>指定されたオブジェクトのプリミティブ値を返します。</p> + +<div class="blockIndicator note"> +<p><a href="/ja/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Unary_plus">(単項) プラス符号</a>を <code>valueOf</code> の省略形として使用することができる場合があります。例えば、 <code>+new Number()</code> などです。<a href="#Using_unary_plus">単項プラスの使用</a>も参照してください。</p> +</div> + +<h2 id="Description" name="Description">解説</h2> + +<p>JavaScript は <code>valueOf</code> メソッドを、オブジェクトをプリミティブな値に変換するときに呼び出します。あなたが自分で <code>valueOf</code> メソッドを実行する必要はほとんどなく、プリミティブな値が期待される場面にオブジェクトが出くわしたとき JavaScript が自動的に実行します。</p> + +<p>既定で、 <code>valueOf</code> メソッドは <code>Object</code> の子孫にあたるあらゆるオブジェクトに継承されています。全ての組み込みコアオブジェクトは適切な値を返すためにこのメソッドを上書きしています。もしオブジェクトがプリミティブな値を持たない場合、 <code>valueOf</code> はオブジェクト自身を返します。</p> + +<p>あなたのコードで組み込みオブジェクトをプリミティブな値にするために <code>valueOf</code> を呼ぶことができます。また、カスタムオブジェクトを作成した時に <code>Object.prototype.valueOf()</code> を上書きしてデフォルトの <code>Object</code> のメソッドの代わりにカスタムメソッドを呼び出すようにすることができます。</p> + +<h3 id="Overriding_valueOf_for_custom_objects" name="Overriding_valueOf_for_custom_objects">カスタムオブジェクトでの valueOf の上書き</h3> + +<p>既定の <code>valueOf</code> メソッドに代わって呼び出される関数を作ることができます。その関数は引数を取ってはなりません。</p> + +<p><code>MyNumberType</code> というオブジェクト型があって、それに <code>valueOf</code> メソッドを作りたいとしましょう。以下のコードはユーザー定義関数をオブジェクトの <code>valueOf</code> メソッドに代入しています。</p> + +<pre class="brush: js notranslate">MyNumberType.prototype.valueOf = function() { return customPrimitiveValue; };</pre> + +<p>上のコードにより、 <code>MyNumberType</code> 型のオブジェクトがプリミティブな値で表されるべき文脈では常に、 JavaScript は自動的に上のコードで定義された関数を呼び出します。</p> + +<p>オブジェクトの <code>valueOf</code> メソッドはたいてい JavaScript によって実行されますが、あなた自身も以下のように実行できます。</p> + +<pre class="brush: js notranslate"><var>myNumberType</var>.valueOf()</pre> + +<div class="note"> +<p><strong>注:</strong>文字列型の文脈にあるオブジェクトは {{jsxref("Object.toString", "toString()")}} メソッドを通じて変換されますが、これは {{jsxref("String")}} オブジェクトが <code>valueOf</code> を使って文字列型に変換されるのとは違います。すべてのオブジェクトは、 "<code>[object <em>type</em>]</code>" としか出力されないかもしれませんが、文字列変換できます。しかし多くのオブジェクトは数値や真偽値や関数には変換できません。</p> +</div> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Using_valueOf_on_custom_types" name="Using_valueOf_on_custom_types">カスタム型での valueOf の使用</h3> + +<pre class="brush: js notranslate">function MyNumberType(n) { + this.number = n; +} + +MyNumberType.prototype.valueOf = function() { + return this.number; +}; + +var myObj = new MyNumberType(4); +myObj + 3; // 7 +</pre> + +<h3 id="Using_unary_plus" name="Using_unary_plus">単項プラスの使用</h3> + +<pre class="brush: js notranslate">+"5" // 5 (文字列から数値へ) ++"" // 0 (文字列から数値へ) ++"1 + 2" // NaN (評価不能) ++new Date() // (new Date()).getTime() と同じ ++"foo" // NaN (文字列から数値へ) ++{} // NaN ++[] // 0 (toString() は空の文字列リストを返す) ++[1] // 1 ++[1,2] // NaN ++new Set([1]) // NaN ++BigInt(1) // Uncaught TypeError: Cannot convert a BigInt value to a number ++undefined // NaN ++null // 0 ++true // 1 ++false // 0 +</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-object.prototype.valueof', 'Object.prototype.valueOf')}}</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.Object.valueOf")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Object.prototype.toString()")}}</li> + <li>{{jsxref("parseInt", "parseInt()")}}</li> + <li>{{jsxref("Symbol.toPrimitive")}}</li> +</ul> diff --git a/files/ja/web/javascript/reference/global_objects/object/values/index.html b/files/ja/web/javascript/reference/global_objects/object/values/index.html new file mode 100644 index 0000000000..d016cb025c --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/object/values/index.html @@ -0,0 +1,98 @@ +--- +title: Object.values() +slug: Web/JavaScript/Reference/Global_Objects/Object/values +tags: + - JavaScript + - Method + - Object + - Reference + - メソッド +translation_of: Web/JavaScript/Reference/Global_Objects/Object/values +--- +<div>{{JSRef}}</div> + +<p><span class="seoSummary"><code><strong>Object.values()</strong></code> メソッドは、指定されたオブジェクトが持つ列挙可能なプロパティの値を、 {{jsxref("Statements/for...in", "for...in")}} ループで提供される場合と同じ順序で配列にして返します。 (違いは、 <code>for...in</code> ループではプロパティチェーン上のプロパティも同様に列挙するという点だけです。)</span></p> + +<div>{{EmbedInteractiveExample("pages/js/object-values.html")}}</div> + +<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">Object.values(<var>obj</var>)</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code><var>obj</var></code></dt> + <dd> 返されることになる列挙可能な自身のプロパティの値を持つオブジェクト。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>与えられたオブジェクトが所有する列挙可能なプロパティの値が入った配列。</p> + +<h2 id="Description" name="Description">解説</h2> + +<p><code>Object.values()</code> は、<code>object</code> に直接存在する列挙可能な値が配列要素の文字列に対応した配列を返します。プロパティの順序はマニュアル操作でオブジェクト内のプロパティに対してループさせた時の順序と同じになります。</p> + +<h2 id="Examples" name="Examples">使用例</h2> + +<pre class="brush: js">const obj = { foo: 'bar', baz: 42 }; +console.log(Object.values(obj)); // ['bar', 42] + +// 配列風オブジェクト +const arrayLikeObj1 = { 0: 'a', 1: 'b', 2: 'c' }; +console.log(Object.values(arrayLikeObj1 )); // ['a', 'b', 'c'] + +// ランダムなキー順序を持つ配列風オブジェクト +// 数値のキーを使用すると、値はキーの番号順に返される +const arrayLikeObj2 = { 100: 'a', 2: 'b', 7: 'c' }; +console.log(Object.values(arrayLikeObj2 )); // ['b', 'c', 'a'] + +// 列挙可能でないプロパティ getFoo がある +const my_obj = Object.create({}, { getFoo: { value: function() { return this.foo; } } }); +my_obj.foo = 'bar'; +console.log(Object.values(my_obj)); // ['bar'] + +// オブジェクトでない引数はオブジェクトへと型強制される +console.log(Object.values('foo')); // ['f', 'o', 'o'] +</pre> + +<h2 id="Polyfill" name="Polyfill">ポリフィル</h2> + +<p><code>Object.values</code> に対応していない古い環境と互換性を持たせる場合は、 <a href="https://github.com/tc39/proposal-object-values-entries">tc39/proposal-object-values-entries</a> や <a href="https://github.com/es-shims/Object.values">es-shims/Object.values</a> 内にポリフィルがあります。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.values', 'Object.values')}}</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.Object.values")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">プロパティの列挙可能性と所有権</a></li> + <li>{{jsxref("Object.keys()")}}</li> + <li>{{jsxref("Object.entries()")}}</li> + <li>{{jsxref("Object.prototype.propertyIsEnumerable()")}}</li> + <li>{{jsxref("Object.create()")}}</li> + <li>{{jsxref("Object.getOwnPropertyNames()")}}</li> +</ul> |