No.3 JavaScriptでの疑似クラス(1)

疑似クラスって？

まずクラスというのは、オブジェクト指向言語におけるオブジェクトの設計図のようなもののことで、 クラスによって生成されたオブジェクトをインスタンスと呼びます。

本来、JavaScriptにはクラスという言語仕様はありません。

ですが、前回までに説明したコンストラクタやprototype、クロージャーの仕組みを使って、
擬似的にクラスの仕組みを再現してきました。

その中で、今回はクロージャーを使ったクラスの作成についてもう少し詳しくやりたいと思います。

クロージャー

クロージャーについては前回説明しました。詳細に関しては応用 No.2 クロージャーを参照しましょう。

クロージャーとは、関数内のローカルスコープ外にある変数にアクセスすることができる仕組みのことでしたね。

こんな風に書きました。

1
2
3
4
5
6
7
8
9
10
11
12

function f() {
    var x = 1;
    return function() {
        return x++;
    }
}
 
var func = new f();
 
console.log(func()); // 1
console.log(func()); // 2
console.log(func()); // 3

利点と欠点

プロトタイプは使えない

下記コードを見て下さい。
クロージャーをコンストラクタとして利用したときには、プロトタイプを設定しても利用することができません。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

function f() {
    var x = 0;
    return {
        count: function() {
            x++;
            console.log(x);
        },
        set : function(num) {
            x = num;
            console.log(x);
        },
        reset: function() {
            x = 0;
            console.log(x)
        }
 
    }
}
 
f.prototype.logFn = function() { 
    console.log('test');
}
 
var func = new f();
 
func.count(); // 1
func.count(); // 2
func.count(); // 3
func.logFn(); // Error!!

理由は想像できるでしょうか？
これは、関数ｆをコンストラクタとして利用したときの返り値が、 プロトタイプを設定されたfのインスタンスではなく、別のオブジェクトをreturnしているからです。

ここでのfuncはfのインスタンスではないのだから、プロトタイプが使えないのも当然ですね。

変数を隠蔽する

先ほどのコードのようにすると、ローカル変数xには外部からはアクセスできず、 アクセスできるのは

• func.count()
• func.set()
• func.reset()

の関数だけになります。このようにして、よりPrivateな変数を持つクラスを作ることができるのです。

今回はここまで。
次回はJavaScriptでの疑似クラス(2)、シングルトンについてです。

お楽しみに！