オブジェクトにメソッドを追加する

通常のオブジェクトと同様に、ユーザー定義のオブジェクトにもメソッドを登録することができます。前回作成したPersonオブジェクトには、name,heightプロパティがありましたが、メソッドはありません。

今回はPersonオブジェクトにメソッドを追加します。身長から標準体重を求めるstdWeightメソッドを追加します。

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

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>オブジェクトにメソッドを追加する</title>

<script>
function Person(name,height){
    this.name = name;
    this.height = height;
}
function calcWeight(){
    
    /*
    this.heightと書いてオブジェクト自身の
    プロパティに値を設定するようにしている
    */
    var weight = (this.height - 100 ) * 0.9;
    return weight;
}
Person.prototype.stdWeight = calcWeight;
</script>
   
</head>
<body>

<script>
    var friends = new Array(3);
    friends[0] = new Person("一郎",170);
    friends[1] = new Person("二郎",160);
    friends[2] = new Person("三郎",180);

    for( var i=0 ; i < friends.length ; i++){
        document.write("<p>",
          friends[i].name,":",
          friends[i].height,"cm -> ",
          friends[i].stdWeight(),"kg</p>");
    }    
</script>
</body>
</html>

<!doctype html>

<html>

<head>

<title>オブジェクトにメソッドを追加する</title>

function Person(name,height){

this.name = name;

this.height = height;

}

function calcWeight(){

this.heightと書いてオブジェクト自身の

プロパティに値を設定するようにしている

var weight = (this.height - 100 ) * 0.9;

return weight;

}

Person.prototype.stdWeight = calcWeight;

</script>

</head>

<body>

var friends = new Array(3);

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

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

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

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

document.write("<p>",

friends[i].name,":",

friends[i].height,"cm -> ",

friends[i].stdWeight(),"kg</p>");

}

</script>

</body>

</html>

prototypeプロパティ

prototypeプロパティは、すべてのオブジェクトに用意されている特殊なプロパティです。「prototype」は「原型」といった意味で鵜が、オブジェクトのもとになる機能を設定するために、使用されるプロパティです。このプロパティは色々な使い方がありますが、今回はオブジェクトにメソッドを追加する方法を書きます。prototypeプロパティを使いメソッドにオブジェクトに追加するには書きように書きます。

　オブジェクト名.prototype.メソッド名 = 関数名;

1	オブジェクト名.prototype.メソッド名 = 関数名;

右辺には、メソッドとして使用した関数名を指定します。サンプルコードでは下記のようにcalcWeight関数の機能をもつstdWeightメソッドを作成しています。

    Person.prototype.stdWeight = calcWeight;

1	Person.prototype.stdWeight = calcWeight;

使用する関数をメソッドとして定義する

prototypeプロパティでオブジェクトにメソッドを設定するには、予めメソッドとして使いたい関数を定義しなければいけません。サンプルコードのように書きます。

function calcWeight(){
	実際の処理
}

function calcWeight(){

実際の処理

}

メソッドを呼び出す

ユーザー定義オブジェクトに設定したメソッドは、インスタンスから呼び出すことができます。下記で「stdWeight」を呼び出しています。

	document.write("<p>",
		friends[i].name,":",
		friends[i].height,"cm -> ",
		friends[i].stdWeight(),"kg</p>");

document.write("<p>",

friends[i].name,":",

friends[i].height,"cm -> ",

friends[i].stdWeight(),"kg</p>");

メソッドを無名関数で定義

サンプルコードでは、メソッドを設定するときに、メソッドの機能をcalcWeight関数として定義して、それをprototypeプロパティのメソッドに下記のように代入しました。

function calcWeight(){
　// 実際の処理
}
Person.prototype.stdWeight = calcWeight;

function calcWeight(){

　// 実際の処理

}

Person.prototype.stdWeight = calcWeight;

このcalcWeight関数は、メソッドの処理を登録するためだけに使用するもので、関数単独で呼ばれるものではないです。「calcWeight」という関数名には特別意味もないです。

このような場合「無名関数」と呼ばれる名前のない関数をメソッドに直接代入することで、関数の定義を省くことができます。stdWeightメソッドの設定を無名関数で行いたい場合、下記のように書きます。

Person.prototype.stdWeight = function(){
	var weight = (this.height - 100 ) * 0.9;
    return weight;
}

Person.prototype.stdWeight = function(){

var weight = (this.height - 100 ) * 0.9;

return weight;

}

無名関数は「function」の後に名前が無い点を除けば、通常の関数と同じです。