@blog.justoneplanet.info

■サンプル

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

■サンプルスクリプト

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("底辺×高さ÷２");
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）とは『まとめて』『隠して』『沢山作る』。