Three.js は、Canvas や WebGL を使った 3D を表現するライブラリですが、中を読むのに このようなクラス定義が基本なので非常に解りやすいです。
<!doctype html>
<html lang="en">
<head>
<title>サンプル</title>
<meta charset="utf-8">
<style>
</style>
</head>
<body>
<script>
var R101 = {};
R101.Class = function(){
this.version = "1.01";
this.colors = [];
this.flg = false;
};
R101.Class.prototype = {
constructor: R101.Class,
method1: function() {
alert("method1:"+this.version);
},
method2: function() {
alert("method2:"+(this.data||"未定義です"));
},
method3: function() {
alert("method3:"+this.flg);
this.data = {};
}
}
var obj = new R101.Class();
</script>
<input type="button" value="method1" onclick="obj.method1();" />
<input type="button" value="method2" onclick="obj.method2();" />
<input type="button" value="method3" onclick="obj.method3();" />
</body>
</html>
まず、R101 と言う名前空間を作成していますが、一般的にライブラリを作成する時に有効で、
変数が他から独立して作成されるようになります。R101 は、一般的な JavaScript のオブジェク
トになります。そこに、R101.Class として、function を定義しています。
( ※ R101.Class では、this で変数を作成して、後に作成されるインスタンスで参照されます。)
R101.Class.prototype に、JavaScript のオブジェクトを設定し、そのメンバとして、コンストラ
クタとメソッドを定義しています。ここで、たとえ prototype の設定をしなくても、コンストラ
クタは R101.Class になり、以下の実行を行うと一致します
if ( R101.Class === obj.constructor ) {
console.log("一致");
}
しかし、それではメソッドの定義を R101.Class 内でする事になり、記述上コンストラクタとメソ
ッドとプロパティの定義がごちゃ混ぜになってしまいますが、この場合だと見事に３か所に分けて
定義できますし、後から見ても一目瞭然となります。
Windows8 Metro JS SDK でもよく使われていた || の意味
alert("method2:"+(this.data||"未定義です"));
この || は最後に true 扱いになったものを利用すると言う意味で、this.data が
定義されていた場合はその中を表示しますが、未定義の場合は "未定義です" のみを
表示します
|
|
【JavaScript オブジェクトの最新記事】
- JavaScript : window オブジェクトのプロパティとしてグローバル変数を定義する
- ほぼ、Google Chrome 限定ですが Web Speech API の現時点での実装と問題点回避方法
- Google Chrome での音声認識処理
- JavaScript でテーブル要素の td をクリックしてテキストを選択する / Range オブジェクト
- Google Chrome で音声認識の結果をブログの投稿テキストエリアに転送するブックマークレット
- JavaScript の String と Date オブシェクトに、9999/99/99 書式の文字列日付を取り出すメソッドを追加する
- JavaScript オブジェクト作成の４態
- JavaScript の function を new したものが、JSON フォーマットで記述した『Object』と同じである事のテスト
- JavaScript による半角と全角の相互変換(カタカナを除く)完成版
- JSON オブジェクトの stringify メソッドの第３引数の使い方
- JS : 自分用名前空間を使ってページのロードイベントを登録
- Object.prototype が window オブジェクトに適用されるおはなし
- JS : クロスドメインの IFRAME からデータを JSON 形式で引き渡す
- JavaScript : 右から指定した文字数を取りだす right メソッドを String オブジェクトに追加
- JSON と文字列の関係
- JavaScript : ネームスペースの作成
- JavaScript : HTMLの要素内のイベント記述で複雑な処理を書く方法( 関数を定義したく無い場合 )
- JavaScript : 無名関数(メソッド)の実行
- JavaScript : Numberオブジェクトに16進数文字列に変換して指定した長さで前にゼロを付けるメソッドを追加する
- JavaScript : String オブジェクトの replace メソッドの第二引数に関数を指定する一括置き換え処理
