コンストラクター

コンストラクターとは、オブジェクトを生成する枠組みみたいなもので、同じプロパティ、メソッドを持つオブジェクトを複数作る際に、とても役に立ちます。

例えば以下のようにオブジェクトを複数作るとします。

const product1 = {
    name: 'りんご',
    price: 100,
    sayInfo: () => {
        console.log('りんごの値段は100円です');
    },
};
const product2 = {
    name: 'みかん',
    price: 150,
    sayInfo: () => {
        console.log('みかんの値段は150円です');
    },
};
const product3 = {
    name: 'パイナップル',
    price: 200,
    sayInfo: () => {
        console.log('パイナップルの値段は200円です');
    },
};

これを商品の数だけ作るのはとても大変かと思います。そのような場合にまずはコンストラクターを作ります。コンストラクターはclassを使用します。コンストラクターの命名はパスカルケースで記載します。次にclass内にて、constructorメソッドを使用します。constructorメソッドはクラスが呼び出された際に最初に実行されます。constructメソッド内にて行う処理に関して、thisと記載されていますが、thisは生成されたオブジェクトそのものになります。ですので、ここでは、受け取った引数をnameとpriceというプロパティにセットするようにしています。このコンストラクターから実際にオブジェクトを生成するには、new Product(’りんご', 100)のように呼び出します。

index.js◎

...
product.sayDescription()

class Product {
  constructor(name, price) {
    this.name = name;
    this.price = price;
  }
}
const p1 = new Product("りんご", 100);
const p2 = new Product("みかん", 150);
const p3 = new Product("イナップル", 200);
console.log(p1);
console.log(p2);
console.log(p3);

また、メソッドを定義する場合は、以下のように定義し、オブジェクト生成後は以下のように.sayInfo()で呼び出すことができます。

index.js◎

...
product.sayDescription()

class Product {
  constructor(name, price) {
    this.name = name;
    this.price = price;
  }

  sayInfo() {
    console.log(`${this.name}の値段は${this.price}です`);
  }
}
const p1 = new Product("りんご", 100);
const p2 = new Product("みかん", 150);
const p3 = new Product("イナップル", 200);
console.log(p1);
console.log(p2);
console.log(p3);
p1.sayInfo();
p2.sayInfo();
p3.sayInfo();

そのほかに、静的メソッドというものがあります。静的メソッドというのはオブジェクトを生成せず、そのコンストラクターから直接呼び出せるもので、staticを先頭につけてメソッドを定義し、呼び出す際は、コンストラクター名.メソッド名と呼び出すことができます。

index.js◎

...
product.sayDescription()

class Product {
  constructor(name, price) {
    this.name = name;
    this.price = price;
  }

  sayInfo() {
    console.log(`${this.name}の値段は${this.price}です`);
  };

  static sayFuncDetail() {
    console.log("productのオブジェクトを作るコンストラクターです");
  };
}
const p1 = new Product("りんご", 100);
const p2 = new Product("みかん", 150);
const p3 = new Product("イナップル", 200);
console.log(p1);
console.log(p2);
console.log(p3);
p1.sayInfo();
p2.sayInfo();
p3.sayInfo();
Product.sayFuncDetail();

以上がコンストラクターの作り方で、前セクションで説明したように配列もArrayコンストラクターからオブジェクトを生成しています。ただ配列を定義する際に、let fruits = ['りんご', 'みかん']のように定義すると思いますが、内部的にnew Array('りんご', 'みかん')のように実行されて、オブジェクトが生成されています。

その他にもすでに用意された便利なコンストラクターがありますので、後ほど紹介します。