두번째 주 시작

월요일부터 빡센 하루였다.그래도 오늘은 과제를 모두 마무리해서 아주 기분이 좋다. 

JS는 진짜 이상한 언어야.. 라고 생각하면서 배움의 니즈를 느꼈음에도 외면했던 날들을 후회하면서, 이번 기회에 과제를 하며 알음 알음 공부를 해보니 생각이 조금은 바뀌는 것도 같다. prototype도 오늘에야 처음으로 나름 깊게 들여다봤는데, 역시 모든것엔 다 이유가 있고, 널리 쓰이는 것에는 의미가 있는 모양이다. 하루종일 올라오는 캠퍼분들의 질문들과 양질의 자료들을 다 소화못해서 속상하지만, 그래도 이만하면 됐지 라고 생각하기도 한다.

JS 프로토 타입의 상속을 정리한 글을 붙이며 글을 줄여야겠다. 매우 졸리다.

 

프로토타입 상속

prototype pattern이 상당히 재밌었지만, 이번에 처음 써보는 거여서 어색했다. 그리고 상속에 대해서도 이해하기 힘들었다. js에서는 2015년까지 클래스 문법 자체가 존재하지 않았다. 그리고 사실 지금의 class문법도 prototype을 이용해서 구현되었다고 한다.

그래서 prototype을 이용한 상속을 조금 알아봤다. 구현 방법은 다음과 같다.

다음을 가정해 보자

• 유닛들은 공통적으로 HP, Attack, Position, Ideology(편)를 가지고 있다.
• 유닛들은 공통적으로 이동과 공격의 메서드를 가지고 있다.

function Unit(name, hp, attack, position, ideology) {
  this.name = name;
  this.hp = hp;
  this.attack = attack;
  this.position = position;
  this.ideology = ideology;
}

Unit.prototype.move = function (board) {
  const { x, y } = this.position;
  const { length } = board;
  const result = [];
  for (let i = 0; i < length; i++) {
    for (let j = 0; j < length; j++) {
      if (i === x && j === y) continue;
      result.push({ x: i, y: j });
    }
  }
  return result;
};

Unit.prototype.attack = function (target) {
  target.hp -= this.attack;
};

function Ultron() {
  Unit.call(this, "울트론", 400, 40, { x: 0, y: 0 }, "악");
}

Ultron.prototype = Object.create(Unit.prototype);
Ultron.prototype.constructor = Ultron;

function BlackWidow() {
  Unit.call(this, "블랙위도우", 400, 10, { x: 5, y: 0 }, "악");
}

BlackWidow.prototype = Object.create(Unit.prototype);
BlackWidow.prototype.constructor = BlackWidow;

위와 같이 Unit이라는 생성자 함수를 만들고, 그 안에 공통적으로 가지고 있는 속성과 메서드를 넣어준다. 그리고 이를 상속받을 생성자 함수를 만들어준다. 그리고 이를 상속받을 생성자 함수의 prototype에 Unit.prototype을 할당해준다. 그리고 생성자 함수의 prototype.constructor를 생성자 함수로 바꿔준다.

이렇게 하면 상속받은 생성자 함수의 prototype에는 Unit의 prototype에 있는 메서드들을 사용할 수 있게 된다.

구글링해서 알게된 결과는 여기까지다. 사실 아직 제대로 이해한 것도 아니다. 이번주는 시간을 내어서 js에 대해 깊게 공부해봐야겠다. 코디님이 주신 "You Don't know JS"에 자세히 기술되어있다고 들었는데, 얼른 읽어봐야겠다..