クラスの作り方4パターン

コンストラクタ方式

コンストラクタ方式
function クラス(){
    this.変数1 = 1;
    this.関数1 = function(){ alert("関数1です") };
}

var インスタンス = new クラス();
インスタンス.変数1;   //1
インスタンス.関数1(); //関数1です

インスタンス毎に変数と関数が作られる。
クラス内に全て記述するので分かりやすいのが利点、関数をインスタンス毎に作るのが無駄なのが難点

プロトタイプ方式

プロトタイプ方式
function クラス(){  }
クラス.prototype.変数1 = 1;
クラス.prototype.関数1 = function(){ alert("関数1です") };

var インスタンス = new クラス();
インスタンス.変数1;   //1
インスタンス.関数1(); //関数1です

インスタンス間で変数と関数が共有される。
メモリ消費量が少ないのが利点、変数の値にthisや引数を使用できないのが難点

ハイブリッド方式

ハイブリッド方式
function クラス(){
    this.変数1 = 1;
}
クラス.prototype.関数1 = function(){ alert("関数1です") };

var インスタンス = new クラス();
インスタンス.変数1;   //1
インスタンス.関数1(); //関数1です

変数はインスタンス毎に作られ、関数はインスタンス間で共有される。
コンストラクタ方式とプロトタイプ方式の難点を克服するも、変数と関数を分離して記述するため分かりにくいのが難点

ES2015方式

ES2015方式
class クラス{
    constructor(){
        this.変数1 = 1;
    }
    
    関数1(){
        alert("関数1です");
    }
}

var インスタンス = new クラス();
インスタンス.変数1;   //1
インスタンス.関数1(); //関数1です

変数はインスタンス毎に作られ、関数はインスタンス間で共有される。(ハイブリッド方式と同等)
ハイブリッド方式の難点を克服したクラス記述の完成系