JavaScript > オブジェクトの定義方法

更新日 2012-07-21
広告

オブジェクトを定義する方法を紹介します。

リテラル表記によるオブジェクトの定義の例を以下(literal-sample.js)に記します。

var human = {
    name: 'taro', // 変数
    age: 18, // 変数
    wake: function () { // 関数
        print('wake... I am ' + this.name);
    },
    sleep: function () { // 関数
        print('sleep...');
    }
};

print('name is ' + human.name);
print('age  is ' + human.age);
human.wake();
human.sleep();
これを実行すると、以下のようになります。
$ rhino literal-sample.js
name is taro
age  is 18
wake... I am taro
sleep...

オブジェクトがオブジェクトを持つことも可能です。以下はサンプル literal-sample2.js です。

var human = {
    name: 'taro',
    age: 18,
    actions: {
        wake: function () {
print('wake... I am ' + human.name);
        },
        sleep: function () {
            print('sleep...');
        }
    }
};

human.actions.wake();
human.actions.sleep();
これを実行すると、以下のようになります。
$ rhino literal-sample2.js
wake... I am taro
sleep...

オブジェクトを生成する関数を定義することもできます。JavaやRubyなど「クラス」に近い感覚かもしれません。以下は、サンプル function-sample.js です。

var Human = function (n, a) {
    this.name = n;
    this.age = a;
    this.wake = function () {
        print('wake... I am ' + this.name);
    };
    this.sleep = function () {
        print('sleep...');
    };
};

var human = new Human('taro', 18);
print('name is ' + human.name);
print('age  is ' + human.age);
human.wake();
human.sleep();

リテラル表記と、関数表記では、異なる記述となることに注意してください。

function-sample.js の実行結果は以下のようになります。

$ rhino function-sample.js
name is taro
age  is 18
wake... I am taro
sleep...

関数表記で、子オブジェクトから親オブジェクトのプロパティを参照するためには、以下のサンプル function-sample2.js のようにします。

var Human = function (n, a) {
    var myself = this; // 自分自身を変数に代入しておく

    this.name = n;
    this.age = a;
    this.actions = {
        wake: function () {
            print('wake... I am ' + myself.name); // ここでthisを使うと、actionsオブジェクトを参照してしまう。
        },
        sleep: function () {
            print('sleep...');
        }
    };
};

var human = new Human('taro', 18);
human.actions.wake();
human.actions.sleep();
実行結果は以下のようになります。
$ rhino function-sample2.js
wake... I am taro
sleep...
広告
お問い合わせは sweng.tips@gmail.com まで。
inserted by FC2 system