JavaScriptのコンストラクター関数について

コンストラクター関数について

こｎコンストラクター関数とは新しく「オブジェクト」を作成するための雛形となる関数です。通常の｛｝構文では１つのオブジェクトを作成します。コンストラクター関数を利用すると似たようなオブジェクトを複数作成することができます。

コンストラクター関数には２つの慣習があります。
・　名前は大文字で始める。
・　コンストラクター関数を呼び出す際は'new'演算子を用いて実行する。

早速コードで確認してみましょう。

JS

function Person(name, age) {

    this.name = name
    this.age = age
}

const admin = new Person('Tom', 30);

console.log(admin);

1.　まずPersonというコンストラクター関数を用意します（大文字に注意）
2. new演算子を用いて新しいオブジェクトを作成し（インスタンス化）adminという変数に格納します。

ここでnew演算子とは何かを説明します。

new演算子

new 演算子を用いて関数が実行された場合、次のような処理が行われます:

1. 新しい空のオブジェクトが作成され、 this に割り当てられます。
2. 関数本体を実行します。通常は新しいプロパティを追加することで this に変更を加えます。
3. this の値が返されます。

先程のコードで考えると

JS

function Person(name, age) {
    // this = {}; 暗黙
    this.name = name
    this.age = age
    // return this; 暗黙
}
const admin = new Person('Tom', 30);
console.log(admin);

ここでコンストラクター関数から返却されるreturnについてもう少し詳しく見てみましょう。
通常、コンストラクタは return 文を持ちません。コンストラクタの仕事は、必要なものをすべて this の中に書き込むことであり、this が自動的に戻り値となります。次の２ケースをコードで確認してみましょう。
１．return がオブジェクトと一緒に呼ばれた場合、this の代わりにオブジェクトが返されます。

JS

function Person(name, age) {
    this.name = name
    this.age = age
    return  {} //空のオブジェクト
}
const admin = new Person('Tom', 30);
console.log(admin); //=> {}　空のオブジェクトが出力される

２．　return がプリミティブと一緒に呼ばれた場合、それは無視されます。

JS

function Person(name, age) {
    this.name = name
    this.age = age
    return  1; //プリミティブ型
}
const admin = new Person('Tom', 30);
console.log(admin); //=> admin　が出力される

まとめ

・複数の似たようなオブジェクトを作るために、コンストラクタ関数を使うことができます。
・コンストラクタ関数は new を使ってのみ呼び出されるべきです。この呼び出しは、最初に空の this を作成し、必要な処理が行われた this を最後に返すことを意味します。

参考

Udemy： 【JS】ガチで学びたい人のためのJavaScriptメカニズム
現代の JavaScript チュートリアル:https://ja.javascript.info/logical-operators