オブジェクトの使い方/JavaScript

オブジェクトの概要

　オブジェクトを使うと、情報の定義が出来ます。例えば、ヤマダさんの住所や生年月日をまとめてオブジェクトとして設定します。オブジェクトには関数も含める事が出来るため、情報と動作をまとめてオブジェクトとして作成する事も出来ます。

　オブジェクトは、概念を理解して使い方が分かると非常に多くの事が出来ます。JavaScriptでは多くのものをオブジェクトとして扱えます。例えば、HTMLのタグをオブジェクトとして扱い、中身を書き換える等も容易になります。

オブジェクトの作成

　オブジェクトは以下のように作成します。

<script>
var yamada = new Object();
yamada.address = "Tokyo";
yamada.birthday = 2001;
</script>

　上記はヤマダさんの住所が東京で、生年月日が2001年という情報を定義しています。オブジェクトは、以下でも作成出来ます。

<script>
var yamada = {
    address: "Tokyo",
    birthday: 2001
};
</script>

　上記の記述方法をリテラル表現と言います。

　addressやbirthdayはプロパティと呼ばれ、プロパティの値はyamada.addressのように、オブジェクト.プロパティで参照出来ます。又、yamada.address = "Kyoto";と記述すると、プロパティの値を変更出来ます。

　このように、オブジェクトとして扱えるものは、オブジェクト.プロパティで値を参照したり、書き換えたり出来ます。

for in

　オブジェクトの全プロパティはfor inで参照出来ます。

<script>
var yamada = {
    address: "Tokyo",
    birthday: 2001
};
for (var i in yamada) {
    document.write(yamada[i]);
}
</script>

　上記でTokyo、2001と順番に表示されます。

オブジェクトツリー

　オブジェクトの中にオブジェクトを含め、ツリー構造にする事が出来ます。

　上記のようにするためには、以下のように定義します。

<script>
var peaple = {
    yamada:{
        address: "Tokyo",
        birthday: 2001
    },
    suzuki:{
        address: "Kyoto",
        birthday: 1999
    }
};
</script>

　プロパティの値は、peaple.yamada.address等で参照出来ます。又、peaple.yamada.address = "Kyoto";と記述すると、プロパティの値を変更出来ます。

　尚、「フォームの使い方」ではdocument.form1.button1.value等で値を取り出していますが、これはドキュメントがオブジェクトツリーになっているためです。

コンストラクタ関数とインスタンス

　関数を利用してオブジェクトの型を作り、その型に従って変数に値を入れる事でもオブジェクトを作成する事が出来ます。

　オブジェクトの型はコンストラクタ関数を利用して定義します。

<script>
function Peaple(address,birthday) {
    this.address = address;
    this.birthday = birthday;
}
</script>

　赤字部分のthisは、インスタンス作成時の名前が入ります。yamadaでインスタンスを作成すると、コンストラクタ関数が呼び出され、thisはyamadaになります。インスタンス作成方法は以下の通りです。

<script>
var yamada = new Peaple("Tokyo",2001);
var suzuki = new Peaple("Kyoto",1999);
</script>

　上記は、yamadaとsuzukiの2つのインスタンスを作成しています。例えばyamadaの場合、引数Tokyoと2001がコンストラクタ関数に渡され、thisはyamadaになり、yamada.addressにTokyo、yamada.birthdayに2001が代入されます。

　このように、コンストラクタ関数でオブジェクトの型を定義しているため、インスタンスではプロパティ名を指定せず、引数を渡すだけでオブジェクトが作成されます。

メソッド

　オブジェクトではプロパティに対する値だけでなく、動作をメソッドとして定義出来ます。

<script>
var yamada = new Object();
yamada.address = "Tokyo";
yamada.birthday = 2001;
yamada.display = function() {
    document.write("住所は" + this.address + "で生年月日は" + this.birthday + "年です。");
};
yamada.display();
</script>

　上記は「住所はTokyoで生年月日は2001年です。」と表示されます。赤字のyamada.display部分がメソッドの定義で、「関数の使い方」で説明した無名の関数式を使っています。青字のyamada.display();でメソッドを呼び出しています。

　リテラル表現では以下になります。

<script>
var yamada = {
    address: "Tokyo",
    birthday: 2001,
    display: function() {
        document.write("住所は" + this.address + "で生年月日は" + this.birthday + "年です。");
    }
};
yamada.display();
</script>

　コンストラクタでは以下になります。

<script>
function Peaple(address,birthday) {
    this.address = address;
    this.birthday = birthday;
    this.display = function() {
        document.write("住所は" + address + "で生年月日は" + birthday + "年です。");
    }
}
var yamada = new Peaple("Tokyo",2001);
yamada.display();
</script>

　コンストラクタでメソッドを定義しているため、suzukiでインスタンスを作成してもthisがsuzukiになり、suzuki.display():で同じメソッドを利用出来ます。つまり、オブジェクト毎にメソッドを定義しなくて済みます。

　このように、オブジェクトとして扱えるものは、オブジェクト.メソッドで処理をさせる事が出来ます。

連想配列とオブジェクトのコピー

　オブジェクトのプロパティにはyamada["address"] = "Tokyo";でも代入出来ます。参照もyamada["address"]で値を取り出せます。これは、配列と同じ指定方法ですが、要素を数字でなく文字で指定しており、連想配列と呼ばれます。

　このため、オブジェクトをコピーしようとすると配列と同じ事が起こります。

　変数yamadaはオブジェクトを格納しているのではなく、参照しています。「配列」でも説明した通り、var suzuki = yamada;で代入すると、参照するための情報がsuzukiにコピーされます。

　つまり、suzuki.addressの値を変更するとyamada.addressの値も変更されます。

　それぞれ別のオブジェクトとしてコピーしたい場合は、配列の時と同様にjQueryを使うと便利です。

<script>
function Peaple(address,birthday) {
    this.address = address;
    this.birthday = birthday;
}
var yamada = new Peaple("Tokyo",2001);

var suzuki = $.extend(true, [], yamada);
yamada.address = "Kyoto";
suzuki.birthday = 3000;

for (var i in yamada) {
    document.write(yamada[i]);
}
document.write("<br>");
for (var i in suzuki) {
    document.write(suzuki[i]);
}
</script>

　赤字部分でコピーしています。青字部分はyamadaとsuzukiのプロパティ値をそれぞれ変更しています。これは、以下のように表示されます。

　yamadaはaddressだけKyotoに、suzukiはbirthdatだけ3000にと別々に変更されているのが分かります。

　上記はjQueryが動作している必要があります。jQueryについては、「jQueryの利用」をご参照下さい。

次のページ「DOM」