HOME > Learning Place >  No.4 コンストラクタ

No.4 コンストラクタ

今回は、JavaScriptのコンストラクタについてご説明します。

コンストラクタとは

JavaScriptでは、次のようにオブジェクトリテラルを使ってオブジェクトを定義できます。

1

var newObj = {};

同様に、new 演算子を使ってオブジェクトを生成する事もできます。

1

var newObj = new Object();

new演算子と一緒に使うための関数をコンストラクタ関数といいます。 前の例で示したObject()は、すでに用意されているコンストラクタ関数です。 Array()やDate()も同じですね。 JavaScriptでは、このような用意されたコンストラクタ関数の他に、自分でコンストラクタ関数を書くこともできます。

1
2
3
4
5
6

function MobilePhone(manufacturer, os, model, carrier) {
    this.manufacturer = manufacturer,
    this.os = os,
    this.model = model,
    this.carrier = carrier
}

Javascriptでのコンストラクタは、オブジェクトを初期化する関数のことです。 この例では、関数に渡された、manufacturerなどの引数を、thisというオブジェクトにセットしています。 コンストラクタ関数の中でのthisは、これから作成するオブジェクトという意味になります。

この関数を定義すると、次のようにオブジェクトを生成する事ができます。

1

mobilePhone = new MobilePhone('Apple', 'iOS', 'iPhone5', 'Softbank');

この文を実行して取得できるオブジェクトは次のようなものになります。

1
2
3
4
5
6

{
    manufacturer: "Apple",
    os: "iOS",
    model: "iPhone5",
    carrier: "Softbank"
}

new演算子を呼び出すことでMobilePhoneオブジェクトをいくらでも作ることができます。

new演算子について

new演算子は、オブジェクトや配列、Dateオブジェクトの説明をしたときにも出てきましたね。 new演算子は、指定されたコンストラクタ関数に基いて新たにオブジェクトを生成するための機能です。

コンストラクタにおけるthis

コンストラクタ関数は、new演算子によって呼び出された時に、コンストラクタになるわけですが、その際、関数の中で使われるthisキーワードがあります。 thisはJavaScriptにおいては、その使われる局面によって様々なものを指し示しますが、コンストラクタの中で使われた場合には、 これから生成されるオブジェクト を指します。

1
2
3
4
5
6

function MobilePhone(manufacturer, os, model, carrier) {
    this.manufacturer = manufacturer,
    this.os = os,
    this.model = model,
    this.carrier = carrier
}

再度同じ例を挙げました。thisオブジェクトに渡された引数の値をセットしています。 このthisは、

1

mobilePhone = new MobilePhone('Apple', 'iOS', 'iPhone5', 'Softbank');

このように実行されたときの、MobilePhoneオブジェクトです。

1
2
3
4
5
6
7
8
9

function MobilePhone(manufacturer, os, model, carrier) {
    this.manufacturer = manufacturer,
    this.os = os,
    this.model = model,
    this.carrier = carrier,
    this.fullspec = function() {
        return [this.manufacturer, this.os, this.model, this.carrier].join('/');
    }
}

生成するのはオブジェクトですから、このように関数のメンバ（つまりメソッド）をセットすることもできます。 このメソッドの中でも、thisが使われていますね。 これも、通常の呼び出し方で、このメソッドが呼び出されたらば、thisは生成されるオブジェクトになります。

このオブジェクトを new演算子で生成して、メソッドを実行してみます。

1
2

mobilePhone = new MobilePhone('Apple', 'iOS', 'iPhone5', 'Softbank');
console.log(mobilePhone.fullspec());

“Apple/iOS/iPhone5/Softbank” と表示されます。 thisは、mobilePhoneオブジェクトだと言うことが解ります。

さて、スコープのところで、callとかapplyの勉強をしました。 そこで、次のように二つのオブジェクトを作り、いくつかの呼び出し方を試してみます。

1
2
3
4
5
6
7
8
9

sb = new MobilePhone('Apple', 'iOS', 'iPhone5', 'Softbank');
au = new MobilePhone('Apple', 'iOS', 'iPhone5', 'au');
// 普通に実行
console.log(au.fullspec());
// スコープを指定
console.log(au.fullspec.call(sb));
// 関数に代入
func = au.fullspec;
console.log(func);

結果は次のようになります。

1
2
3

Apple/iOS/iPhone5/au
Apple/iOS/iPhone5/Softbank
///

普通に実行すると、auオブジェクトの内容が出力されました。 次に、callを使って、スコープをsbに設定してやると、sbの内容が出力されます。 実行時のスコープを変更したからですね。

最後に、func = au.fullspec と、グローバルな関数として保存した後に、実行した場合には、thisがグローバルオブジェクト(window)になるため、すべてのプロパティが空っぽと言うことになり、このように表示されます。

オブジェクトのメソッドの中でのthisは、

  1. オブジェクトのメソッドとして呼び出されると、そのオブジェクトが入ります。
  2. applyやcallで、スコープオブジェクトが指定されるとそのオブジェクトになります。
  3. 関数として呼び出されると、グローバルオブジェクトになります。

次回は、比較についてご説明していきたいと思います。
それでは、お楽しみに！！！

Learning Placeトップに戻る

PAGETOP