@blog.justoneplanet.info

日々勉強

JavaScriptにおける継承(オブジェクト指向入門)

■サンプル

下記のリンクをクリックすると選択数値に応じた面積などがアラートされます。

底辺の長さ:
高さ:
三角形 面積 公式
四角形 面積 公式

■サンプルスクリプト

function figure(NAME){
	var self = this;
	this.name = NAME;
	this.alert = function(){
		alert(self.name);
	}
}
function triangle(NAME){
	this.getArea = function(){
		var num1 = parseInt(document.forms["area"].elements["num1"].value);
		var num2 = parseInt(document.forms["area"].elements["num2"].value);
		return (num1 * num2 / 2);
	}
	figure.call(this,NAME);
	/*この記述が無い場合figureメソッドとは無関係のため当然figureクラスのalertメソッドは使えない。figureクラスのメソッドを使えるようにするためにfigureにcallメソッドで自身とfigureメソッド用の引数を渡す*/
}
function square(NAME){
	this.getArea = function(){
		var num1 = parseInt(document.forms["area"].elements["num1"].value);
		var num2 = parseInt(document.forms["area"].elements["num2"].value);
		return (num1 * num2);
	}
	figure.call(this,NAME);
}
tri = new triangle("底辺×高さ÷2");
sqr = new square("縦×横");

■サンプルHTML

<form action="#" name="area">
底辺の長さ
<select name="num1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
高さ
<select name="num2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</form>
<table>
<tr>
<th>三角形</th>
<td><a href="javascript:alert(tri.getArea());">面積</a></td>
<td><a href="javascript:tri.alert();">形</a></td>
</tr>
<tr>
<th>四角形</th>
<td><a href="javascript:alert(sqr.getArea());">面積</a></td>
<td><a href="javascript:sqr.alert();">形</a></td>
</tr>
</table>

■解説

三角形と四角形の面積の求め方は異なるので全く同じ関数を使うわけにはいかない。しかし、例では「公式」を表示するアラートは引数を変えれば同じ関数で可能である。この方法を使えば・・・

  • 共通の値、処理はfigureに追加
  • 別個の値、処理は個々のメソッド(triangle、square)に追加

する事によりグローバル空間の汚染を最小限にできる

■おまけ

オブジェクト指向(OOP)とは『まとめて』『隠して』『沢山作る』。

1件のコメント»

JavaScriptにおける継承…その2(プロトタイプ・チェ…

この記事のソースは自由にご利用ください。またサンプルソースに全角のダブルクォーテーションが含まれていますが半角に直してご利用ください。(仕様上の為、ご了承ください)
(more…)

RSS feed for comments on this post.TrackBack URL

Leave a comment