diff options
Diffstat (limited to 'files/ja/web/javascript/guide/working_with_objects/index.html')
| -rw-r--r-- | files/ja/web/javascript/guide/working_with_objects/index.html | 496 |
1 files changed, 496 insertions, 0 deletions
diff --git a/files/ja/web/javascript/guide/working_with_objects/index.html b/files/ja/web/javascript/guide/working_with_objects/index.html new file mode 100644 index 0000000000..6200e1aa36 --- /dev/null +++ b/files/ja/web/javascript/guide/working_with_objects/index.html @@ -0,0 +1,496 @@ +--- +title: オブジェクトでの作業 +slug: Web/JavaScript/Guide/Working_with_Objects +tags: + - Beginner + - Document + - Guide + - JavaScript + - Object + - 'l10n:priority' + - オブジェクトの比較 + - コンストラクター +translation_of: Web/JavaScript/Guide/Working_with_Objects +--- +<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Keyed_collections", "Web/JavaScript/Guide/Details_of_the_Object_Model")}}</div> + +<p class="summary">JavaScript は、シンプルなオブジェクトベースの枠組みを持つ言語として設計されています。JavaScript におけるオブジェクトはプロパティの集まりであり、プロパティは名前 (あるいは<em>キー</em>) と値との関連付けから成り立っています。プロパティの値を関数にすることもでき、これはいわゆるオブジェクトのメソッドとなります。ブラウザーにあらかじめ定義されているオブジェクトに加え、独自のオブジェクトを定義することもできます。この節ではオブジェクト、プロパティ、関数、メソッドの使い方と、独自のオブジェクトを作成する方法を説明します。</p> + +<h2 id="Objects_overview" name="Objects_overview">オブジェクトの概要</h2> + +<p>他の多くのプログラミング言語と同様、JavaScript におけるオブジェクトも、現実世界の「もの」 (すなわちオブジェクト) になぞらえることができます。JavaScript におけるオブジェクトの概念は、現実世界に実在する「もの」との対比で解釈できます。</p> + +<p>JavaScript において、オブジェクトはプロパティと型を持つ独立した存在です。カップを例に考えてみましょう。カップは様々なプロパティ (特性) をもったもの (オブジェクト) です。カップは、色や形状、重さや材質といったプロパティを持っています。同様に、JavaScript のオブジェクトもプロパティを持つことができ、プロパティによってそのオブジェクトの特徴を定義することができます。</p> + +<h2 id="Objects_and_properties" name="Objects_and_properties">オブジェクトとプロパティ</h2> + +<p>JavaScript のオブジェクトは、自身に関連付けられたプロパティを持ちます。オブジェクトのプロパティは、オブジェクトに関連付けられている変数と捉えることができます。オブジェクトのプロパティは、オブジェクトに属するものという点を除けば、基本的に通常の JavaScript 変数と同じようなものです。オブジェクトのプロパティは、オブジェクトの特性を定義します。オブジェクトのプロパティには、単純なドット表記でアクセスします。</p> + +<pre class="brush: js notranslate">objectName.propertyName +</pre> + +<p>すべての JavaScript の変数と同じく、オブジェクト名 (通常の変数にもなります) とプロパティ名では、大文字と小文字は厳密に区別されます。プロパティに値を代入することでプロパティを定義する事ができます。以下のようにして、<code>myCar</code> という名前のオブジェクトを作成し、<code>make</code>、<code>model</code>、<code>year</code> という名前のプロパティを付与することができます</p> + +<pre class="brush: js notranslate">var myCar = new Object(); +myCar.make = 'Ford'; +myCar.model = 'Mustang'; +myCar.year = 1969; +</pre> + +<p>上記の例は、<strong><a href="/ja/docs/Web/JavaScript/Guide/Working_with_Objects#Object_initializers">オブジェクト初期化子</a></strong>を使用して作成することもできます。オブジェクト初期化子は、中括弧 (<code>{}</code>) で囲まれたオブジェクトのプロパティ名と関連する値の 0 個以上のペアをカンマで区切ったリストです。</p> + +<pre class="brush: js notranslate">var myCar = { + make: 'Ford', + model: 'Mustang', + year: 1969 +}; +</pre> + +<p>オブジェクトに割り当てられていないプロパティは {{jsxref("undefined")}} です ({{jsxref("null")}} ではありません)。</p> + +<pre class="brush: js notranslate">myCar.color; // undefined</pre> + +<p>JavaScript オブジェクトのプロパティは、ブラケット (角括弧) 記述法でもアクセスすることができます (詳しくは<a href="/ja/docs/Web/JavaScript/Reference/Operators/Property_Accessors">プロパティのアクセサー</a>を参照してください)。個々のプロパティが文字列値と関連付けられてアクセスできるため、オブジェクトは<em>連想配列</em>と呼ばれることがあります。ですから例えば、<code>myCar</code> オブジェクトのプロパティに次のようにアクセスできます。</p> + +<pre class="brush: js notranslate">myCar['make'] = 'Ford'; +myCar['model'] = 'Mustang'; +myCar['year'] = 1969; +</pre> + +<p>オブジェクトプロパティの名前には、あらゆる有効な JavaScript 文字列 (空文字列を含む) か、文字列に変換できるものが使用できます。しかしながら、JavaScript 識別子として有効ではないプロパティ名 (例えば空白やダッシュを含んでいたり、数字で始まったりするプロパティ名) には、ブラケット (角括弧) 表記法でのみアクセスできます。この表記法はプロパティ名を動的に決める場合 (プロパティ名が実行時に決まる場合) に便利です。例を示します。</p> + +<pre class="brush: js notranslate">// カンマで区切られた 4 つの変数が作成され、 +// 1 つに割り当てられます。 +var myObj = new Object(), + str = 'myString', + rand = Math.random(), + obj = new Object(); + +myObj.type = 'ドット表記'; +myObj['date created'] = '空白入りの文字列'; +myObj[str] = '文字列の値'; +myObj[rand] = '乱数'; +myObj[obj] = 'オブジェクト'; +myObj[''] = '空文字列も可能'; + +console.log(myObj); +</pre> + +<p>なお、JavaScript のオブジェクトのプロパティ名 (キー) は文字列かシンボルしか扱えないので、各括弧表記の中のキーはすべて、シンボルを除いて文字列に変換されます (将来、<a href="https://github.com/tc39/proposal-class-fields">クラスフィールドの提案</a>が進行すると、プライベート名も追加される予定ですが、<code>[]</code> の形は使用できません)。例えば、上記のコードで <code>obj</code> キーが <code>myObj</code> に追加されるとき、JavaScript は <code>obj.toString()</code> メソッドを呼び出し、結果の文字列を新しいキーとして使用します。</p> + +<p>変数内の文字列値を使ってプロパティにアクセスすることもできます。</p> + +<pre class="brush: js notranslate">var propertyName = 'make'; +myCar[propertyName] = 'Ford'; + +propertyName = 'model'; +myCar[propertyName] = 'Mustang'; +</pre> + +<p>ブラケット表記法を用いて <code><a href="/ja/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a></code> でオブジェクトの列挙可能なプロパティすべてを巡回することができます。どのように動作するかを説明するため、以下にオブジェクトとオブジェクト名を引数として渡すと、オブジェクトのプロパティを表示する関数を示します。</p> + +<pre class="brush: js notranslate">function showProps(obj, objName) { + var result = ''; + for (var i in obj) { + // obj.hasOwnProperty() はオブジェクトのプロトタイプチェーンからプロパティを絞り込むために使用しています + if (obj.hasOwnProperty(i)) { + result += objName + '.' + i + ' = ' + obj[i] + '\n'; + } + } + return result; +} +</pre> + +<p>そして、<code>showProps(myCar, "myCar")</code> のように関数を呼び出すと次の結果が返ります。</p> + +<pre class="brush: js notranslate">myCar.make = Ford +myCar.model = Mustang +myCar.year = 1969</pre> + +<h2 id="Enumerate_the_properties_of_an_object" name="Enumerate_the_properties_of_an_object">オブジェクトの全プロパティの列挙</h2> + +<p><a href="/ja/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_5_support_in_Mozilla" title="ja/docs/JavaScript/ECMAScript 5 support in Mozilla">ECMAScript 5</a> 以降では、オブジェクトのプロパティをリストアップ/トラバース (横断走査) する言語特有の方法が 3 つあります。</p> + +<ul> + <li><code><a href="/ja/docs/Web/JavaScript/Reference/Statements/for...in" title="ja/docs/JavaScript/Reference/Statements/for...in">for...in</a></code> ループ<br> + この方法は、オブジェクトとそのプロトタイプチェーンにある列挙可能なプロパティをすべて横断します</li> + <li>{{jsxref("Object.keys", "Object.keys(o)")}}<br> + このメソッドは、そのオブジェクト独自の (プロトタイプチェーンを除く) 列挙可能なすべてのプロパティ名 ("keys") を配列で返します</li> + <li>{{jsxref("Object.getOwnPropertyNames", "Object.getOwnPropertyNames(o)")}}<br> + このメソッドは、そのオブジェクト独自のすべてのプロパティ名を (列挙可能かどうかに関わらず) 配列で返します</li> +</ul> + +<p>ECMAScript 5 よりも前では、オブジェクトの全プロパティを列挙する言語特有の方法はありません。しかし、次の関数で実現できます。</p> + +<pre class="brush: js notranslate">function listAllProperties(o) { + var objectToInspect; + var result = []; + + for(objectToInspect = o; objectToInspect !== null; + objectToInspect = Object.getPrototypeOf(objectToInspect)) { + result = result.concat( + Object.getOwnPropertyNames(objectToInspect) + ); + } + + return result; +} +</pre> + +<p>これは「隠された」プロパティ (プロトタイプチェーンのより近いところに他の同名のプロパティがあるために、オブジェクトを通してアクセスすることができないプロトタイプチェーン上のプロパティ) を見つけるのに便利です。アクセス可能なプロパティを列挙するには、配列内の重複を削除するだけで簡単に実現できます。</p> + +<h2 id="Creating_new_objects" name="Creating_new_objects">新しいオブジェクトの作成</h2> + +<p>JavaScript には数多くの定義済みオブジェクトがあります。さらに、独自のオブジェクトを定義できます。オブジェクトは{{jsxref("Operators/Object_initializer","オブジェクト初期化子","","true")}}を使って作成することができます。他にも、まずコンストラクター関数を作り、その関数を <code>new</code> 演算子との組み合わせで呼び出すことでオブジェクトをインスタンス化することもできます。</p> + +<h3 id="Using_object_initializers" name="Using_object_initializers"><span id="Object_initializers">オブジェクト初期化子の使用</span></h3> + +<p>コンストラクター関数を使ったオブジェクトの作成のほかに、<a href="/ja/docs/Web/JavaScript/Reference/Operators/Object_initializer">オブジェクト初期化子</a>を使用してオブジェクトを作成することができます。オブジェクト初期化子を使うことを、オブジェクトをリテラル表記法で作ると表現することがあります。「オブジェクト初期化子」は、C++ で使われる用語と同じ意味です。</p> + +<p>オブジェクト初期化子を使ったオブジェクトの構文は次のようになります。</p> + +<pre class="brush: js notranslate">var obj = { property_1: value_1, // property_# は識別子だったり、 + 2: value_2, // 数値だったり、 + // ..., + 'property n': value_n }; // 文字列だったりします +</pre> + +<p><code>obj</code> は新しいオブジェクトの名前、<code>property_<var>i</var></code> は識別子 (名前、数値、または文字列リテラルのいずれか)、<code>value_<var>i</var></code> は式で、その値が <code>property_<var>i</var></code> に代入されます。<code>obj</code> と代入は任意です。もし他の場所でこのオブジェクトを参照する必要がないのなら、変数への代入は不要です。(なお、もしオブジェクトが文の書かれる場所に現れる場合は、リテラルがブロック文と混同されないように、オブジェクトリテラルを括弧で囲む必要がある場合があります。)</p> + +<p>オブジェクト初期化子は式であり、それぞれのオブジェクト初期化子は、それが現れる文が実行されるたびにオブジェクトを作成する結果になります。オブジェクト初期化子が同一であっても、作成されるオブジェクトは互いに等しいとはみなされません。オブジェクトは <code>new Object()</code> の呼び出しが行われたかのように作成されます。つまり、オブジェクトリテラル式から作成されるオブジェクトは <code>Object</code> のインスタンスです。</p> + +<p>次の文では、式 <code>cond</code> が true の場合にのみオブジェクトを作り、変数 <code>x</code> に代入します。</p> + +<pre class="brush: js notranslate">if (cond) var x = {greeting: 'hi there'}; +</pre> + +<p>次の例では 3 つのプロパティを持った <code>myHonda</code> を作ります。なお、<code>engine</code> プロパティもまた、プロパティを持つオブジェクトです。</p> + +<pre class="brush: js notranslate">var myHonda = {color: 'red', wheels: 4, engine: {cylinders: 4, size: 2.2}}; +</pre> + +<p>配列を作るためにオブジェクト初期化子を使うこともできます。<a href="/ja/docs/Web/JavaScript/Guide/Grammar_and_types#Array_literals">配列リテラル</a>を参照してください。</p> + +<h3 id="Using_a_constructor_function" name="Using_a_constructor_function">コンストラクター関数の使用</h3> + +<p>別の方法として、次の 2 つの手順でオブジェクトを作ることができます。</p> + +<ol> + <li>コンストラクター関数を記述してオブジェクトの型を定義します。この時、便宜上の理由から慣習的に、1 文字目は大文字とします。</li> + <li><code>new</code> でオブジェクトのインスタンスを作成します。</li> +</ol> + +<p>オブジェクトの型を定義するには、名前、プロパティ、メソッドを指定するオブジェクト型用の関数を作ります。例えば、車についてのオブジェクト型を作りたいとしましょう。このオブジェクト型は <code>car</code> と呼ばれ、make、model、year のプロパティを持たせたいとします。これを行うには、以下のような関数を書きます。</p> + +<pre class="brush: js notranslate">function Car(make, model, year) { + this.make = make; + this.model = model; + this.year = year; +} +</pre> + +<p><code>this</code> を使うことで、関数に渡されたオブジェクトのプロパティに対し値を代入していることに注意してください。</p> + +<p>以下のようにして <code>mycar</code> と呼ばれるオブジェクトを作成できるようになりました。</p> + +<pre class="brush: js notranslate">var mycar = new Car('Eagle', 'Talon TSi', 1993); +</pre> + +<p>この文では <code>mycar</code> を作り、プロパティに指定した値を代入します。<code>mycar.make</code> の値は文字列 "Eagle" になり、<code>mycar.year</code> は整数 1993 になり、といった具合です。</p> + +<p><code>new</code> を使って <code>car</code> オブジェクトをいくつでも作れます。例えば、</p> + +<pre class="brush: js notranslate">var kenscar = new Car('Nissan', '300ZX', 1992); +var vpgscar = new Car('Mazda', 'Miata', 1990); +</pre> + +<p>オブジェクトは、別のオブジェクトをプロパティとして持つことができます。例えば、<code>person</code> という名前のオブジェクトを次のように定義しましょう。</p> + +<pre class="brush: js notranslate">function Person(name, age, sex) { + this.name = name; + this.age = age; + this.sex = sex; +} +</pre> + +<p>それから、2 個の新しい <code>person</code> オブジェクトを次のようにインスタンス化します。</p> + +<pre class="brush: js notranslate">var rand = new Person('Rand McKinnon', 33, 'M'); +var ken = new Person('Ken Jones', 39, 'M'); +</pre> + +<p>そして、<code>Car</code> の定義を <code>person</code> オブジェクトを取る <code>owner</code> プロパティを含むよう、以下のように書き換えることができます。</p> + +<pre class="brush: js notranslate">function Car(make, model, year, owner) { + this.make = make; + this.model = model; + this.year = year; + this.owner = owner; +} +</pre> + +<p>新しいオブジェクトをインスタンス化するには、以下のようにします。</p> + +<pre class="brush: js notranslate">var car1 = new Car('Eagle', 'Talon TSi', 1993, rand); +var car2 = new Car('Nissan', '300ZX', 1992, ken); +</pre> + +<p>新しいオブジェクトを作成する際、上の文ではリテラル文字列や整数値を渡す代わりに、オブジェクト <code>rand</code> と <code>ken</code> を引数 owner として渡していることに注意してください。そして、car2 の owner の名前を知りたければ、以下のプロパティでアクセスできます。</p> + +<pre class="brush: js notranslate">car2.owner.name +</pre> + +<p>なお、既に定義されたオブジェクトにはいつでもプロパティを追加することができます。例えば、以下の文は、</p> + +<pre class="brush: js notranslate">car1.color = 'black'; +</pre> + +<p>car1 にプロパティ <code>color</code> を追加し、そこに "black" という値を代入します。しかしながら、これは他のどのオブジェクトにも影響しません。同じ型のすべてのオブジェクトに新しいプロパティを追加するには、<code>car</code> オブジェクト型の定義にそのプロパティを追加する必要があります。</p> + +<h3 id="Using_the_Object.create_method" name="Using_the_Object.create_method">Object.create メソッドの使用</h3> + +<p>オブジェクトは {{jsxref("Object.create()")}} メソッドを使用して作成することもできます。このメソッドは、コンストラクター関数の定義なしに作りたいオブジェクトのプロトタイプを選べるため、とても便利です。</p> + +<pre class="brush: js notranslate">// Animal のプロパティとメソッドをカプセル化 +var Animal = { + type: 'Invertebrates', // プロパティの既定値、「無脊椎動物」 + displayType: function(){ // Animal の種類を表示するメソッド + console.log(this.type); + } +} + +// animal1 という新しい animal 型を作成 +var animal1 = Object.create(Animal); +animal1.displayType(); // 出力 : Invertebrates + +// Fishes という新しい animal 型を作成 +var fish = Object.create(Animal); +fish.type = 'Fishes'; +fish.displayType(); // 出力 : Fishes</pre> + +<h2 id="Inheritance" name="Inheritance">継承</h2> + +<p>JavaScript のすべてのオブジェクトは、1 つ以上の他のオブジェクトを継承しています。継承元になるオブジェクトはプロトタイプと呼ばれ、継承されたプロパティはコンストラクターの <code>prototype</code> オブジェクトにあります。詳細は<a href="/ja/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain">継承とプロトタイプチェーン</a>を参照してください。</p> + +<h2 id="Indexing_object_properties" name="Indexing_object_properties">オブジェクトプロパティのインデックス付け</h2> + +<p>オブジェクトのプロパティは、プロパティ名または番号インデックスで参照することができます。名前によってプロパティを初期定義した場合、常に名前を使って参照する必要があり、インデックスによってプロパティを初期定義した場合、常にインデックスを使って参照する必要があります。</p> + +<p>この制限は、(以前に <code>Car</code> オブジェクト型に対して行ったように) コンストラクター関数でオブジェクトとプロパティを作るときや、個々のプロパティを明示的に定義した場合 (例えば <code>myCar.color = "red"</code>) に適用されます。初めにオブジェクトプロパティをインデックスで、たとえば <code>myCar[5] = "25 mpg"</code> のように定義した場合、以降そのプロパティは <code>myCar[5]</code> としてしか参照できません。</p> + +<p>このルールの例外は、<code>forms</code> 配列型オブジェクトのような HTML から反映された配列型オブジェクトです。この配列型オブジェクトにあるオブジェクトは、いつでもインデックス (文書中に現れる位置を基準としたもの) と名前 (定義されていれば) のどちらからも参照できます。例えば、文書内の 2 つ目の <code><FORM></code> タグが <code>NAME</code> 属性として "myForm" という値を持つとき、フォームは <code>document.forms[1]、</code><code>document.forms["myForm"]</code> 、<code>document.forms.myForm</code> のいずれかで参照できます。</p> + +<h2 id="Defining_properties_for_an_object_type" name="Defining_properties_for_an_object_type">オブジェクト型に対するプロパティの定義</h2> + +<p><code>prototype</code> プロパティを使用すると、定義済みのオブジェクト型に対してプロパティを追加することができます。このプロパティはオブジェクトの 1 つのインスタンスだけではなく、指定された型のすべてのオブジェクトで共有されます。次のコードはすべての <code>car</code> 型のオブジェクトに <code>color</code> プロパティを追加し、オブジェクト <code>car1</code> の <code>color</code> プロパティに値を代入します。</p> + +<pre class="brush: js notranslate">Car.prototype.color = null; +car1.color = 'black'; +</pre> + +<p>詳しくは、<a href="/ja/docs/JavaScript/Reference">JavaScript リファレンス</a>内にある、<code>Function</code> オブジェクトの <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype" title="ja/docs/JavaScript/Reference/Global Objects/Function/prototype"><code>prototype</code> プロパティ</a>を参照してください。</p> + +<h2 id="Defining_methods" name="Defining_methods">メソッドの定義</h2> + +<p>メソッドはオブジェクトに関連付けられた関数です。簡単に言えば、オブジェクトのプロパティである関数です。メソッドは通常の関数と同じ方法で定義されますが、オブジェクトのプロパティに代入される点が異なります。詳細は<a href="/ja/docs/Web/JavaScript/Reference/Functions/Method_definitions">メソッドの定義</a>を参照してください。例えば、</p> + +<pre class="brush: js notranslate">objectName.methodname = functionName; + +var myObj = { + myMethod: function(params) { + // ...処理を行う + } + + // これでも動作します + + myOtherMethod(params) { + // ...他の処理を行う + } +}; +</pre> + +<p>ここで <code>objectName</code> は既存のオブジェクトを、<code>methodname</code> はメソッドを割り当てたい名前を、<code>function_name</code> は関数の名前を指しています。</p> + +<p>そして次のようにオブジェクトに続けてメソッドを呼び出します。</p> + +<pre class="brush: js notranslate">object.methodname(params); +</pre> + +<p>オブジェクトのコンストラクター関数にメソッドの定義を含めることで、オブジェクト型に対してメソッドを定義することができます。以前に定義した <code>car</code> オブジェクトのプロパティを整形して表示する関数を定義するとします。例えば以下の通りです。</p> + +<pre class="brush: js notranslate">function displayCar() { + var result = '美しい ' + this.year + '年式 ' + this.make + + ' ' + this.model; + pretty_print(result); +} +</pre> + +<p><code>pretty_print</code> は水平線と文字列を表示する関数です。<code>this</code> を使ってメソッドが属するオブジェクトを参照していることに注意してください。</p> + +<p>次の文をオブジェクトの定義に追加すると、この関数を <code>car</code> のメソッドにできます。</p> + +<pre class="brush: js notranslate">this.displayCar = displayCar; +</pre> + +<p>そして、<code>car</code> の完全な定義は次のようになります。</p> + +<pre class="brush: js notranslate">function Car(make, model, year, owner) { + this.make = make; + this.model = model; + this.year = year; + this.owner = owner; + this.displayCar = displayCar; +} +</pre> + +<p>次のようにして、個々のオブジェクトに対して <code>displayCar</code> メソッドを呼び出せます。</p> + +<pre class="brush: js notranslate">car1.displayCar(); +car2.displayCar(); +</pre> + +<h2 id="Using_this_for_object_references" name="Using_this_for_object_references">オブジェクト参照のための <code>this</code> の使用</h2> + +<p>JavaScript には、メソッド内で現在のオブジェクトを参照するための <code><a href="/ja/docs/Web/JavaScript/Reference/Operators/this">this</a></code> +という特別なキーワードがあります。以下の例には、<code>Manager</code> と <code>Intern</code> という 2 つのオブジェクトがあり、それぞれが独自の <code>name</code>, <code>age</code>, <code>job</code> を持っています。関数 <code>sayHi()</code> の中に <code>this.name</code> があることに注目してください。2 つのオブジェクトに追加してそれらを呼び出すことで、<code>'Hello, My name is'</code> を返し、その特定のオブジェクトから <code>name</code> の値を追加しています。</p> + +<pre class="brush: js notranslate">const Manager = { + name: "John", + age: 27, + job: "Software Engineer" +} +const Intern = { + name: "Ben", + age: 21, + job: "Software Engineer Intern" +} + +function sayHi() { + console.log('Hello, my name is', this.name) +} + +// 両方のオブジェクトに sayHi 関数を追加 +Manager.sayHi = sayHi; +Intern.sayHi = sayHi; + +Manager.sayHi() // Hello, my name is John' +Intern.sayHi() // Hello, my name is Ben' +</pre> + +<p><code>this</code> は自身が入っているオブジェクトを参照します。上記の例に <code>howOldAmI()</code> という新しい関数を作って、その人の年齢を示す文をログに出力できます。</p> + +<pre class="brush: js notranslate">function howOldAmI (){ + console.log('I am ' + this.age + ' years old.') +} +Manager.howOldAmI = howOldAmI; +Manager.howOldAmI() // I am 27 years old. +</pre> + +<h2 id="Defining_getters_and_setters" name="Defining_getters_and_setters">ゲッターとセッターの定義</h2> + +<p><a href="/ja/docs/Web/JavaScript/Reference/Functions/get">ゲッター</a>は、特定のプロパティの値を取得するメソッドです。<a href="/ja/docs/Web/JavaScript/Reference/Functions/set">セッター</a> は、特定のプロパティの値を設定するメソッドです。ゲッターとセッターは、新しいプロパティの追加をサポートする定義済みのコアオブジェクト、またはユーザー定義オブジェクト上で定義できます。</p> + +<p>ゲッターとセッターは次のどちらの方法でも作れます。</p> + +<ul> + <li><a href="#Object_initializers">オブジェクト初期化子</a>を使用して定義する。</li> + <li>ゲッターやセッターを追加するメソッドを使用して、任意のオブジェクトへ後から追加する。</li> +</ul> + +<p><a href="#Object_initializers">オブジェクト初期化子</a>を使用してゲッターとセッターを定義するには、ゲッターメソッドの前に <code>get</code> を、セッターメソッドの前に <code>set</code> を記述するだけです。当然ですがゲッターメソッドは引数を想定してはいけませんし、セッターメソッドは正確に 1 つの引数（新しい設定値）を期待します。 +例えば、以下のようになります。</p> + +<pre class="brush: js notranslate">var o = { + a: 7, + get b() { + return this.a + 1; + }, + set c(x) { + this.a = x / 2; + } +}; + +console.log(o.a); // 7 +console.log(o.b); // 8 <-- この時点で get b() メソッドが開始されます。initiated. +o.c = 50; // <-- この時点で set c(x) メソッドが開始されます。 +console.log(o.a); // 25 +</pre> + +<p><code>o</code> オブジェクトのプロパティは以下の通りです。</p> + +<ul> + <li><code>o.a</code> — 数値</li> + <li><code>o.b</code> — <code>o.a</code> + 1 を返すゲッター</li> + <li><code>o.c</code> — <code>o.c</code> に設定される値を 1/2 にしたものを <code>o.a</code> に設定するセッター</li> +</ul> + +<p><code>[gs]et <em>propertyName</em>(){ }</code> という構文により誤解を招くかもしれませんが、オブジェクトリテラル内で "[gs]et <em>property</em>()" によって定義されたゲッターやセッターの関数名は、（<code>__define[GS]etter__</code> とは対照的に）ゲッターやセッター自体の名前ではないことに注意してください。</p> + +<p>ゲッターとセッターはまた、<code>Object.defineProperties</code> メソッドを使用して、生成後のオブジェクトにいつでも追加できます。このメソッドの第1引数はゲッターまたはセッターを定義するオブジェクトです。第2引数はプロパティ名がゲッターまたはセッターの名前で、プロパティ値がゲッターまたはセッター関数を定義するオブジェクトです。前回の例と同じゲッターとセッターを定義する例を見てみましょう。</p> + +<pre class="brush: js notranslate">var o = { a: 0 }; + +Object.defineProperties(o, { + 'b': { get: function() { return this.a + 1; } }, + 'c': { set: function(x) { this.a = x / 2; } } +}); + +o.c = 10; // 'a' プロパティに 10 / 2 (5) を代入するセッターを実行します +console.log(o.b); // a + 1 つまり 6 を与えるゲッターを実行します +</pre> + +<p>2 つの方法のどちらを選ぶのかは、自身のプログラミングスタイルや行っている作業によります。すでにオブジェクト初期化子を気に入っているのなら、プロトタイプの定義時にほとんどの場合、最初の書式を選ぶでしょう。この書式はより簡潔で自然です。しかしながら、ゲッターやセッターを後から追加しなければならないとき — 自分がプロトタイプやオブジェクトの詳細を書いていない場合 — には、2番目の書式だけが使えます。2番目の書式には JavaScript の動的な性質が表現されています — ただし、コードを読みにくく理解しづらいものにする可能性があります。</p> + +<h2 id="Deleting_properties" name="Deleting_properties">プロパティの削除</h2> + +<p>継承されたものでないプロパティは {{jsxref("Operators/delete","delete")}} 演算子を使って削除できます。以下のコードはプロパティを削除する方法です。</p> + +<pre class="brush: js notranslate">// 2 つのプロパティ a と b を持つ新しいオブジェクト myobj を作成。 +var myobj = new Object; +myobj.a = 5; +myobj.b = 12; + +// プロパティ a を削除すると、myobj には b プロパティだけが残る。 +delete myobj.a; +console.log ('a' in myobj); // yields "false" +</pre> + +<p><code>delete</code> 演算子はまた、<code>var</code> キーワードを使わずに定義されたグローバル変数の削除にも使えます。</p> + +<pre class="brush: js notranslate">g = 17; +delete g; +</pre> + +<h2 id="Comparing_Objects" name="Comparing_Objects">オブジェクトの比較</h2> + +<p>JavaScript では、オブジェクトは参照型です。2 つの異なるオブジェクトは、同じプロパティを持っていても等値とは見なされません。同じオブジェクトへの参照を比較した時のみ真となります。</p> + +<pre class="brush: js notranslate">// 2 つの変数は、同じプロパティを持つ 2 つの異なるオブジェクト +var fruit = {name: 'apple'}; +var fruitbear = {name: 'apple'}; + +fruit == fruitbear; // false が返される +fruit === fruitbear; // false が返される</pre> + +<pre class="brush: js notranslate">// 2 つの変数、オブジェクトは 1 つ +var fruit = {name: 'apple'}; +var fruitbear = fruit; // fruitbear に fruit オブジェクトへの参照を代入 + +// fruit と fruitbear は同じオブジェクトを指している +fruit == fruitbear; // true が返される +fruit === fruitbear; // true が返される + +fruit.name = 'grape'; +console.log(fruitbear); // { name: "apple" } ではなく { name: "grape" } と出力される +</pre> + +<p>比較演算子についての詳細は、リファレンスの<a href="/ja/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">比較演算子</a>の節をご覧ください。</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>より詳しく知りたければ、当ガイドの<a href="/ja/docs/Web/JavaScript/Guide/Details_of_the_Object_Model">オブジェクトモデルの詳細</a>をお読みください。</li> + <li>ECMAScript 2015 のクラス (オブジェクトを作る新しい方法) について知りたければ、リファレンスの <a href="/ja/docs/Web/JavaScript/Reference/Classes">JavaScript クラス</a>の節をお読みください。</li> +</ul> + +<p>{{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Details_of_the_Object_Model")}}</p> |