プロパティアクセサー

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

構文

object.property
object['property']

解説

オブジェクトは実際には連想配列 (別名 mapdictionaryhashlookup 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]);

foobar は同じ文字列に変換されるので、こちらも "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 Latest Draft (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 で実装。

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイルサーバー
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung InternetNode.js
Property accessorsChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 ありnodejs 完全対応 あり

凡例

完全対応  
完全対応

関連情報