JavaScriptのオブジェクトとは:ちゃんと理解してますか

白石俊平
2008/01/21 15:00

JavaScriptをより深く知りたい人のための当連載もいよいよ三回目。今回はJavaScriptにおけるオブジェクトとは何か?というお話をしたいと思います。

 以下のコードをみてください。JavaScriptのオブジェクトを作成した後、変数や関数を追加で代入しています。

    var obj = new Object();
    obj.v1 = "変数1";
    obj.f1 = function() {
        alert("関数1");
    };

 このようにJavaScriptのオブジェクトは、一度作成した後でも、変数や関数を自由に追加/削除することができます。これはJavaのように静的な片付けを持つ言語とは大きく異なる点です。

 上のコードを、「ハッシュテーブルに値を格納している」のと同義だと捉えてみましょう。すると、以下のようなキーと値の対応になりますね。

-v1 => "変数1" -f2 => 無名関数

 これらを参照する場合は、通常通り「.(ドット)」演算子を用いることができます。

    // 変数「v1」の表示
    alert(obj.v1);
    // 関数「f1」の呼び出し
    obj.f1();

 さらに面白いのは、「[ ]」(大括弧)演算子を用いて、ハッシュテーブルの値(つまり、オブジェクトのメンバ)にアクセスすることができると言う点です。値の代入時、参照時のどちらでも「[ ]」を使うことが可能です。以下のコードをみてください。

    // 「f2」と言うキーの名前で関数オブジェクトを格納
    obj["f2"] = function() {
        alert("関数2");
    };
    // ドット演算子を用いた関数呼び出し
    obj.f2();
    // 大括弧を用いて関数を参照して呼び出し
    obj["f2"]();

 ここで、「[ ]」の中には「文字列」を指定します。一番最後の行では、文字列"f2"を用いてオブジェクトから関数オブジェクトを取り出し、後ろに「()」を付けることで関数呼び出しを行っています(この文章の意味が分からない方は前回の記事を参照してください)。

 どうですか?「[ ]」演算子を用いて、文字列でオブジェクトのメンバを代入/参照したりすると、「JavaScriptのオブジェクトはハッシュテーブルのようなもの」と言う言葉の意味が何となく実感できるのではないでしょうか。

 そして、「文字列によってメンバを参照できる」と言うのは非常に強力な機能ですので、必ず覚えておいてください。以下のコードを実行すると何が起きるでしょうか?

    var s1 = "al";
    var s2 = "ert";

    window[s1 + s2]("Hello, World");

まとめ

 今回は、JavaScriptのオブジェクトを「ハッシュテーブルのようなもの」として捉えることができる、と言うお話でした。次回は今回の話を踏まえつつ、JavaScriptオブジェクトについてのさらに高度な話題(オブジェクトリテラルやJSON)などのお話をしたいと思います。

記事の感想やご意見をコメントでお寄せください(CNET_IDログインが必要です)
ログイン パスワードを忘れた方  |  新規登録
  • 新着記事
  • 人気記事
  • 特集
  • ブログ