JS (1) : JavaScriptでのクラス定義
■ クラスの定義方法
例えばASだと、このような定義になると思いますが、
package{
public class MyClass{
public var myValue;
//コンストラクタ
public function MyClass(value1, value2){
var newValue = value1 + value2;
test1(newValue);
}
public fucntion test1(value3){
myValue = value3;
trace("myValue:", myValue);
}
public fucntion test2(){
}
}
}
–
JSではこのように書くと良いと思います。
var MyClass = function(){
this.myValue;
this.initialize.apply(this, arguments);
}
MyClass.prototype = {
//コンストラクタ
initialize: function(value1, value2) {
var newValue = value1 + value2;
test1(newValue);
},
test1: function(value3){
this.myValue = value3;
console.log("myValue:", myValue);
},
test2: function(){
}
}
–
説明 :
・JSに変数の型指定はありません。
・この書き方をすると、関数内で定義した変数を除いて、全てpublicになります。クラス内でprivate変数はつくれません｡
・イベント処理っぽいことが入って来た時にさらに掘り下げますが、14行目の「this」は必須です。
・console.logはfirebugや、WebKitのコンソールで確認。
–
■ サンプル
できるだけASっぽく、1クラス1ファイルで考えてみます。
ドキュメントクラス風にMainクラスを実行して、SampleClassクラスのインスタンスをつくり、
その中の関数を呼んで終わり。という簡単なプログラムです。
まずHTMLファイルでmain.jsを読み込む。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript" src="main.js"></script> </head> <body> <div id="content"></div> </body> </html>
–
main.jsの中身
document.write('<script type="text/javascript" src="sampleClass.js"></script>');
onload = function(){
var main = new Main();
}
//Mainクラス
var Main = function(){
this.initialize.apply(this, arguments);
}
Main.prototype = {
//コンストラクタ
initialize: function() {
var sampleInstance = new SampleClass("Hello World!");
sampleInstance.talk();
}
}
–
sampleClass.jsの中身
//SampleClassクラス
var SampleClass = function(){
this.myMessage = "";
this.initialize.apply(this, arguments);
}
SampleClass.prototype = {
//コンストラクタ
initialize: function(message) {
this.myMessage = message;
},
//this.myMessageを出力
talk: function(){
console.log(this.myMessage);
document.getElementById("content").innerHTML = this.myMessage;
}
}
–
説明 :
・main.jsの1行目はASでいうimportっぽい書き方をしてみたくてやっています。
(HTMLをいじらずJSだけで完結できるので便利)
・実際はJQueryのonLoadから処理を始めて行くと色々できるようになります。（次回以降）
ダウンロード :
http://soohei.net/blog/files/js_01.zip
–
参考 :
・http://d.hatena.ne.jp/amachang/20060516/1147778600
・http://d.hatena.ne.jp/vividcode/20090706/1246905260
–
Tweet
