unhurried

コンピュータ関連ネタがほとんど、ときどき趣味も…

JavaScript オブジェクト指向

私はJavaを長く使ってきたためオブジェクト指向の考え方は馴染み深いのですが、JavaScriptではを使うときにはあまり意識していませんでした。JavaScriptはクラスを定義する方法がいくつかあってややこしいので、簡単に整理してみました。

  • ES5以前ではclass構文が利用できないためfunctionを利用します。
var ES5Class = (function() {

    // コンストラクタ
    var ES5Class = function(member) {
        // new演算子を指定せずに下記のように呼び出されたときための対策
        // var instance = ES5Class();
        if(!(this instanceof ES5Class)) {
            return new ES5Class(member);
        }

        // メンバ変数
        // プライベートにしたい変数には慣習的にアンダースコアを付ける。
        // (実際には外部からのアクセスは可能であるが、変数の用途を明示するため。)
        this._member = member;
    };

    // プロトタイプを使ってメソッドを定義する。
    // this.printMethod = function... でも定義できるが、
    // インスタンス生成の度に関数が作成されるため効率が悪い。
    var p = ES5Class.prototype;
    
    // メソッド
    p.printMember = function () {
        console.log(this._member);
    }

    return ES5Class;
})();

module.exports = ES5Class;
  • ES6以降ではclass構文を使ってクラスの定義ができます。
class ES6Class {

    // コンストラクタ
    constructor(member) {
        // メンバ変数
        // プライベートにしたい変数には慣習的にアンダースコアを付ける。
        // (実際には外部からのアクセスは可能であるが、変数の用途を明示するため。)
        this._member = member;
    }

    printMember() {
        console.log(this._member);
    }
}

module.exports = ES6Class
  • class構文では静的メソッドも定義できますが、静的メンバは定義できません。
// class構文には静的メンバを定義する方法は用意されていないため、
// 代替手段として、グローバルスコープの変数を利用する。
var _member = 0;

class ES6StaticClass {

    // 静的メソッド
    static printMember() {
        _member++;
        console.log(_member);
    }
}

module.exports = ES6StaticClass