【JavaScript】クラスを使ってオブジェクトを生成する

クラスとは

クラスはオブジェクトを生成するための設計図のようなものです。クラスからオブジェクトを生成するためには、new クラス名()と記します。クラスから生成したオブジェクトをインスタンスと呼びます。

//下のクラスは空っぽです。
class Animal{

}

//Animalインスタンスをanimalに代入しています。
const animal = new Animal();

コンストラクタとは

コンストラクタはインスタンスを生成する際に実行したい処理を追加するためのものです。constructor(){ }の{ }内に記します。

class Animal{
  constructor(){
    console.log("HELLO WORLD!")
  }
}

//Animalインスタンスをanimalに代入しています。
const animal = new Animal();

実行すると「HELLO WORLD!」が表示されます。

プロパティと値と追加する

オブジェクトの場合にはプロパティ名：値で追加することができましたが、クラスでは「this.プロパティ名 = 値」で記します。プロパティの値は、一旦インスタンスを生成した後で、「代入した変数名.プロパティ名」で取り出すことができます。

class Animal{
  constructor(){
    this.name ="ポチ"
  }
}

const animal = new Animal();
console.log(animal.name);
//console.log(Animal.name);では取り出せない！！

コンストラクタの引数

コンストラクタに引数を利用することができます。コンストラクタ()内に引数名を記し、インスタンスを生成する際に値を入れます。

class Animal{
  constructor(name,food){
    this.name = name;
    this.food = food;
  }
}

const animal = new Animal("ポチ","肉");
console.log(animal.name + animal.food);

メソッドとは

メソッドはクラスで処理を追加する機能です。

class Animal{
  constructor(name,food){
    this.name = name;
    this.food = food;
  }
  greeting(){
    console.log(`私は${this.name}です。よろしくね。`)
  }
}

const animal = new Animal("ポチ","肉");
animal.greeting();

メソッド内で他のメソッドを使うこともできます。this.メソッド名で呼び出します。

class Animal{
  constructor(name,food){
    this.name = name;
    this.food = food;
  }
  info(){
    console.log(`好きな食べ物は${this.food}です`);
  }
  greeting(){
    console.log(`私は${this.name}です。よろしくね。`);
    this.info();
  }
}

const animal = new Animal("ポチ","肉");
animal.greeting();