最近、社内で「JavaScriptでクラスみたいなものが作れるんですね。」なんて話を聞きました。それを聞いて私は、意外とみんなJavaScriptについて知らないのだなと思い、今回はそれをブログのネタにしようと思います。
さて、前置きが長くなりましたが、とりあえずサンプルをお見せします。
<html>
<head>
<script type="text/javascript">
<!--
/**
* Human クラスのコンストラクタ。
* @param name 名前
* @param sex 性別(1:男性, 2:女性)
* @param age 年齢
*/
function Human(name, sex, age) {
this.name = name;
this.sex = sex;
this.age = age;
}
///////////////////////////////////////////
function init() {
var obj = new Human('アイロベックス太郎', 1, 28);
document.getElementById('name').innerHTML = obj.name;
document.getElementById('sex').innerHTML = obj.sex;
document.getElementById('age').innerHTML = obj.age;
}
// -->
</script>
</head>
<body onLoad="javascript:init();">
名前：<span id="name"></span><br>
性別：<span id="sex"></span> （※1:男性, 2:女性）<br>
年齢：<span id="age"></span>才<br>
</body>
</html>
実行結果は、下記のようになります。
-------------------------------------------------------------------------
名前：アイロベックス太郎
性別：1 （※1:男性, 2:女性）
年齢：28才
-------------------------------------------------------------------------
どうでしょうか、インスタンスの生成に new 演算子を利用したり、
[インスタンス変数].[プロパティ名]で、オブジェクトのプロパティを参照したり、オブジェクト指向言語にありがちな文法になっていると思います。
ただ、オブジェクトの雛形となるクラスの宣言方法が「function ...」となっているように、JavaScriptの関数宣言になっています。
これは、JavaScriptではすべてのオブジェクトが関数オブジェクトであるという性質があるためです。
さて、上記のサンプルのままでは、ただデータを保持している構造体のようなものにすぎません。このままでは、オブジェクト指向言語というには、あきらかに何かが足りません。オブジェクト指向言語であるからには、データと振る舞いをカプセル化できなくてはいけません。そうです、メソッドが足りないのです。
というわけで、次は上記の Human クラスに、hello() と、getSexName()というメソッドを定義する方法をご紹介します。
<html>
<head>
<script type="text/javascript">
<!--
/**
* Human クラスのコンストラクタ。
* @param name 名前
* @param sex 性別(1:男性, 2:女性)
* @param age 年齢
*/
function Human(name, sex, age) {
this.name = name;
this.sex = sex;
this.age = age;
this.hello = hello;
this.getSexName = getSexName;
function hello() {
return "私の名前は「" + this.name + "」です。"
+ "年は、" + this.age + "才です。"
}
function getSexName() {
var sRet = '';
if ( this.sex == 1 ) {
sRet = '男性';
} else if ( this.sex == 2 ) {
sRet = '女性';
}
return sRet;
}
}
///////////////////////////////////////////
function init() {
var obj = new Human('アイロベックス太郎', 1, 28);
document.getElementById('name').innerHTML = obj.name;
document.getElementById('sex').innerHTML = obj.getSexName();
document.getElementById('age').innerHTML = obj.age;
document.getElementById('hello').innerHTML = obj.hello();
}
// -->
</script>
</head>
<body onLoad="javascript:init();">
名前：<span id="name"></span><br>
性別：<span id="sex"></span> （※1:男性, 2:女性）<br>
年齢：<span id="age"></span>才<br>
挨拶：<span id="hello"></span>
</body>
</html>
実行結果は、下記のようになります。
-------------------------------------------------------------------------
名前：アイロベックス太郎
性別：男性
年齢：28才
挨拶：私の名前は「アイロベックス太郎」です。年は、28才です。
-------------------------------------------------------------------------
上記のサンプルでは、「function hello() {}」「function getSexName() {}」と宣言した関数を、
Humanクラスの this.hello, this.getSexName というプロパティに代入することで、hello(), getSexName()関数が Human クラスのメソッドになっています。
このように、JavaScriptでは関数の名前をプロパティへ代入することによりメソッドを定義することができます。
