[JavaScript] 상속

상속이란 말 그대로 부모클래스의 내용을 자식클래스가 이어받아서 그대로 사용하거나 변형해서 사용하는 것을 의미합니다.

상속이란 개념은 자바나 파이썬 등 타 프로그래밍 언어에도 존재합니다. 

여기서는 자바스크립트의 상속 사용법에 대해 설명하겠습니다.

1. 상속방법

자바스크립트에서는 상속을 하는 방법은 아래와 같습니다.

자식클래스 extends 부모 클래스

 

class Bird {
  wings = 2;
}
class Eagle extends Bird {
  claws = 2;
}
class Penguin extends Bird {
  swim () { console.log('수영중...'); }
}
class EmperorPenguin extends Penguin {
  size = 'XXXL';
}

const b = new Bird();
const e = new Eagle();
const p = new Penguin();
const ep = new EmperorPenguin();

console.log(
	b, //Bird {wings: 2}
    e, //Eagle {wings: 2, claws: 2}
    p, //Penguin {wings: 2}
    ep //EmperorPenguin {wings: 2, size: 'XXXL'}
);

//instanceof 메소드는 메소드 앞의 인스턴스가 메소드 뒤의 객체의 인스턴스인지 확인하는 메소드
for (const i of [
  [ '1.', b instanceof Bird ],
  [ '2.', e instanceof Bird ],
  [ '3.', e instanceof Eagle ],
  [ '4.', ep instanceof Penguin ],
  [ '5.', ep instanceof Bird ],
  [ '6.', b instanceof Eagle ]
]) {
  console.log(i[0], i[1]);
}
//출력:
//1. true
//2. true -> Eagle 클래스가 Bird클래스를 상속받고 있기 때문
//3. true 
//4. true -> EmperorPenguin 클래스가 Penguin클래스를 상속받고 있고 Penguin클래스는 Bird클래스를 상속받고 있기 때문
//5. true -> EmperorPenguin 클래스가 Penguin클래스를 상속받고 있기 때문
//6. false -> Bird 클래스가 부모클래스이고 Eagle클래스가 자식 클래스이기 때문에 Bird 클래스의 인스턴스인 b는  Eagle클래스의 인스턴스가 될 수 없음

 

상속받은 자식클래스의 인스턴스는 부모클래스의 인스턴스로도 인식되기 때문에 부모클래스의 메소드를 그대로 사용할 수도 있습니다.

 

class Chicken {
  no = 0;
  menu = { '후라이드': 10000, '양념치킨': 12000 };

  constructor (name, no) {
    this.name = name;
    if (no) this.no = no;
  }
  introduce () {
    return `안녕하세요, ${this.no}호 ${this.name}점입니다!`;
  }
  chickenOrder (name) {
    return `${this.menu[name]}원입니다.`
  }
}

class ChickenAndCafe extends Chicken {
  cafeMenu = { '아메리카노': 4000, '라떼': 4500 };
  cafeOrder (name) {
    return `${this.cafeMenu[name]}원입니다.`
  }
}

const chain1 = new ChickenAndCafe('서면', 2)

console.log(
  chain1.chickenOrder('후라이드'), //10000원입니다. 
  chain1.cafeOrder('라떼') //4500원입니다.
);

2. 오버라이딩

오버라이딩이란 부모클래스의 메소드를 자식클래스 메소드에서 이어받아 수정해서 사용하는 것을 의미합니다.

class Bird {
  wings = 2;
  canFly = true;
  travel () { console.log('비행중...') }
}
class Eagle extends Bird {
  claws = 2;
}
class Penguin extends Bird {
  canFly = false;
  travel () { console.log('수영중...') }
}

const eaglee = new Eagle();
const pengu = new Penguin();

console.log(eaglee);
eaglee.travel(); //비행중..

console.log(pengu);
pengu.travel(); // 수영중..

3. super

super 키워드는 부모클래스의 constructor나 메소드를 호출하기 위해 사용합니다.

앞서서 자식 클래스의 인스턴스는 부모클래스의 인스턴스도 되기 때문에 부모클래스의 메소드를 사용할 수는 있지만 수정할 수는 없습니다. 그러나 super 키워드를 사용하면 부모클래스의 메소드를 호출하여 추가적인 기능을 넣을 수 있습니다.

class Chicken {
  no = 0;
  menu = { '후라이드': 10000, '양념치킨': 12000 };
  
  static brand = 'zero치킨';
  static contact () {
    console.log(`${this.brand}입니다. 무엇을 도와드릴까요?`);
  }
  
  constructor (name, no) {
    this.name = name;
    if (no) this.no = no;
  }
  introduce () {
    return `안녕하세요, ${this.no}호 ${this.name}점입니다!`;
  }
  order (name) {
    return `${this.menu[name]}원입니다.`
  }
}

class ConceptChicken extends Chicken {
  #word = '';
  
  static contact () {
    super.contact();
    console.log('컨셉 가맹문의는 홈페이지를 참조하세요.');
  }
  
  constructor (name, no, word) {
    super(name, no); //super키워드를 사용하면 부모클래스의 constructor를 호출했다고 인식함
    this.#word = word;
  }
  introWithConcept () {
    return super.introduce() + ' ' + this.#word; //부모클래스의 introduce메서드에 접근
  }
  order (name) {
    return super.order(name) + ' ' + this.#word; //부모클래스의 order메서드에 접근
  }
}

const pikaChain = new ConceptChicken('도봉', 50, '피카피카');

console.log(pikaChain); //ConceptChicken {no: 50, menu: {…}, name: '도봉', #word: '피카피카'}

console.log(pikaChain.introWithConcept()); //안녕하세요, 50호 도봉점입니다! 피카피카

console.log(pikaChain.order('후라이드')); //10000원입니다. 피카피카

ConceptChicken.contact(); //정적 메서드 호출
//출력
//zero치킨입니다. 무엇을 도와드릴까요?
//컨셉 가맹문의는 홈페이지를 참조하세요.