プロパティアクセサー

プロパティアクセサーはオブジェクトのプロパティへのアクセスを提供するもので、ドット表記法またはブラケット表記法を使用します。

このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。

構文

object.property
object['property']

解説

オブジェクトは実際には連想配列 (別名 map、 dictionary、 hash、 lookup table) とみなすことができます。この配列におけるキーはオブジェクトのプロパティ名です。一般的に、オブジェクトのプロパティについて説明する際には、プロパティとメソッドを区別します。しかし、プロパティとメソッドの区別は慣習的なものにすぎません。メソッドは単なるプロパティであり、言わば、例えば値として Function オブジェクトのインスタンスへの参照を持っているものです。

プロパティにアクセスするには、ドット表記法とブラケット表記法の2通りがあります。

ドット表記法

get = object.property;
object.property = set;

property は有効な JavaScript 識別子である必要があります。例えば object.$1 は有効ですが、 object.1 は有効ではありません。

document.createElement('pre');

ここでは、 document から "createElement" という名前のメソッドが検索され、呼び出されます。

指数や小数点を持たない数値リテラルにメソッドを使用する場合、メソッド呼び出しをするドットの前にホワイトスペースを入れることで、ドットが小数点とみなされることを防ぐことができます。

77 .toExponential();
// or
77
.toExponential();
// or
(77).toExponential();
// or
77..toExponential();
// or
77.0.toExponential();
// because 77. === 77.0, no ambiguity

ブラケット表記法

get = object[property_name];
object[property_name] = set;

property_name は文字列またはシンボルです。この文字列は有効な識別子である必要はなく、任意の値、例えば "1foo", "!bar!", または " " (空白) であっても構いません。

document['createElement']('pre');

これは前の例とまったく同じです。

ブラケット表記法の前には空白を入れることができます。

document ['createElement']('pre');

プロパティ名

プロパティ名は文字列またはシンボルです。それ以外の値は、数値を含めて、文字列へ強制変換されます。

var object = {};
object['1'] = 'value';
console.log(object[1]);

これは、 1 が '1' に強制変換されるので、 "value" を出力します。

var foo = {unique_prop: 1}, bar = {unique_prop: 2}, object = {};
object[foo] = 'value';
console.log(object[bar]);

foo と bar は同じ文字列に変換されるので、こちらも "value" を出力します。 SpiderMonkey JavaScript エンジンでは、この文字列は "[object Object]" となるでしょう。

メソッドのバインド

メソッドはそのメソッドが所属するオブジェクトにバインドされているわけではありません。特に、 this はメソッド内で固定されていません。つまり、 this は必ずしもそのメソッドを含んでいるオブジェクトを参照しているとは限りません。 this は関数呼び出し時に「渡される」ものです。メソッドのバインドを参照してください。

eval におけるメモ

JavaScript 初心者はしばしば、代わりにブラケット表記法を使えるところで eval() を使用してしまう間違いを犯します。例えば、以下のような構文がたくさんのスクリプトで見られます。

x = eval('document.forms.form_name.elements.' + strFormControl + '.value');

eval() は低速であり、可能な限り避けるべきです。また、 strFormControl は ID を必要としますが、フォームコントロールの名前と ID は必須ではありません。代わりにブラケット表記法を使った方が良いでしょう。

x = document.forms['form_name'].elements[strFormControl].value;

仕様書

ブラウザーの互換性

関連情報

• Object
• Object.defineProperty()
• Optional chaining