[TIL] JS ES6 class 키워드 및 super 키워드

ES6문법에서 class가 새롭게 추가되었습니다.
기존에 prototype를 사용할때 불편했던점들을 보완하고 더 간편하게 코드를 작성할수 있게 되었습니다.

예시로 설명해드리겠습니다.

let Animal = function (name) {
  this.name = name;
}
Animal.prototype.sleep = function() {
  console.log(this.name + '이(가) 잠이옵니다...쿨쿨');
}

let latte = new Animal('latte');

let Cat = function(name) {
  Animal.call(this, name);
}

Cat.prototype = Object.create(Animal.prototype);
Cat.prototype.constructor = Cat;
Cat.prototype.punch = function() {
  console.log(this.name + '이(가) 냥냥펀치를 날립니다 얍얍');
}

let lucky = new Cat('lucky');
lucky.sleep();
lucky.punch();

해당 코드를 ES6의 class와 super을 사용한 문법으로 다시 작성해 보여드리겠습니다.

class Animal {
  constructor(name) {
    this.name = name;
  }
  sleep() {
    console.log(this.name + '이(가) 잠이옵니다...쿨쿨');
  }
}

let latte = new Animal('latte');

class Cat extends Animal {
  constructor(name) {
    super(name);
  }
  punch() {
    console.log(this.name + '이(가) 냥냥펀치를 날립니다 얍얍');
  }
}

let lucky = new Cat('lucky');
lucky.sleep();
lucky.punch();

위의 prototype를 사용한 코드에서 두개의 prototype와 constructor를 연결해준 부분을 extends라는 메소드를 이용해 해결할 수 있습니다.

super이라는 메소드는 부모객체의 함수를 호출할 때 사용됩니다.
해당 constructor내에서 super함수가 먼저 선언되지 않고, this를 사용하게되면 참조오류가 발생합니다.