JavaScript のプロパティ アクセサーを理解する

JavaScript におけるプロパティ アクセサーは、オブジェクトのプロパティにアクセスできるようにするメカニズムです。これを行うには、主に 2 つの方法があります。ドット表記と括弧表記です。

ドット表記

ドット表記はプロパティにアクセスする最も一般的な方法です。プロパティ名に続けてドット (.) を使用するだけです。

括弧表記

ブラケット表記は、プロパティ名が動的である場合、または有効な識別子ではない場合 (スペースや特殊文字が含まれている場合など) に便利です。角括弧 ([]) を使用し、プロパティ名を文字列として渡します

JavaScript でのオブジェクトの作成

この言語は、オブジェクトを迅速に作成するためのオブジェクト リテラル表記法として知られる構文を提供します。オブジェクト リテラルは中括弧で示されます。次の例では、プロパティを持たない空のオブジェクトを作成します。

var animal = {};

中括弧の内側では、プロパティとその値がキーと値のペアのリストとして指定されます。
キーには文字列または識別子を指定でき、値には任意の有効な式を指定できます。キーと値のペアのリストはカンマで区切られ、各キーと値はコロンで区切られます。

次の例では、リテラル表記を使用して、3 つのプロパティを持つオブジェクトを作成します。

最初のプロパティである動物が 1 位を保持します。
2 番目のプロパティ dolphin は文字列を使用して指定され、文字列値も格納されます。 3 番目のプロパティである mammal は、空のオブジェクトを格納します。

var animal = {
  dolphin: 1,
  "swim": "some string",
  mammal: {
  }
};

各プロパティは別の行に記述され、インデントされています。オブジェクト全体を 1 行で記述することもできますが、この形式の方がコードが読みやすくなります。これは、多くのプロパティを持つオブジェクトやネストされたオブジェクトに特に当てはまります。

JavaScript には、オブジェクトのプロパティにアクセスするための 2 つの表記法が用意されています。

最初の最も一般的な形式は、ドット表記として知られています。
ドット表記では、ホスト オブジェクトの名前、ピリオド (またはドット)、プロパティ名を指定してプロパティにアクセスします。

ドット表記

ドット表記はプロパティにアクセスする最も一般的な方法です。プロパティ名に続けてドット (.) を使用するだけです。例えば：

次の例は、ドット表記を使用してプロパティの読み取りと書き込みを行う方法を示しています。 object.dolphin
の場合 最初は値 1 を保持していましたが、このステートメントを実行すると値は 2 になります。

• animal.dolphon にまだ値がない場合、値は未定義になることに注意してください。

animal.dolphin = animal.dolphin   1;

オブジェクトのプロパティにアクセスするための構文は、括弧表記として知られています。 角かっこ表記では、オブジェクト名の後に一連の角かっこが続きます。
角かっこ内では、プロパティ名は文字列として指定されます。
前述のドット表記の例は、括弧表記を使用するように以下に書き直されました。コードは異なって見えるかもしれませんが、機能的には前の例と同等です。

object["dolphin"] = object["dolphin"]   1;

ブラケット表記は、変数でプロパティ名のすべてまたは一部を指定できるため、ドット表記よりも表現力が高くなります。
これが可能なのは、JavaScript インタープリターが角括弧内の式を自動的に文字列に変換し、対応するプロパティ を取得するためです。

次の例は、括弧表記を使用してプロパティ名をオンザフライで作成する方法を示しています。この例では、プロパティ名 foo は、変数 d の内容と文字列「dolphin」を連結することによって作成されます。

var d = "d";

object[d   "dolphin"] = "bar";

括弧表記では、ドット表記で禁止されている文字をプロパティ名に含めることもできます。
たとえば、次のステートメントは括弧表記では完全に正当です。ただし、同じプロパティ名をドット表記で作成しようとすると、構文エラーが発生します。

object["!@#$%^&*()."] = true;

ネストされたプロパティへのアクセス

ネストされたオブジェクトのプロパティには、ドット参照や括弧参照を連結することでアクセスできます。
たとえば、次のオブジェクトには dolphin という名前の ネストされたオブジェクト が含まれており、このオブジェクトには mammal という名前の別のオブジェクトが含まれており、値 1 を保持する years という名前のプロパティがあります。

var animal = {
  dolphin: {
    mammal: {
      years: 1
    }
  }
};

次の式は、ネストされたプロパティ、years にアクセスします。最初の式では ドット表記 が使用され、2 番目の式では 角括弧表記 が使用されます。
3 番目の式は、両方の表記法を組み合わせて同じ結果を実現します.

animal.dolphin.mammal.lungs;
animal["dolphin"]["mammal"]["years"];
animal["dolphin"].mammal["years"];

前の例で示したような式は、不適切に使用するとパフォーマンスが低下する可能性があります。
各 ドットまたは括弧式 の評価には時間がかかります。

同じプロパティが複数回使用される場合は、そのプロパティに 1 回アクセスし、その後のすべての使用のためにその値をローカル変数に保存する方が合理的です。次の例では、ループ内で bar を何度も使用します。ただし、同じ値を何度も計算して時間を無駄にする代わりに、bar はローカル変数に保存されます。

var years = animal.dolphin.mammal.years;
var count = 0;

for (var i = 0; i 




  
  
  メソッドとしての関数


関数がオブジェクトのプロパティとして使用される場合、それはメソッドと呼ばれます。プロパティと同様に、メソッドもオブジェクト リテラル表記で指定できます。次の例は、これがどのように実現されるかを示しています。


var animal = {
  sum: function(dolphin, years) {
    return dolphin   years;
  }
};




メソッドは、ドットと括弧表記を使用して呼び出すこともできます。 

次の例では、両方の表記法を使用して、前の例の sum() メソッドを 呼び出し ます。


ドルフィン.sum(1, 2);
ドルフィン["合計"](1, 2);

dolphin.sum(1, 2);
dolphin["sum"](1, 2);


  
  
  プロパティとメソッドの追加


オブジェクト リテラル表記は、新しいオブジェクトを作成するには便利ですが、既存のオブジェクトにプロパティやメソッドを追加することはできません。
 幸いなことに、
オブジェクトに新しいデータを追加することは、代入ステートメントを作成するのと同じくらい簡単です。 

次の例では、
空のオブジェクトを作成します。 
次に、代入ステートメントを使用して、イルカと哺乳類の 2 つのプロパティと 
 メソッド が追加されます。 
この例では 
ドット表記を使用していますが、括弧表記も同様に機能することに注意してください。


var 動物 = {};
動物.イルカ = 1;
動物.哺乳類 = null;
動物.年 = 関数() {
  return "私は 5 歳です()";
};
dolphin.sum(1, 2);
dolphin["sum"](1, 2);

まとめ

オブジェクトは、プリミティブと他のオブジェクトから構築される複合データ型です。オブジェクトの構成要素は、一般にそのフィールドまたはプロパティと呼ばれます。プロパティは、オブジェクトのいくつかの側面を説明するために使用されます。たとえば、プロパティでは、リストの長さ、犬の色、人の生年月日を記述することができます。

したがって、JavaScript の 
オブジェクト構文 は言語の基礎として機能するため、理解することが非常に重要です。
オブジェクト指向プログラミングを理解する前に、まずオブジェクトを理解する必要があります。

ドット表記: プロパティ名が有効な識別子の場合に使用します。
ブラケット表記: プロパティ名が動的である場合、または有効な識別子ではない場合に使用します。 これらのアクセサーは、オブジェクトとそのプロパティを効果的に操作するための JavaScript の基本です。