プロパティアクセサー
プロパティアクセサーはオブジェクトのプロパティへのアクセスを提供するもので、ドット表記法またはブラケット表記法を使用します。
試してみましょう
構文
object.property;
object["property"];
解説
オブジェクトは実際には連想配列 (別名 map、 dictionary、 hash、 lookup table) とみなすことができます。この配列におけるキーはオブジェクトのプロパティ名です。
一般的に、オブジェクトのプロパティについて説明する際には、プロパティとメソッドを区別します。しかし、プロパティとメソッドの区別は慣習的なものにすぎません。メソッドは呼び出すことができるプロパティです (例えば、値として Function
インスタンスへの参照を持っているようなものです)。
プロパティにアクセスするには、ドット表記法とブラケット表記法の 2 通りがあります。
ドット表記法
object.property
の構文では、 property
は有効な JavaScript の 識別子でなければなりません。 (ECMAScript 標準では、プロパティの名前は技術的には "IdentifierNames" であり、 "Identifiers" ではないので、予約語を使用することができますがお勧めしません)。例えば、 object.$1
は有効であるのに対し、 object.1
は有効ではありません。
const variable = object.property_name;
object.property_name = value;
const object = {};
object.$1 = 'foo';
console.log(object.$1); // 'foo'
object.1 = 'bar'; // SyntaxError
console.log(object.1); // SyntaxError
ここで、 createElement
というメソッドを document
から取得し、呼び出します。
document.createElement("pre");
数値リテラルに対してメソッドを使用する場合で、その数値リテラルに指数や小数点がない場合、メソッド呼び出しをするドットの前にホワイトスペースを入れることで、ドットが小数点とみなされることを防ぐことができます。
77 .toExponential();
// or
77
.toExponential();
// or
(77).toExponential();
// or
77..toExponential();
// or
77.0.toExponential();
// 77.と77.0は同じものとして評価されます
ブラケット表記法
object[property_name]
の構文では、 property_name
は文字列またはシンボルです。ですから、これは任意の文字列、例えば '1foo'
、'!bar!'
、または ' '
(空白) であっても構いません。
const variable = object[property_name];
object[property_name] = value;
これは前の例とまったく同じです。
document["createElement"]("pre");
ブラケット表記法の前には空白を入れることができます。
document ["createElement"]("pre");
プロパティ名
プロパティ名は文字列またはシンボルです。それ以外の値は、数値を含めて、文字列へ強制変換されます。これは 'value'
を出力します。 1
が '1'
に強制変換されるからです。
let object = {};
object["1"] = "value";
console.log(object[1]);
こちらも 'value'
を出力します。foo
と bar
は同じ文字列に変換されるからです。
let foo = { unique_prop: 1 },
bar = { unique_prop: 2 },
object = {};
object[foo] = "value";
console.log(object[bar]);
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;
仕様書
Specification |
---|
ECMAScript Language Specification # sec-property-accessors |
ブラウザーの互換性
BCD tables only load in the browser