10
12

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

[JavaScript] 4. 即時関数でクラス定義

Last updated at Posted at 2015-12-04

  1. クラスの定義
  2. クラスの継承
  3. 即時関数 と jQuery.readyイベント関数
  4. 即時関数でクラス定義
  5. private プロパティ
  6. Object.defineProperty/ies でプロパティ/メソッド定義

1.クラスの定義では、コードを解りやすくするために ラベルブロック を使ってクラス定義全体を括る方法を紹介しました。
ここでは 即時関数 の中にクラス定義を入れる方法を紹介します。

※即時関数については、3.即時関数 と jQuery.readyイベント関数 を参照してください。

#即時関数でのクラス定義
この方法では、クラス定義全体を 即時関数 の中で行います。

即時関数内でクラス定義
クラス名 = (function(){
    var コンストラクタ関数オブジェクト変数 = function(仮引数, ...) {
        コンストラクタ処理 
    }
    .
    .
    .
    return コンストラクタ関数オブジェクト変数;
})();

ポイントは、即時関数はあくまで関数なので 返り値 を持つという点です。
そして定義されるクラスは、コンストラクタとして定義された関数オブジェクトです。

そこで即時関数の最後、クラス定義を終えた後に、コンストラクタ関数オブジェクト(=クラス)を返り値として返し、それを変数で受け取ります。
結果、受け取った変数がクラスそのものになります。

MyClass-immediate.js
MyClass = (function() {
    var myClass = function(prop1, prop2) {
        this.prop1 = prop1;
        this.prop2 = prop2;
    }
    
    return myClass;
})();

コンストラクタ関数オブジェクトは即時関数内のローカル変数にしています。
即時関数の返り値を受け取ったグローバル変数 MyClass がこのクラスを表す名前になります。

##静的な private プロパティ
この方法を利用すると、擬似的に静的な private プロパティを設けることができます。

即時関数内でクラス定義
クラス名 = (function(){
    .
    .
    
    var 変数;
    var 変数 = ;
})();

即時関数内のローカル変数は、同関数の内部からしかアクセスできません。
したがってクラス内だけで利用できる変数=private プロパティ となります。
ただしコンストラクタ関数オブジェクトとは関わりがありませんので、あくまで静的なプロパティとなります。

MyClass-immediate.js
MyClass = (function() {
    // 静的なprivateプロパティ
    var privateProp = null;
    
    // セッター
    myClass.setPrivateProp = function(arg) {
        privateProp = arg;
    }
    
    // ゲッター
    myClass.getPrivateProp = function() {
        return privateProp;
    }
})();

この例では、privateProp という静的privateプロパティを定義しています。
また、静的メソッドとしてこのプロパティへのセッター、ゲッターを定義しています。

#サンプルコード

MyClass-immediate.js
/**
 * クラス MyClass
 */
MyClass = (function() {
    /**
     * コンストラクタ
     */
    var myClass = function(prop1, prop2) {
        // プロパティの定義
        this.prop1 = prop1;
        this.prop2 = prop2;
    }
    // prototype をローカル変数へ
    var p = myClass.prototype;
 
    // 静的なprivateプロパティ
    var privateProp = null;
    
    /**
     * privateProp セッター
     */
    myClass.setPrivateProp = function(arg) {
        privateProp = arg;
    }
    
    /**
     * privateProp ゲッター
     */
    myClass.getPrivateProp = function() {
        return privateProp;
    }
    
    /**
     * メソッド methodA
     */
    p.methodA = function(arg1, arg2) {
        return this.prop1 + this.prop2 + arg1 + arg2 + privateProp;
    }
    
    return myClass;
})();

// MyClassオブジェクトを生成
var obj = new MyClass('aaa', 'bbb');
// privateProp に値をセット
MyClass.setPrivateProp('ppp');
// MyClass.methodA() を呼び出す
var result = obj.methodA('ccc', 'ddd');
10
12
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10
12

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?