プロパティ アクセサー

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 にまだ値がない場合は、未定義になることに注意してください。

var animal = {};

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

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

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

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

animal.dolphin = animal.dolphin + 1;

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

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

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

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

var d = "d";

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

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

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

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

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

var animal = {};

メソッドとしての関数

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

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

メソッドは、ドットとブラケット表記を使用して呼び出すこともできます。
次の例では、両方の表記法を使用して、前の例の sum() メソッドを呼び出します。

animal.dolphin = animal.dolphin + 1;

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

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

次の例では、

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

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

概要

オブジェクトは、プリミティブと他のオブジェクトから構築される複合データ型です。オブジェクトの構成要素は、一般にそのフィールドまたはプロパティと呼ばれます。プロパティは、オブジェクトのいくつかの側面を説明するために使用されます。たとえば、プロパティでは、リストの長さ、犬の色、人の生年月日を記述することができます。
したがって、JavaScript
オブジェクト構文は言語の基礎として機能するため、理解することが非常に重要です。 オブジェクト指向プログラミングを理解する前に、まずオブジェクトを理解する必要があります。

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

コーディングを楽しんでください!

以上がプロパティ アクセサーの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。