IT/JavsScript

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

라임웨일 2021. 3. 31. 12:32
반응형

 

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

 

감사합니다.

반응형
광고차단(애드블록)프로그램이나 브라우저를 사용중이시면 프로그램을 비활성화이나 블로그 주소를 예외 처리 해주시면 광고가 노출됩니다. 귀찮고 번거롭겠지만 광고 클릭은 저에게는 큰 힘이 됩니다. 🙇🏻‍♂️🙇🏻‍♀️
제 블로그의 모든 글은 제가 직접 작성 하고 다른 글을 참고할 때는 이전 글보다 읽기 편하게 수정해서 작성하고 있습니다. 커피 한잔 사먹고 더 열심히 좋은글로 보답하겠습니다.
오늘도 제 블로그에 와 주셔서 감사합니다. :)
//