[자바스크립트] 클래스의 상속과 instanceof

1. 클래스 상속

1.1 클래스 상속이란?

클래스 상속이란 다른 클래스의 속성과 메서드를 그대로 가져오는 것 즉 상속받는 것을 말한다.

// 클래스 Animal
class Animal {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  
  showName(){
    console.log(`My name is ${this.name}`);
  }
  
  showAge(){
    console.log(`I am ${this.age} years old`);
  }
}

// 클래스 Animal로 새로운 인스턴스인 pubao를 생성
let pubao = new Animal('pubao', 1, 'bamboo')

// 클래스 Animal을 상속받은 클래스 Cat
class Cat extends Animal {
  constructor(name, age, favouriteFood) {
    // super라는 메서드로 부모 클래스 Animal의 속성과 메서드 가져오기
    super(name, age); 
    this.favouriteFood = favouriteFood; 
  }
  
  meow() {
    console.log(`${this.name}: meow! meow! 😾`)
  }
}

// 클래스 Cat으로 새로운 인스턴스인 samsaek을 생성
let samsaek = new Cat('samsaek', 5, 'tuna');

console.log(samsaek);
// {
//   age: 5,
//   favouriteFood: "tuna",
//   name: "samsaek"
// }

samsaek.meow();
// "samsaek: meow! meow! 😾"

코드해석

• 클래스 Animal의 프로퍼티와 메서드를 가지는 새로운 클래스 Cat을 선언한다
• 키워드 extends는 오른쪽에 위치한 클래스를 왼쪽 클래스가 상속한다는 의미
• 클래스 Cat에 constructor안에 있는 super라는 함수는 부모 클래스의 속성과 메서드에 접근할 수 있게 해준다
• 자식 클래스에 부모 클래스와 같은 메서드가 있다면 자식 클래스 메서드가 부모 클래스 메서드를 덮어씌운다 (자식 클래스 메서드가 더 우선순위)

super 키워드

• constructor 안에서 메소드로 사용할 수 있다
  • 부모의 constructor를 호출하면서 인수를 전달한다
  • this를 쓸 수 있게 해준다
• 키워드로 사용할 수 있다
  • 부모 클래스에 대한 필드나 함수를 참조할 수 있다

1.2 상속여부를 체크하는 instanceof

instanceof: 왼쪽에 있는 object가 오른쪽에 있는 class의 instance인지 아닌지 체크하는 오퍼레이터

console.log(samsaek instanceof Cat); // true
console.log(samsaek instanceof Animal); // true
console.log(pubao instanceof Cat); // false
console.log(pubao instanceof Animal); // true

코드해석

• line1: samsaek이라는 인스턴스는 클래스 Cat으로 생성되었기 때문에 samsaek은 Cat의 인스턴스다
• line2: samsaek이라는 인스턴스는 클래스 Cat으로 생성되었고 클래스 Cat은 클래스 Animal을 상속받기 때문에 samsaek은 Animal의 인스턴스다
• line3: pubao라는 인스턴스는 클래스 Cat으로 생성되지 않았기 때문에 pubao는 Cat의 인스턴스가 아니다
• line4: pubao라는 인스턴스는 클래스 Animal로 생성되었기 때문에 pubao는 Animal의 인스턴스다