클래스(Class)

'상속'이라는 개념이 존재하지 않는 자바스크립트가 클래스를 어떻게 흉내내는지 파악해보자!

자바스크립트는 프로토타입 기반의 언어이기 때문에 '상속'의 개념이 존재하지 않습니다.

 

다만, 클래스에 대한 니즈에 따라 ES6에서 클래스 문법이 추가 되었지만, 일정 부분은 프로토타입을 여전히 활용하고 있습니다.

 

이 때문에 ES5 에서 클래스틑 흉내내기 위한 구현 방식을 학습할 필요가 있습니다.

 

그럼 클래스(Class)가 무엇일까요?

 

사전적으로 '집합, 집단'의 의미를 가지고 있습니다. 다음 예시를 통해 간단히 살펴보시죠.

 

클래스(class)란?

SuperClass는 부모 클래스입니다. 최상위 집단인거죠. SubClass는 자식 클래스입니다. 하위 집단입니다.

 

최상위 집단으로 '음식' 클래스가 존재합니다.

 

'음식'에는 '고기'도 있고, '과일' 등등.. 여러가지가 있지만 '고기'와 '과일'만 예시로 들겠습니다 : )

 

부모 클래스인 '음식'은 먹을 수 있습니다. 그래서 eat()이라는 함수가 존재합니다.

 

자식 클래스 역시 먹을 수 있으며, 각각 다른 방식으로 먹을 수 있습니다.

 

'고기' 는 구워먹을 수 있으므로 roast() 함수가 존재하고, '과일'은 갈아 마실 수 있으므로, juice() 함수가 존재합니다.

 

그리고 '고기' 및 '과일'은 모두 음식이기 때문에 먹을 수 있습니다. 그래서 eat() 함수도 사용할 수 있습니다.

 

더 나아가면, '고기'에는 '돼지', '소', '닭', '오리' 등등... '과일'에는 '사과', '배', '포도' 등등... 자식의 자식들이 또 존재할 수 있습니다.

 

 

이처럼, 상위 클래스에 포괄적인 혹은 추상적인 것을 정의하고

하위 클래스로 가면 갈수록 더욱 구체적인 요건들이 추가 또는 변경되도록 구현하는 방식이

'클래스'이자 '상속'의 개념입니다.

 

 

쉬운 말로하자면,  공통점을 가지는 집단을 분류하기 위한 개념으로 이해하시면 됩니다 : )

 

 

이제, 자바스크립트의 클래스에 대해서 이야기해보죠.

 

아래의 Array 생성자 함수를 '클래스 관점'에서 접근하여 해석한 예시입니다.

 

Array의 클래스 관점

Array를 new 연산자와 함께 호출하면 instance가 생성 됩니다.

 

Array의 내부 요소인 prototype객체가 인스턴스에 '상속'되는 것처럼 보입니다. (사실, 프로토타입 체이닝)

 

여기서 인스턴스에 상속되는지의 여부는 스태틱 멤버(static member)와 인스턴스 멤버(instance member)로 나뉩니다.

 

인스턴스 멤버는 프로토타입 메서드(=인스턴스 메서드)로 정의할 수 있습니다.

 

 

위처럼 프로토타입 체이닝이 마치 상속과 비슷해 보입니다.

 

이런 성격을 바탕으로 ES5에서는 프로토타입 체이닝을 활용해 클래스 상속을 어떻게 구현했는지,

 

그리고 최대한 객체지향 언어에서의 클래스와 비슷한 형태까지로 발전했는지 찾아보시고 간단히만 살펴보시면 좋을 것 같습니다.

 

ES6에서 클래스 문법이 도입되었기 때문에, '예전에 이렇게 사용했었구나...' 정도면 됩니다 ;)

 

 

클래스 상속을 흉내내기 위해 다음과 같은 세 가지 방법이 있습니다.

 

1) SubClass.prototype에 SuperClass의 인스턴스를 할당한 다음 프로퍼티를 전부 삭제하는 방법

 

2) 빈 함수(Bridge)를 활용하는 방법

 

3) Object.create를 이용하는 방법 

 

이 세 가지 방법 모두 constructor 프로퍼티가 원래의 생성자 함수를 바라보도록 조정해야 하는데, 이 부분만 간단히 보시면 됩니다.

 

 

"ES6 클래스 문법"을 정리하는 그날까지..!!

 

 : ) 

 

 

 

 

[출처] '코어 자바스크립트 - 핵심 개념과 동작 원리로 이해하는 자바스크립트 프로그래밍', 정재남 지음