soohei.net

SOHEI KITADA

JS (1) : JavaScriptでのクラス定義

2010.8.12

■ クラスの定義方法

例えばASだと、このような定義になると思いますが、
[as3]
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(){

}
}
}
[/as3]

–
JSではこのように書くと良いと思います。
[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]

–
説明 :
・JSに変数の型指定はありません。
・この書き方をすると、関数内で定義した変数を除いて、全てpublicになります。クラス内でprivate変数はつくれません｡
・イベント処理っぽいことが入って来た時にさらに掘り下げますが、14行目の「this」は必須です。
・console.logはfirebugや、WebKitのコンソールで確認。

–
■ サンプル

できるだけASっぽく、1クラス1ファイルで考えてみます。
ドキュメントクラス風にMainクラスを実行して、SampleClassクラスのインスタンスをつくり、
その中の関数を呼んで終わり。という簡単なプログラムです。

まずHTMLファイルでmain.jsを読み込む。
[html]
<!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">

</html>
[/html]

–
main.jsの中身
[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();
}
}
[/js]

–
sampleClass.jsの中身
[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;
}
}
[/js]

–
説明 :
・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