オブジェクトの使い方/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で参照出来ます。

【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を使うと便利です。

【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

  • このエントリーをはてなブックマークに追加