オリジナルのオブジェクト(ユーザー定義オブジェクト)を作ってみる

documentオブジェクト、dateオブジェクトなど予め用意されているオブジェクトを使ってきました。それとは別に、ユーザーがオリジナルのオブジェクトを定義して、使うこともできます。ユーザー定義オブジェクトの例で、名前と身長を、「name」「height」で管理するPersonオブジェクトを作ります。

サンプルコードの実行結果はこちら

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>ユーザー定義のオブジェクトを作ってみる</title>

<script>
function Person(name,height){
    this.name = name;
    this.height = height;
}
</script>

</head>
<body>

<script>
    var friends = new Array(3);
    
    /*
        Personコンストラクタの
        最初の引数には名前
        ２番目の引数には身長が入ります。
    */
    friends[0] = new Person("一郎",170);
    friends[1] = new Person("二郎",160);
    friends[2] = new Person("三郎",180);

    /*
    配列の各要素に格納されたインスタンスにアクセスるために
    下記のようなfor文を使っています。配列の要素数は
    lengthプロパティ(今回の値は３)に格納されています。
    */
    for( var i=0 ; i < friends.length ; i++){
        document.write("<p>",friends[i].name,":",
                      friends[i].height,"cm</p>");
    }
</script>    
</body>
</html>

<!doctype html>

<html>

<head>

<title>ユーザー定義のオブジェクトを作ってみる</title>

function Person(name,height){

this.name = name;

this.height = height;

}

</script>

</head>

<body>

var friends = new Array(3);

Personコンストラクタの

最初の引数には名前

２番目の引数には身長が入ります。

friends[0] = new Person("一郎",170);

friends[1] = new Person("二郎",160);

friends[2] = new Person("三郎",180);

配列の各要素に格納されたインスタンスにアクセスるために

下記のようなfor文を使っています。配列の要素数は

lengthプロパティ(今回の値は３)に格納されています。

for( var i=0 ; i < friends.length ; i++){

document.write("<p>",friends[i].name,":",

friends[i].height,"cm</p>");

}

</script>

</body>

</html>

コンストラクタ

オブジェクトを生成際に使用するコンストラクタは、関数の仲間です。なので、ユーザー定義の関数と同様にfunctionというワードを使って定義します。

　function コンストラクタ名(引数1､引数2､ ....){
　　行いたい処理はここに書く
　}

　function コンストラクタ名(引数1､引数2､ ....){

　　行いたい処理はここに書く

　}

関数とは異なり、計算結果の値を返すreturn文は要らないです。コンストラクタが戻す値は、そのオブジェクトのインスタンスにだからです。return文を書いてもエラーにはならないですが、コンストラクタとして使う場合は無視されます。

コンストラクタでプロパティを設定

コンストラクタの名前には、オブジェクト名を使います。サンプルコードで定義したPersonオブジェクトのコンストラクタ「Person」を見ると、このコンストラクタは名前と身長を引数として受け取っています。コンストラクタ内部では、それらの値をそれぞれname,heightプロパティに初期値として設定します。

function Person(name,height){
	this.name = name;
	this.height = height;
}

function Person(name,height){

this.name = name;

this.height = height;

}

左辺が「this.name」と書いています。thisは何度か出てきていますが、自分自身を表している特殊な値です。このPersonオブジェクトのインスタンスを表しています。コンストラクタ内部では、下記のように書くことで、そのインスタンスのプロパティを表します。

　this.プロパティ名;

1	this.プロパティ名;

下記のように書くと、引数heightの値をインスタンスのheightプロパティに値を代入しています。

　this.height = height;

1	this.height = height;

オブジェクトの生成

Dateオブジェクトなどと同様に、ユーザー定義オブジェクトの生成も、new演算子とコンストラクタを使います。サンプルコードのように、名前「一郎」、身長「170」のPersonオブジェクトのインスタンスを生成して、変数friends[0]に代入するには以下のようにします。

　friends[0] = new Person("一郎",170);

1	friends[0] = new Person("一郎",170);

プロパティにアクセスする

インスタンスを生成すれば、用意されているプロパティにアクセスできます。通常のオブジェクトと同じように「変数名.プロパティ名」でアクセスできます。

　friends[0].name = "五郎";

1	friends[0].name = "五郎";

なおプロパティは、プロパティ名をキーにした連想配列でも
アクセスできます。

　変数名["プロパティ名"]

1	変数名["プロパティ名"]

という具合に書きます。

ちなみに変数の配列のプロパティ名を
プロパティ名をキーにしてアクセスして、
変えたい場合には、以下のように書きます。
　＊friends[0]のnameプロパティの値を「五郎」に変える場合

	friends[0]["name"] = "五郎";

1	friends[0]["name"] = "五郎";

配列でユーザー定義オブジェクトを管理する

サンプルコードではオブジェクトのインスタンスを配列に格納しています。そうすることで、インスタンスの数が増えたときに管理がしやすいです。サンプルコードでは下記のように格納しています。

	var friends = new Array(3);

1	var friends = new Array(3);

Arrayコンストラクタを使い、要素数３の配列friendsを生成しています。

	friends[0] = new Person("一郎",170);
	friends[1] = new Person("二郎",160);
	friends[2] = new Person("三郎",180);

friends[0] = new Person("一郎",170);

friends[1] = new Person("二郎",160);

friends[2] = new Person("三郎",180);

右辺でnew演算子とPersonコンストラクタで、Personオブジェクトのインスタンスを生成して、配列friendsの要素に格納してます。