[JavaScript] 자바스크립트 class 상속에 대해 알아보자 (+ extends/super)

자바스크립트 ES6 부터는 Class라는 문법이 도입되었는데,

이 문법은 자바스크립트에서도 객체지향 프로그래밍을 쉽게 구현할 수 있게 한다.

특히 C++ 이나 JAVA에 익숙한 개발자들은 Class 문법이 반갑게 느껴질 것 같다.

 

class 사용법

class Info {
  constructor(name, age){
    this.name = name;
    this.age = age;
  }
  sayInfo() {
   console.log(`나는 ${this.age}살 ${this.name}이야.`)
  }
 }

var person1 = new Info('Park', 20);
person1.sayInfo() // 나는 20살 Park이야.

 

위 코드는 ‘Info’ 라는 class를 정의한 것이다.

constructor에서 this를 통해서 name과 age라는 속성을 파라미터로 받아오는 인스턴스들을 만들었고

sayInfo라는 메서드를 포함하고 있다.

 

그동안 constructor, prototype 을 이용해서 구현했던 상속기능을

class를 사용하면 더 보기쉽게 표현해주고, 유지보수도 쉬워진다.

 

 

Extends / Super

 

자바스크립트의 extends 문법은 기존 class를 상속한 새로운 class를 만들 때 사용된다.

class Info {
  constructor(name, age){
    this.name = name;
    this.age = age;
  }
  sayInfo() {
   console.log(`${this.age}살 ${this.name}`)
  }
 }

/** 상속받을 새로운 class */ 
 
class Greet extends Info {
constructor(name, age, gender) {
	super(name, age); // super에도 파라미터를 입력해야 부모 constructor를 제대로 상속 가능
	this.gender = gender;
	}
	sayGreet() {
		super.sayInfo(); // 부모 class의 매서드인 sayInfo를 상속받아 옴
		console.log(`안녕하세요 저는 ${this.age} ${this.gender} ${this.name}입니다.`)
	}
}
		

var person1 = new Greet();
person1.sayInfo('Park', 20); // 20살 Park (extends를 통해 부모 class 매서드 사용)
person1.sayGreet('Park', 20, '남자');
// 20살 Park
// 안녕하세요 저는 20살 남자 Park입니다.
// (super.sayInfo()를 사용하여 부모 class 메서드 먼저 출력)

 

최대한 글을 짧게 쓰고 싶어서 스니펫 하나에 다 때려 넣어봤다.

extends는 기존 부모 class를 상속한 새로운 자식 class를 만들때 쓴다고 했는데,

위 코드에서는 Greet이 Info의 속성을 상속받았으므로

Greet으로도 Info의 name, age, sayInfo를 그대로 사용할 수 있는 것이다.

 

위 코드에서는 Greet 클래스에 ‘gender’ 인스턴스와 ‘sayGreet’ 메서드가 추가된 것을 볼 수 있다.

 

 

super는 부모 class의 기능을 받아오기 위해서 필요한 문법이다.

보통 ‘super()’ = ‘상속하는 기존 부모 class의 constructor()’ 라고 생각하면 된다.

부모 class의 constructor에 파라미터가 있었다면

super에도 파라미터를 입력해야 제대로 상속받을 수 있다.

 

종종 자식 class 메서드에 ‘super.sayInfo()’와 같이 super를 사용할수도 있는데

이때는 ‘super() = 부모 class의 메서드’ 로 쓰이는 것이다. (보통 첫번째 뜻으로 많이 사용함)