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

オブジェクトを一つずつ作成するのは時間がかかります。もし同じプロパティを持つ10人の学生が必要な場合、同じコードを繰り返し書くのは時間の無駄です。

JavaScriptでは、コンストラクタ関数（Constructor Functions）を使うことでこれを解決できます。

コンストラクタは「設計図」だと考えてください。家の設計図は家そのものではありませんが、それを使って多くの家を建てることができます。

仕組み：

コンストラクタは特別な関数です。newキーワードを使うことで、それからオブジェクトを作成できます。

例：

function Student(name, age, city) {
    this.name = name;
    this.age = age;
    this.city = city;
}

const student1 = new Student("John", 21, "Chennai");
const student2 = new Student("David", 22, "Madurai");

なぜこれを使うのか？

  • 時間を節約できます。
  • コードの重複を防げます。
  • データの標準的な構造を作成できます。

thisの役割：

コンストラクタ内では、thisという言葉は作成中の新しいオブジェクトを指します。

もし先生が「私の教室」と言った場合、「私の」という言葉はその特定の先生を指します。コードにおいて、this.nameは、たった今作成した特定のオブジェクトの名前を指します。

newを使うと何が起きるのか？

const emp = new Employee("John", 50000) を実行すると、次の4つのステップが行われます：

  1. JavaScriptが空のオブジェクトを作成します。
  2. thisキーワードがその新しいオブジェクトを指します。
  3. プロパティがオブジェクトに追加されます。
  4. オブジェクトが返されます。

アクションの追加：

オブジェクトはデータを保持するだけでなく、アクションを実行することもできます。プログラミングでは、これらのアクションを「メソッド（methods）」と呼びます。

例：

function Laptop(brand, ram) {
    this.brand = brand;
    this.ram = ram;
    this.showDetails = function() {
        console.log(this.brand, this.ram);
    };
}

Laptopオブジェクトは、データと、そのデータを表示するための関数を保持するようになりました。

ベストプラクティス：

  • コンストラクタの最初の文字は必ず大文字にしてください。studentではなくStudentを使います。これにより、他の開発者にnewキーワードを使うべきであることを伝えます。
  • 必ずnewキーワードを使用してください。忘れてしまうと、関数は通常の関数として動作し、コードが壊れてしまいます。

比較：

オブジェクトリテラル：

  • 単一のオブジェクトに適しています。
  • シンプルで高速です。
  • 設計図はありません。

コンストラクタ関数：

  • 多くのオブジェクトに適しています。
  • 再利用可能で整理されています。
  • 設計図のアプローチを使用します。

Source: https://www.w3schools.com/js/js_object_constructors.asp Source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/constructor Full post: https://dev.to/annapoo/constructor-in-javascript-4nbm