prototype の利用 - オブジェクトのプロトタイプオブジェクトの参照 - JavaScript
JavaScriptでprototype を利用して、オブジェクトのプロトタイプオブジェクトを利用するコードを紹介します。
概要
JavaScriptの関数には、prototype の名称のオブジェクトがあります。prototype はオブジェクトであり、値や関数を追加できます。また、元のオブジェクトをインスタンス化した場合でもprototypeの実装はインスタンスに引き継がれます。
コード例
コード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
var MyObj = function (value1, value2) {
this.val1 = value1;
this.val2 = value2;
}
MyObj.prototype.proc1 = function () {
return this.val1 + this.val2
}
function onButtonClick() {
var mobj = new MyObj(4, 7);
var elem = document.getElementById("output");
elem.innerHTML = mobj.proc1();
}
</script>
</head>
<body>
<div id="output">output</div>
<hr/>
<input type="button" value="Exec" onclick="onButtonClick();"/>
</body>
</html>
解説
var MyObj = function (value1, value2) {
this.val1 = value1;
this.val2 = value2;
}
上記コードでオブジェクトを定義します。
MyObj.prototype.proc1 = function () {
return this.val1 + this.val2
}
上記コードにより、MyObjに proc1 関数を実装できます。
function onButtonClick() {
var mobj = new MyObj(4, 7);
var elem = document.getElementById("output");
elem.innerHTML = mobj.proc1();
}
MyObjのインスタンス mobjを作成します。idが"output"である要素を選択しelemに代入します。elemの内部HTMLに mobjのproc1()関数(メソッド)を呼び出します。prototype に proc1 を実装したことで、MyObjにproc1 が実装されたことになり、MyObj インスタンスの mobj.proc1()により、MyObj.prototype.proc1 に実装したコードが呼び出されます。
今回のコード例では、MyObjのインスタンス作成時に引数に4と7を与えており、proc1 関数の戻り値はMyObjインスタンス作成時の引数の合計値とを返しますので、mobjのproc1 呼び出しにより、4+7 で 11 が戻り値として戻り、画面に表示される動作となります。
実行結果
上記のHTMLファイルをWebブラウザで開きます。下図の画面が表示されます。
"output"が表示されていたエリアに、"11"が表示されます。MyObjインスタンスのmobjに対して proc1 関数(メソッド)が呼び出されていることが確認できます。
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
