オブジェクトのプロパティへのアクセスは、ドット表記法またはブラケット表記法を使用して行われます。

構文

object.property
object['property']

説明

オブジェクトは実際には連想配列(別名 mapdictionaryhashlookup table)とみなすことができます。この配列におけるキーはオブジェクトのプロパティ名です。一般的には、オブジェクトのプロパティについて説明する際にプロパティとメソッドをします。しかし、プロパティとメソッドの区別は、慣習的なものにすぎません。メソッドは呼び出すことができるプロパティ、つまり、メソッドは、言ってみれば、値として関数インスタンスへの参照を持つ場合などに、呼び出すことができるプロパティです。

プロパティにアクセスするには、ドット表記法とブラケット表記法の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');

プロパティ名

プロパティ名は文字列でなければなりません。つまり、文字列ではないオブジェクトはオブジェクトのキーとして利用できません。文字列ではないオブジェクトは、数値を含めて、toString メソッドを通じて文字列へ型変換されます。

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 を必要としない識別子を持つ必要があります。代わりにブラケット表記法を使った方が良いでしょう。

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 で実装。

ブラウザー実装状況

このページの互換性一覧表は構造化データから生成されます。データに協力したいのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。

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

凡例

完全対応  
完全対応

関連項目

ドキュメントのタグと貢献者

タグ: 
このページの貢献者: mfuji09, YuichiNukiyama, teoli, ethertank, Potappo
最終更新者: mfuji09,