プロパティアクセサーはオブジェクトのプロパティへのアクセスを提供するもので、ドット表記法またはブラケット表記法を使用します。
このデモのソースファイルは 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;
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
ECMAScript (ECMA-262) Property Accessors の定義 |
現行の標準 | |
ECMAScript 2015 (6th Edition, ECMA-262) Property Accessors の定義 |
標準 | |
ECMAScript 5.1 (ECMA-262) Property Accessors の定義 |
標準 | |
ECMAScript 1st Edition (ECMA-262) Property Accessors の定義 |
標準 | 初回定義。JavaScript 1.0 で実装。 |
ブラウザーの互換性
BCD tables only load in the browser