JavaScriptではコンストラクタをfunctionで定義したりprototypeにメソッドを登録したりとやや癖のある方法ではありますが、下記のようにクラスを定義できます。
sample.js
function MyClass(prop) { // コンストラクタ
this.prop = prop;
}
// var MyClass = function(prop){ // としても同じです
// this.prop = prop;
// };
MyClass.CONST = 128; // クラス定数
MyClass.classMethod = function(x) { // クラスメソッド
return x*x;
};
MyClass.prototype.method = function(x) { // メソッド
return x+x;
};
// MyClass.prototype = { // メソッド数が多い場合は以下の記法が役立ちます
// method: function(x) {
// return x+x;
// },
// method2: function(x) {
// return x+x;
// }
// };
// インスタンス
var obj = new MyClass(1.0);
console.log(obj.prop);
console.log(obj.method(512));
// クラス
console.log(MyClass.CONST);
console.log(MyClass.classMethod(12));
実行例
$ node sample.js
1
1024
128
144
非効率なメソッド定義
一見自然に見えますが、インスタンスメソッドを下記のようにコンストラクタに含めて定義するとインスタンス毎にメソッドのためにメモリが確保され、動作はしますが非効率です。
sample.js
function MyClass(prop) { // コンストラクタ
this.prop = prop;
this.method = function(x) { // メソッド
return x+x;
}
}
// インスタンス
var obj = new MyClass(1.0);
console.log(obj.prop);
console.log(obj.method(512));
実行例
$ node sample.js
1
1024
最初のsample.jsのように、prototypeという参照で、特殊な共有オブジェクトに関数定義を保存することで上記問題を回避できます。
プライベートメンバ
クロージャを利用してプライベートメンバを実現できます。prototypeで関数定義を共有しないことがポイントです。
sample.js
function MyClass(prop) {
this.getProp = function() {return prop;}
}
var obj1 = new MyClass(1);
var obj2 = new MyClass(2);
console.log(obj1.getProp());
console.log(obj2.getProp());
実行例
$ node sample.js
1
2
名前空間
空のオブジェクトは名前空間として利用できます。
var NameSpaceA = function(){};
var NameSpaceB = function(){};
NameSpaceA.MyClass = function(prop){
this.prop = prop;
};
NameSpaceB.MyClass = function(prop){
this.prop = prop;
};
NameSpaceA.MyClass.prototype.method = function(){
return '[NameSpaceA::MyClass] ' + this.prop;
};
NameSpaceB.MyClass.prototype.method = function(){
return '[NameSpaceB::MyClass] ' + this.prop;
};
var objA = new NameSpaceA.MyClass('a');
var objB = new NameSpaceB.MyClass('b');
console.log(objA.method()); //=> [NameSpaceA::MyClass] a
console.log(objB.method()); //=> [NameSpaceB::MyClass] b
0
記事の執筆者にステッカーを贈る
有益な情報に対するお礼として、またはコメント欄における質問への返答に対するお礼として、 記事の読者は、執筆者に有料のステッカーを贈ることができます。
さらに詳しく →Feedbacks
ログインするとコメントを投稿できます。
関連記事
- JavaScriptにおける関数定義function文で定義します。 sample.js function fact(n) { return (n==0) ? 1 : n*fact(n-1); } for(var i=0; i<7; ++i) console.log(i +'!='+ fact(i)); 実行例 $ node sample.js 0!=1 1!=1 2!=2 3!=6 4!=24 5!=120 6!=...
- Date オブジェクトの使用例 (JavaScript)コンストラクタ // 現在時刻 var d = new Date(); console.log(d); // システムのタイムゾーンに変換して出力 (この例では JST) //=> Thu Jan 29 2015 23:45:21 GMT+0900 (東京 (標準時)) // システムのタイムゾーン (以下の例では JST) での日付指定 d = new Date('2000/01/01')...
- AngularJS が提供するユーティリティAngularJS では JavaScript の言語仕様として不足のある汎用的な処理を補うためにユーティリティが提供されています。代表的なものをコード例とともに列挙します。公式ドキュメントはこちらです。 <!DOCTYPE html> <html lang="ja" ng-app> <head> <meta charset="utf-8"> ...
- JavaScript のグラフ描画ツール Dygraph の使用例ダウンロード こちらのページから dygraph-combined.js をダウンロードします。 サンプルコード チュートリアルより。 <html> <head> <script type="text
- サービス (AngularJS)AngularJS のビルトインサービスのうち代表的なものをコード例とともに列挙します。公式ドキュメントはこちらです。 <!DOCTYPE html> <html lang="ja" ng-app="myApp"> <head> <meta charset="utf-8"> <script src="angular.min.js">...