JavaScript はObject志向言語です。Webにおけるクリックや, ロードなどの動的な
イベントの処理にちょっとした関数を作ったり, XMLHttpRequest を使ったAjax に
使ったりと, クラスをつくるイメージが薄い, と勉強はじめには感じますが, クラスを
つくることでModel, Controller の役割をはっきりさせたりすることも十分できます。
そこで, 今回はJavaScript のクラスの作り方のメモを残しておきました。
JavaScript は, プロトタイプです function です
と言っておきましょう。なんのことかさっぱりですが重要な項目をあっさり1行で表現してみました。
JavaScript のクラスは, 他の言語と比べるとかなり違っていて, 他の言語Java C++, PHP とかを知っていると, 「なんじゃこりゃ」と言いたくなるくらい不思議な感じがします。
さていい加減に本題へ。
〇空クラス
まずもっともシンプルなクラスを
var Obj = function(){};
おい, これって Obj という変数に関数つっこんだだけやんけ。
ごもっとも, 関数リテラル Obj を作っただけです。
そしてこれをインスタンス化します
var obj1 = new Obj();
これで利用できます。メンバのないクラスのインスタンス obj1ができました。
〇動的メソッドの追加
Javaを知ってしまうとなかなか理解できなくて困ったのですが, JavaScript のインスタンスには,
インスタンス固有の動的メソッドが追加できます。
obj1.greeting = function()
{
alert("Hello World!");
}
これで, obj1 だけに, greeting メソッドが追加されました。
var obj2 = new Obj();
とobj2を作っても
obj2.greeting() は利用できません。
〇コンストラクタ
引数ありのコンストラクタをつくってみましょう
var Obj = function( name )
{
this.name = name;
}
name を引数にとったコンストラクタをつくりました。
その中に, this.name とありますがこれがこのクラスのメンバです。
このコンストラクタに必要なメンバを入れておく必要があります。
初期化のいらないものでも宣言だけでもしておきます。
ex)
var Obj = function()
{
this.array = new Array();
this.Var = null;
this.test;
}
〇prototype を使ってメンバ関数を追加
※prototypeは暗黙の参照
prototype の詳しい説明は抜きにして, このprototype変数に
メンバ関数を入れることで, クラス共通のメソッドを追加します
Obj.prototype =
{
hello: function() { alert ("Hello Japan!"); },
setName: function( name ) { this.name = name; }
}
prototype 変数に, key: function() というように変数を追加することで, メンバ関数とします。
もちろんばらして追加することもできます。
Obj.prototype.hello = function()
{
alert("Hello Japan!");
};
Obj.prototype.setName = function( name )
{
this.name = name;
}
いずれにしても参照方法は同じです。
var obj3 = new Obj();
obj3.hello();
〇サブクラス
新たなクラスのprototype に, スーパークラスを入れます。
サブクラス.prototype = new スーパークラス();
var SubObj = new Obj();
SubObj.prototype.hello = function()
{
document.write("てってれ～");
}
※ hello
〇クラスメソッド
他の言語と同様にクラスメソッドも定義できます。
var Obj = function(){};
Ojb.hello = function()
{
confirm('えっ？');
};
クラスのプロパティに, 関数をいれます。
すると,
Obj.hello(); というように参照できます
〇サンプル
サンプルです(Firefox6で動作確認済み)
ソース一覧
1. akb.js
2. mayuyun.js
3. class.html
1. akb.js コンストラクタを定義, メンバとして, team, name, nickname を持つ
クラス
var AKB = function ( team, name, nickname)
{
this.team = team;
this.name = name;
this.nickname = nickname;
};
AKB.introduce = function()
{
alert("AKBがやってきた");
};
AKB.prototype =
{
getTeam: function()
{
return this.nickname;
},
getName: function()
{
return this.team;
},
getNickname: function()
{
return this.nickname;
},
display: function()
{
alert("Team:" + this.team + " NickName:" + this.nickname);
}
};
2. mayuyun.js AKBクラスのサブクラス。 prototypeにAKBのコンストラクタを指定
新たに, echo 関数を追加
var BlackMayuyun = function()
{
}
BlackMayuyun.prototype = new AKB("B", "渡辺麻友" ,"まゆゆ");
BlackMayuyun.prototype.echo = function()
{
alert( this.name + ":マッパが怖くてけんかできるか～");
};
3. class.html 動作確認用。 HTML5っぽく。 ボタンを
配置して, 各ボタンに動作確認コードを入れました。
ボタンを押すと, alertダイアログが出現します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8"/>
<style>
</style>
<script src="akb.js"></script>
<script src="mayuyun.js"></script>
<script type="text/javascript">
function akbingo()
{
var acchan = new AKB("A", "前田敦子" ,"あっちゃん");
acchan.display();
}
function naruhigh()
{
var mayuyun = new BlackMayuyun();
mayuyun.echo();
}
function weekakb()
{
AKB.introduce();
}
</script>
<body>
<input type="button" onclick="akbingo();" value="クリック"/>
<input type="button" onclick="weekakb();" value="参上"/>
<input type="button" onclick="naruhigh();" value="まゆゆ"/>
</body>
</html>
時間があれば, MVC の MCをJavaScriptでどのように実現するかを書きたいです。
0 件のコメント:
コメントを投稿