まくまくJavaScriptノート
オブジェクトの基本
2012-10-27

オブジェクトの生成

JavaScript のオブジェクトは、プロパティ名とプロパティ値のペアの集合です。 オブジェクトは、以下のようなリテラルで生成できます。

{プロパティ名:プロパティ値, プロパティ名:プロパティ値, ...}

以下の 3 つの変数は、プロパティ数の異なるオブジェクトの参照を保持しています。

var obj1 = {};
var obj2 = {"x":100};
var obj3 = {"x":100, "y":200};

print(typeof obj1);  //=> "object"
print(typeof obj2);  //=> "object"
print(typeof obj3);  //=> "object"

プロパティ名として使えるもの

プロパティ名には、以下のように、文字列、識別子、数値のいずれかを指定することができます。

{"abc": 100}  // ダブルクォート囲いの文字列
{'abc': 100}  // シングルクォート囲いの文字列
{abc: 200}    // 識別子
{100: 300}    // 数値

ただし、JSON の仕様としては、ダブルクォートで囲んだ文字列しかプロパティ名にしか使えないことになっています。

{"abc": 100}  // ダブルクォート囲いの文字列

JSON を意識したコーディングを行うのであれば、上記のように、ダブルクォートで囲んだ文字列だけをプロパティ名として使うのがよいでしょう。

プロパティ値として使えるもの

プロパティ値には任意の値、オブジェクトを格納できます。

var obj = {
    "num": 123,
    "string": "hello",
    "array": [10, 20, 30],
    "object": {"x":1, "y":2}
}
print(obj.num);  //=> 123
print(obj.string);  //=> hello
print(obj.array[0]);  //=> 10
print(obj.object.x);  //=> 1

プロパティ値には、関数オブジェクトを持たせることもできます。 JavaScript には、クラスやメソッドの概念はありませんが、プロパティとして関数を持たせることで、そのオブジェクトのメソッドのように呼び出すことができます。

var obj = {
    "name": "Joe",
    "greet": function() { print("Hello " + this.name); }
}
obj.greet();  //=> "Hello Joe"

プロパティ値の参照

プロパティ値を参照するには、以下のいずれかの形式を使用します。

obj.xyz
obj["xyz"]

前者の形式の方が、短くすっきり書けますが、プロパティ名には識別子として使える文字しか使用できません。可能であれば、前者の形式で記述できるように、プロパティ名を付けるのがよいでしょう。

プロパティは自由に追加できる

オブジェクトリテラルによってオブジェクトを生成した後でも、オブジェクトには自由にプロパティを追加できます。 プロパティの追加は、代入するだけで行えます。

var point = {}
point.x = 100;  // 新規プロパティ x の追加
point.y = 200;  // 新規プロパティ y の追加
print(point.x);  //=> 100
print(point.y);  //=> 200
2012-10-27