ES6 클래스(class) / 프로토 타입(Prototype)

 

ES6 클래스 문법은 ES6 이전에는 없던 문법입니다.  ES6의 Class는 기존 prototype 기반의 상속을 보다 명료하게 사용할 수 있도록 도와줍니다.

그럼 Class는 도대체 무엇일까요? JavaScript에서 Class는 함수입니다. JavaScript는 class 키워드를 만나면 Class 오브젝트를 생성합니다. 함수 선언과 달리 클래스 선언은 호이스팅이 일어나지 않기 때문에, 클래스를 사용하기 위해서는 먼저 선언을 해야 합니다. 그렇지 않으면 ReferenceError 가 발생합니다.

 

클래스에서 사용되는 constructor는 클래스 인스턴스를 생성하고 생성한 인스턴스를 초기화하는 역할을 합니다. constructor가 없으면 인스턴스를 생성할 수 없습니다.

 

이전 클래스 개념이 없었을 때 Class형태를 구현하려면 prototype을 이용해 구현해야 했습니다. 

 

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

Dog.prototype.say = function(){
    console.log('귀여운 '+ this.name )
}

var dog = new Dog('푸들');
dog.say() // 결과 : 귀여운 푸들

 

이제 동일한 코드를 클래스로 구현해볼께요.

class Dog {
    constructor(name){
        this.name = name;
    }

    say(){
        console.log('귀여운 '+ this.name )
    }
}

const dog = new Dog('푸들');
dog.say() // 결과 : 귀여운 푸들

 

조금은 더 간단해졌나요?

 

프로토타입과 Class개념은 간단히 코드로 설명하긴 어려운 부분이 있는 거 같습니다. 프로토타입이 무엇인지 조금 더 알고 싶은 신 분들은 위에 주소에서 문서를 한번 읽어보는 것도 좋을 것 같습니다.

 

감사합니다.