ES6 클래스와 상속 쉽게 이해하기

 

 

class

코드 예시

class User {
    constructor(name){
        this.name = name;
    }
    sayName() {
        console.log(this.name);
    }
}

var me = new User("nno3onn");
me.sayName(); // nno3onn

• User에는 name이라는 프로퍼티가 있고, sayName이라는 메서드가 있습니다.
• sayName은 함수인데 function 키워드가 없습니다.
• 클래스를 만드는 이유 역시 인스턴스를 만들기 위해서 입니다.
• 생성자에서 인스턴스를 만드는 방법과 동일합니다.

 

이 코드를 클래스 대신 이전 방식으로 만든다면?

function UserOld(name){
    this.name = name;
}

UserOld.prototype.sayName = function(){
    console.log(this.name);
}

var user = new UserOld("nno3onn");
user.sayName(); // nno3onn

클래스는 생성자를 이용한 타입 생성한 것과 그 결과가 정확하게 일치합니다.

자바스크립트만의 사용자 정의 타입 생성 방법을
다른 언어의 클래스 문법처럼 바꿔준 것이 바로 클래스입니다.

class로 만든 객체를 콘솔에서 확인해보면, 생성자로 타입을 생성한 것과 내부적으로 완전히 동일합니다.
이처럼 내부적인 동작은 동일하지만 더 보기 좋고 편리하게 개선된 문법을
슈가 신텍스(Syntactic Sugar)라고 부릅니다.

 

타입 상속처럼 클래스도 상속이 가능하겠죠?

코드 예시

class Sausage {
    constructor(el1, el2) {
        this.inside1 = el1;
        this.inside2 = el2;
    }
    
    taste(){
        return this.inside1 + "와 " + this.inside2 + " 맛이 난다!";
    }
}

var classicSausage = new Sausage("닭고기", "양파");
console.log(classicSausage.taste()); // "닭고기와 양파 맛이 난다!"

 

extends

여기에 상속을 받을 FireSausage도 만들어봅시다.
이때 extends 연산자를 이용해 상위 타입의 프로퍼티를 상속받는 것이 가능합니다.

class FireSausage extends Sausage {
    
}

var classicFireSausage = new FireSausage("소고기", "파", )
console.log(classicFireSausage.taste()); // "소고기와 파 맛이 난다!"

이전에 call과 Object.create() 함수를 사용하여 상속 받던 코드를 생각하며 비교해보면,
class를 사용하면 확실히 더 쉽게 프로퍼티를 상속받을 수 있습니다.

이제 불맛을 내기 위해 FireSausage 만의 프로퍼티와 메서드를 추가해봅시다.

class FireSausage extends Sausage {
    constructor(el1, el2, el3) {
        this.inside3 = el3;
    }
    
    flavor() {
        return this.inside3 + "의 풍미도 있다!";
    }
}

var classicFireSausage = new FireSausage("소고기", "파", "불맛");
console.log(classicFireSausage.flavor());

하지만 이렇게 작성하면 다음과 같은 에러가 발생합니다.

ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor at new FireSausage.

 

자식 클래스에 constructor 함수를 선언하면 부모 클래스의 constructor 함수를 덮어쓰게 됩니다.

이를 해결하기 위해서 super 메서드가 필요합니다.
super 메서드는 슈퍼타입의 생성자를 호출합니다.

class FireSausage extends Sausage {
    constructor(el1, el2, el3) {
        super(el1, el2);
        this.inside3 = el3;
    }
    
    flavor() {
        return this.inside3 + "의 풍미도 있다!";
    }
}

var classicFireSausage = new FireSausage("소고기", "파", "불맛");
console.log(classicFireSausage.flavor()); // "불맛의 풍미도 있다!"

 

 

✨ Recap

• 자바스크립트 타입 생성 방법을 다른 언어와 비슷하게 보기 쉽도록 개선한 것이 바로 클래스입니다.
• extends 연산자를 통해 상위 타입의 프로퍼티를 상속받습니다.
• super 메서드를 사용하여,
  자식클래스의 생성자 함수가
  부모 클래스의 생성자 함수를 덮어 씌우는 것을 방지할 수 있습니다.

개념	설명
class	함수 기반 객체 생성 방식의 가독성 개선
extends	부모 클래스 상속
super()	부모 생성자 호출 → 반드시 this 사용 전에 호출
Syntactic Sugar	기존 기능을 더 쉽게 쓰기 위한 문법적 개선