コンストラクタ関数 [JavaScript] - カエデ＠30代無職&未経験からフロントエンドエンジニア

もりけん塾（@terrace_tech）にて、JavaScriptを勉強しています。

今回は、コンストラクタ関数について調べていきたいと思います。

コンストラクタ関数の仕組みを理解する必要がある理由

コンストラクタ関数について学んでいくと、newキーワードやthis、プロトタイプなど様々な用語が出てきます。これらはすべて、コンストラクタ関数でインスタンスを作成する際に知っておくべきコンセプトです。

オブジェクトを作成する方法に関しては今後、classやファクトリ関数なども詳しく見ていく予定ですが、コンストラクタ関数の仕組みを理解することによって、別の方法と比較する際に、有利な点や不利な点を把握しておけると思いました。

コンストラクタ関数とは

コンストラクタ関数は、オブジェクトを作るひな型の関数です。

オブジェクトを作成するためには色々な方法がありますが、コンストラクタ関数はそのうちの一つです。

newキーワードを使用して、新しいオブジェクトを作成することが出来ます。

コンストラクタ関数はnewキーワードを使用して呼び出すと、通常の関数とは違った動きをします。

コンストラクタ関数以外でオブジェクトを作る場合

先ほど「オブジェクトを作成するためには色々な方法がある」と書きましたが、オブジェクトを作成する方法の一つとして、オブジェクトリテラルという書き方があります。

オブジェクトリテラルでオブジェクトを作る場合は、1個1個、オブジェクトのプロパティ（下記の例の場合、title / author / yearの部分）を書いていきます。

// 毎回すべてのプロパティを書く

const book1 = {
    title: "人間失格",
    author: "太宰治",
    year: 1948
}
const book2 = {
    title: "吾輩は猫である",
    author: "夏目漱石",
    year: 1905
}
const book3 = {
    title: "羅生門",
    author: "芥川龍之介",
    year: 1915
}

コンストラクタ関数を使用してオブジェクトを作る場合

コンストラクタ関数を設定する

コンストラクタ関数を設定することにより、あらかじめオブジェクトが持つプロパティを設定することが出来ます。なのでオブジェクトを作るたびに毎回同じプロパティを書く必要がなくなります。

コンストラクタ関数を作成する場合、関数名の最初の文字は通常、大文字にします。例えばtitle、author、yearというプロパティを持たせたい場合は、下記のように設定します。

// コンストラクタ関数

function Book(title, author, year) {
    this.title = title;
    this.author = author;
    this.year = year;
}

オブジェクトを作る

コンストラクタ関数を元にして作られたオブジェクトを、インスタンスと呼びます。

コンストラクタ関数でインスタンスを作成するには、newというキーワードを使い、関数を呼び出します。

// newキーワードを使用したインスタンスの作り方

const book1 = new Book("人間失格", "太宰治", 1948);
const book2 = new Book("吾輩は猫である", "夏目漱石", 1905);
const book3 = new Book("羅生門", "芥川龍之介", 1915);