Garden Place | オブジェクト

Garden Place TOP 技術ガーデン JavaScript.com オブジェクト - 操作

いまをときめくJavaScriptに関する知識と技術の向上を目指しながら、
インフォニック発JavaScriptライブラリを世界に発信することを目論むプロジェクトです。

他にもWebアプリケーションにおけるUI構築技術全般をターゲットにしています。

公開日：2007.12.06

オブジェクト - 操作

今回はオブジェクトへの理解を深める為にもう少しオブジェクトの操作をしてみましょう。また、同時に配列と連想配列についても説明したいと思います。

オブジェクトを作成する方法は

var character = {};

ですね。

プロパティの操作

ではこのオブジェクトにプロパティを追加していきましょう。

character.name = 'ホゲ';
character.age = 20;

では次にそれぞれのプロパティを表示してみます。

alert(character.name);　// 「ホゲ」と表示

オブジェクトにつづけて.(ピリオド)と書くことでそのオブジェクトのプロパティ値を参照できます。

さらにオブジェクトのプロパティにオブジェクトを持たせる事もできます。

character.item = {};

プロパティを持たせるなら

character.item.weapon = '槍';

連想配列

オブジェクトのプロパティにアクセスするにはもう一つ別の方法があります。

alert(character['name']);　// 「ホゲ」と表示

配列のアクセス方法と似ていますね。実はJavaScriptのオブジェクトは全て連想配列となっています。連想配列とは配列の値に対して、数値のインデックスの代わりに任意のキーでアクセスすることのできる配列です。 perlなどの言語ではハッシュと呼ばれ、javaではMapと呼ばれるオブジェクトと同様のものです。

連想配列も通常の配列のように,(カンマ)区切りで一度に宣言する事ができます。では上記で作成したオブジェクトを一度に作成してみましょう。

var character = {name:'ホゲ', age:20, item: {weapon:'槍'}};

通常の配列と違うところは前後のカッコが [ ではなく { だという事と、キー：値の組み合わせで記述するという事です。

一般的にオブジェクトを作成する時は、この記述を使う事の方が多いです。この記述法を「オブジェクトリテラル」と呼びます。このgardenでもこの記述法でオブジェクトを表記するので覚えておいてください。

連想配列の応用

連想配列を配列のように扱う事もできます。

var hash = {0: 'hoge', 1: 'foo' 2: 'bar'};
alert(hash[0]); // 「hoge」と表示
alert(hash[1]); // 「foo」と表示

プロパティのキーを数値にする事で配列に近い動きをさせる事ができます。但しこのオブジェクトはlengthプロパティを持っていない為、 for文を使った繰り返し処理には使えません。何故かというと連想配列はObjectから生成したオブジェクトで、 ['hoge', 'foo']のように宣言した通常の配列はArrayから生成したオブジェクトだからなんです。

どういう事かピンとこないと思いますが、ここでは配列と連想配列は違うという事だけ覚えておいて下さい。

連想配列のアクセスには変数を利用する事もできます。

var key = 'prop1';

var myObj = {prop1: 'ほげほげ', prop2: 'fuga'};

alert(myObj[key]);　// 「ほげほげ」と表示

連想配列としてアクセスする場合は変数を使う事ができますが、ピリオドで繋いでアクセスする場合は変数を使う事はできません。

alert(myObj.key); // これはダメ

alert(myObj.prop1); // これはOK

プロパティの動的追加

さてオブジェクトのプロパティはオブジェクト毎に後から設定すると説明しました。 Java等の静的なオブジェクト指向言語では、インスタンス作成後にメンバ変数を追加する事はできません。しかしJavaScriptは動的なオブジェクト指向言語ですので後からどんどんプロパティを追加していき、全く異なった性質のオブジェクトに変化させる事もできるのです。

しかし後から追加する事ができるプロパティに先にアクセスした場合はどうなるんでしょう？ではやってみましょう。