클래스

클래스란

클래스란 객체를 생성하기 위한 템플릿이다.

클래스 이전의 객체 생성

클래스 이전에는 함수로 객체를 생성했다. 함수로 객체를 생성하는 방법으로 공장함수와 생성자 함수가 있다.

공장함수

공장함수는 객체를 반환값을 가지는 것 외에는 일반 함수와 문법이 동일하다.

// factory function(공장함수)
function createMonster(name, hp, att) {
  return {
    name,
    hp,
    att,
    // 객체에 메서드까지 담아서 반환 가능, 공장함수로 객체 생성 시 메서드도 동일하게 새로 생성 됨
    attack(monster) {
      monster.hp -= this.att;
    },
  };
}

공장함수로 생성한 객체가 메서드를 가지기 위해서는 반환 객체에 함수를 포함해야한다. 객체를 생성할 때마다 함수를 새로 생성하는 것은 자원 낭비이므로 공장함수 외부에 객체의 메서드를 선언하는 방법이 있다.

// factory function(공장함수)

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

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

생성자함수

생성자함수는 객체의 이름을 본따 함수 이름으로 삼는다. 공장함수와 마찬가지로 메서드가 생성자 함수 밖에서 정의된다.

// constructor function 생성자함수
function Monster(name, hp, att) {
  this.name = name;
  this.hp = hp;
  this.att = att;
}

// 생성자 함수로 생성한 객체 시 메서드 설정법
Monster.prototype.attack = function (monster) {
  monster.hp -= this.att;
};

생성자 함수로 객체 선언 시 new 키워드를 사용한다.

const monster4 = new Monster('슬라임', 45, 1);
const monster5 = new Monster('슬라임', 1, 100);
const monster6 = new Monster('슬라임', 100, 3);

클래스: 함수 이수의 객체 생성법

클래스는 객체와 메서드를 묶어서 관리하기 위한 템플릿이다. 공장함수와 생성자함수와 달리 메서드와 속성을 동일 블록 속에서  함께 정의한다.

class Monster {
  // 생성자 함수
  constructor(name, hp, att) {
    this.name = name;
    this.hp = hp;
    this.att = att;
  }
  // 메서드
  attack(monster) {
    monster.htp -= this.att;
  }
}

상속을 활용하면 기존의 클래스 코드를 재사용하여 새로운 클래스를 만들 수 있다.

class Unit {
  constructor(name, hp, att) {
    this.name = name;
    this.hp = hp;
    this.att = att;
  }
  attack(target) {
    target.hp -= this.att;
  }
}

class Hero extends Unit {
  constructor(name, hp, att) {
    super(name, hp, att);
    this.maxHp = hp;
  }
  attack(target) {
    super.attack(target);
    console.log('추가동작');
  }
  heal() {
    this.hp = this.maxHp;
  }
}

자식클래스는 생성자와 부모의 함수를 사용할 때 super를 사용해야한다.

정리

• 객체는 함수로 생성하는 방법과 클래스로 생성하는 방법이 있다.
• 클래스는 객체를 생성하기 위한 템플릿이다.
• 객체를 함수로 생성하는 방법으로 생성자 함수와 공장함수가 있다.
• 객체 생성시 new 키워드를 사용한다.
• extends를 통해 상속으로 기존의 코드를 재사용하여 클래스를 새로 정의할 수 있다.