TIL_20.05.10(일) - prototype 상속, ES6: class/super

prototype 상속

prototype에 대해서 조사하고 Prototype Object와 Prototype link에 대한 공부를 하였다. 원래 객체지향언어에서 대표로 사용하는 class를 사용하지 못했는데 (es6에서 부터 class 키워드 사용하능) 객체 지향을 구현하기 위해 사용하는 방법과 Property chain이라는 개념을 통해 자바스크립에서는 상속을 이용하고 있다는 것 또한 알 수 있었다.

정말 모르는 개념이라 블로깅 하는 것이 정말 오래걸렸지만(거의 하루를 다 쓴...) 완벽히 개념은 이해한 것 같아 정말 다행이라고 생각한다.

• JavaScript - Prototype와 상속

ES6: class/super

ES6 부터 class키워드로 class를 지정할 수 있게 되었다.
전에는 여러개의 생성자 함수를 인스턴스에서 연결할 때 연결하는 방법으로 Object.create()를 사용했었다.

ES6에서의 상속은 더 직관적이고 간단하다.

ES6 class사용

class Notebook{
  constructor(customer, brand, color, price){
    this.customer = customer;
    this.brand = brand;
    this.color = color;
    this.price = price;
  }
  buy(){
    console.log(`${this.customer}님이 ${this.brand}을(를) ${this.color}로 ${this.price}주고 구매하셨습니다`);
  }
}

const notebook1 = new Notebook('nrecode','macbook','spacegray','3,500,000');
notebook1.buy(); //nrecode님이 macbook을(를) spacegray로 3,500,000주고 구매하셨습니다

super키워드 이용하기

super 키워드로 다른 클래스를 서브 클래스로 만들 수 있다.

class Reseller extends Notebook{
  constructor(customer, brand, color, price){
    super(customer, brand, color, price);
  }
}

const reseller1 = new Reseller('customer1','samsung','silver','1,800,000');
reseller1.buy(); // customer1님이 samsung을(를) silver로 1,800,000주고 구매하셨습니다

속성들을 사용한 모습을 확인 할 수 있었다.

super() 메소드의 매개변수는 부모 클래스 생성자 매개변수와 동일하다. 부모 클래스에 선언한 constructor는 물론이고 메소드도 사용 가능하다. 부모 클래스에서 정의하지 않은 속성을 추가 하고 싶으면 추가할 수 있다. 다만 super()메소드는 constructor()안에서 가장 상단에 위치해야 한다.