オブジェクトの作成

ファクトリ関数

工場関数

クラスは2015年にJavascriptに追加された構文で、以前は関数でオブジェクトを作成していました.

function createMonster(name, hp, att, xp) {
  return { name, hp, att, xp };
}

const monster1 = createMonster('슬라임', 25, 10, 11);
const monster2 = createMonster('슬라임', 26, 10, 10);
const monster2 = createMonster('슬라임', 25, 11, 10);

ここで重要なのは、生成された3つのオブジェクトが相互参照関係ではなく、異なるオブジェクトでなければならないことです.

コンストラクタ

new呼び出しを追加する関数をコンストラクション関数と呼びます.
クラスに近い方法でオブジェクトを作成するには、次の手順に従います.

function Monster(name, hp, att, xp) {
  this.name = name;
  this.hp = hp;
  this.att = att;
  this.xp = xp;
}

const monster1 = new createMonster('슬라임', 25, 10, 11);
const monster2 = new createMonster('슬라임', 26, 10, 10);
const monster2 = new createMonster('슬라임', 25, 11, 10);

注意)newを付けて呼び出しを行わないと、thisはwindowになりますので、window.nameを付けなければなりません.
※コンストラクション関数の名前は大文字で始まるのが一般的です.

カテゴリ

ファクトリ関数をクラスに置き換える

Javascriptはクラス構文を導入し、コンストラクション関数の作成をより便利にします.

class Monster {
  constructor(name, hp, att, xp) {
    this.name = name;
    this.hp = hp;
    this.att = att;
    this.xp = xp;
  }
}

const monster1 = new createMonster('슬라임', 25, 10, 11);
const monster2 = new createMonster('슬라임', 26, 10, 10);
const monster2 = new createMonster('슬라임', 25, 11, 10);

クラスにnewを貼り付けて呼び出すと、new関数が実行され、オブジェクトが返されます.ここで、constructorは、生成されたオブジェクト自体を指す.

クラス文法を使うメリットは?(ファクトリ関数、コンストラクション関数と比較)

次の2つのコードを見てください.
クラス構文の使用(ジェネレータ)

class Monster {
  constructor(name, hp, att, xp) {
    this.name = name;
    this.hp = hp;
    this.att = att;
    this.xp = xp;
  }
  
  attack(monster) {
    monster.hp -= this.att;
    this.hp -= monster.att;
  }
  
  heal(monster) {
    this.hp += 20;
    this.hp -= monster.att;
  }
}

出荷時関数の使用

function createMonster(name, hp, att, xp) {
  return {
    name, hp, att, xp,
    
    attack(monster) {
      monster.hp -= this.att;
      this.hp -= monster.att;
    },
    heal(monster) {
      this.hp += 20;
      this.hp -= monster.att;
    },
  };
}

両者は似ているように見えますが、大きな違いがあります.
ファクトリ関数でオブジェクトが生成されるたびに、新しい攻撃と治療法が生成されます.
逆に、クラス構文では、作成された攻撃と癒しの方法が繰り返し使用されます.
コンストラクション関数の使用

function Monster(name, hp, att, xp) {
  this.name = name;
  this.hp = hp;
  this.att = att;
  this.xp = xp;
}

Monster.prototype.attack = function(monster) {
  monster.hp -= this.att;
  this.hp -= monster.att;
};

Monster.prototype.heal = function(monster) {
  this.hp += 20;
  this.hp -= monster.att;
};

コンストラクション関数にメソッドを追加する場合は、prototypeというプロパティに追加する必要があります.
prototypeプロパティに追加されたメソッドをprototypeメソッドと呼びます.
これにより、工場関数とは異なり、thisおよびattackの方法を再利用することができる.(ただし、コンストラクション関数とプロトタイプメソッドは全体ではありません)
最終的に、これらの問題をすべて解決します(関数を再使用し、構造関数と結合して表示します).