簡単なクラス定義 (JavaScript)
[履歴] [最終更新] (2015/02/01 01:51:00)
最近の投稿
注目の記事

概要

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
関連ページ
    概要 基本は理解しており大抵の処理は書ける人でも使用頻度が低いためか忘れてしまいがちな JavaScript の雑多な知識を書き出してみました。 タイマー 一定間隔毎に繰り返し実行 var intervalId; var intervalTime = 1000; //msec var cnt = 0; var intervalFunc = function(){ console.log(
    概要 AngularJS のビルトインサービスのうち代表的なものをコード例とともに列挙します。公式ドキュメントはこちらです。 <!DOCTYPE html> <html lang="ja" ng-app="myApp"> <head> <meta charset="utf-8"> <script src="angular.min.js"></script> </head> <body>