[DIL] 07 클래스

01 클래스와 인스턴스의 개념 이해

그림처럼 음식과 과일은 모두 집단, 즉 클래스이다. 음식은 과일보다 상위의 개념이고, 과일은 음식보다 하위의 개념이다. super-, sub-를 접목해서 상위클래스, 하위클래스라고 표현한다.

그렇다면 과일 분류 하위에 또 다른 분류가 있을 경우 클래스 간의 관계는 어떻게 될까?

음식은 과일의 superclass이다. 과일은 음식의 subclass이면서 귤류의 superclass이다. 귤류는 과일의 subclass이다. 한편 음식은 귤류의 super-superclass이다. 귤류는 음식의 sub-subclass이다. 하위 개념은 상위 개념을 포함하면서 더 구체적인 개념이 추가된다. 예를 들어, 최상위 분류인 음식 클래스는 '먹을 수 있다' 정도라면, 하위의 과일 클래스는 '먹을 수 있다 + 나무에서 열린다'가 되고, 그 하위의 귤류 클래스는 '먹을 수 있다 + 나무에서 열린다 + 말랑한 껍질 속에 달고 신맛이 나는 과육이 들어있다'가 된다. 이처럼 클래스는 하위로 갈수록 상위 클래스의 속성을 상속하면서 더 구체적인 요건이 추가 또는 변경된다. 물론 하위 클래스가 아무리 구체화되더라도 이들은 결국 추상적인 개념일 뿐이다.

 

한편 감귤, 자몽, 천혜향 등은 음식에 속해 먹을 수 있고, 과일에 속해 나무에서 열리며, 귤류에 속해 말랑한 껍질 속에 달고 신맛이 나는 과육이 들어있는 구체적인 개체들이다. 앞의 클래서들의 속성을 지니는, 실제로 먹을 수 있고 만질 수 있는 실존하는 개체이다. 이처럼 어떤 클래스의 속성을 지니는 실존하는 개체를 일컬어 인스턴스라고 한다. 어떤 클래스에 속한 개체는 그 클래스의 조건을 모두 만족하므로 그 클래스의 구체적인 예시, 즉 인스턴스가 될 것이다.

 

프로그래밍 언어상으로는 사용자가 직접 여러 가지 클래스를 정의 해야 하며, 클래스를 바탕으로 인스턴스를 만들 때 비로소 어떤 개체가 글래스의 속성을 지니게 된다. 또한 한 인스턴스는 하나의 클래스만을 바탕으로 만들어진다. 어떤 인스턴스가 다양한 클래스에 속할 수는 있지만 이 클래스들은 모두 인스턴스 입장에서는 '직계존속'이다. 다중상속을 지원하는 언어이든 그렇지 않은 언어이든 결국 인스턴스를 생성할 때 호출할 수 있는 클래스는 오직 하나뿐일 수밖에 없기 때문이다.

 

프로그래밍 언어에서의 클래스는 현실세계에서의 클래스와 마찬가지로 '공통요소를 지니는 집단을 분류하기 위한 개념'이라는 측면에서는 일치하지만 인스턴스들로부터 공통점을 발견해서 클래스를 정의하는 현실과 달리, 클래스가 먼저 정의돼야만 그로부터 공통적인 요소를 지니는 개체들을 생성할 수 있다. 나아가 현실세계에서의 클래스는 추상적인 개념이지만, 프로그래밍 언어에서의 클래스는 사용하기에 따라 추상적인 대상일 수도 있고 구체적인 개체가 될 수도 있다.

 

02 자바스크립트의 클래스

앞서 말한 바와 같이 자바스크립트는 프로토타입 기반 언어이므로 클래스의 개념이 존재하지 않지만 비슷하게 해석할 수도 있다.

 

생성자 함수 Array를 new 연산자와 함께 호출하면 인스턴스가 생성된다. 이때 Array를 일종의 클래스라고 하면, Array의 prototype 객체 내부 요소들이 인스턴스에 '상속'된다고 볼 수 있다. 엄밀히는 상속이 아닌 프로토타입 체이닝에 의한 참조지만 결과적으로는 동일하게 동작하므로 이렇게 이해해도 무방하다. 한편 Array 내부 프로퍼티들 중 prototype 프로퍼티를 제외한 나머지는 인스턴스에 상속되지 않는다.

 

인스턴스에 상속되는지(인스턴스가 참조하는지) 여부에 따라 스태틱멤버 static member와 인스턴스 멤버 instance member로 나뉜다. 이 분류는 다른 언어의 클래스 구성요소에 대한 정의를 차용한 것으로서 클래스 입장에서 사용 대상에 따라 구분한 것이다. 그런데 여느 클래스 기반 언어와 달리 자바스크립트에서는 인스턴스에서도 직접 메서드를 정의할 수 있기 때문에 '인스턴스 메서드'라는 명칭은 프로토타입에 정의한 메서드를 지칭하는 것인지 인스턴스에 정의한 메서드를 지칭하는 것인지에 대해 도리어 혼란을 야기한다. 따라서 이 명칭 대신에 자바스크립의 특징을 살려 프로토타입 메서드라고 부르는 편이 더 좋다. 

예제를 통해 클래스 관점에서 바라본 프로토타입 시스템을 더 살펴보면,

var Rectangle = function (width, height) {
	this.width = width;
	this.height = height;
};
Rectangle.prototype.getArea = function () {
	return this.width * this.height;
}
Rectangle.isRectangle = function (instance) {
	return instance instanceof Rectangle && 
		instance.width > j0 && instance.height > 0;
};

var rect1 = new Rectangle(3,4)
console.log(rect1.getAraa()); // 12 (O)
console.log(rect1.isRectangle(rect1)); // Error (X)
console.log(Rectangle.isRectangle(rect1)); // true

 

12번째 줄에서 Rectangle 함수를 new 연산자와 함께 호출해서 생성된 인스턴스를 rect1에 할당했다. 이 인스턴스에는 width, height 프로퍼티에 각각 3,4의 값이 할당돼 있을 것이다.

 

프로토타입 객체에 할당한 메서드는 인스턴스가 마치 자신의 것처럼 호출할 수 있다고 했으니 13번째 줄에서 호출한 getArea는 실제로는 rect1.__proto__.getArea에 접근하는데, 이때 __proto__를 생략했으므로 this가 rect1인 채로 실행될 테니까, 결과로는 rect1.width*rect1.height의 계산 값이 반환될 것이다. 이처럼 인스턴스에서 직접 호출할 수 있는 메서드가 바로 프로토타입 메서드이다.

 

한편 14번째 줄은 rect1 인스턴스에서 isRectangle이라는 메서드에 접근하고자 한다. 우선 rect1에 해당 메서드가 있는지 검색했는데 없고, rect1.__proto__에도 없으며, rect1.__proto__.__proto__(=Object.prototype)에도 없다. 결국 undefined를 실행하라는 명령이므로, 함수가 아니어서 실행할 수 없다는 의미의 "Uncaught TypeError : not a function"에러가 발생한다. 이렇게 인스턴스에서 직접 접근할 수 없는 메서드를 스태틱 메서드라고 한다. 스태틱 메서드는 15번째 줄처럼 생성자 함수를 this로 해야만 호출할 수 있다.

 

일반적인 사용 방식, 즉 구체적인 인스턴스가 사용할 메서드를 정의한 '틀'의 역할을 담당하는 목적을 가질 때의 클래스는 추상적인 개념이지만, 클래스 자체를 this로 해서 직접 접근해야만 하는 스태틱 메서드를 호출할 때의 클래스는 그 자체가 하나의 개체로서 취급된다.

 

03 클래스 상속

7-3-1 기본 구현

ES5까지는 자바스크립트에 클래스가 없었다. 자바스크립트에서 클래스 상속을 구현했다는 것은 결국 프로토타입 체이닝을 잘 연결한 것으로 이해하면 된다.

 

다만 기본적으로는 그렇다는 것이고 세부적으로 완벽하게 superclass와 subclass의 구현이 이뤄진 것은 아니다. length 프로퍼티가 configrable(삭제가능)하다는 점과, Grade.prototype에 빈 배열을 참조시켰다는 점이 그렇다.

문제점 중 우선 length에 대하여 예제를 통해 살펴보면,

11번째 줄에서는 원하는대로 결과가 잘 나온다. 그런데 12번째 줄에서는 length 프로퍼티를 삭제하고 다시 push를 했더니, push한 값이 0번째 인덱스에 들어갔고, length가 1이 됐다. 내장객체인 배열 인스턴스의 length 프로퍼티는 configurable 속성이 false라서 삭제가 불가능하지만, Grade 클래스의 인스턴스는 배열 메서드를 상속하지만 기본적으로는 일반 객체의 성질을 그대로 지니므로 삭제가 가능해서 문제가 된다.

 

한편 push를 했을 때 0번째 인덱스에  70이 들어가고 length가 다시 1이 될 수 있었던 까닭은 무엇일까? 바로 g.__proto__, 즉 Grade.prototype이 빈 배열을 가리키고 있기 때문이다. push  명령에 의해 자바스크립트 엔진이 g.length를 읽고자 하는데 g.length가 없으니까 프로토타입 체이닝을 타고 g.__proto__.length를 읽어온 것이다. 빈 배열의 length가 0이므로 여기에 값을 할당하고 length는 1만큼 증가시키라는 명령이 문제 없이 동작할 수 있었던 것이다.

 

그럼 만약 Grade.prototype에 요소를 포함하는 배열을 매칭시켰다면 어땠을까?

이번에는 prototype에 length가 4인 배열을 할당해봤다. 10, 11번째 줄은 문제 없이 동작한다. 그런데 12번째 줄에서 length를 삭제하고 나니 예제 7-3과는 다르게 동작하는 것을 확인할 수 있다. g.length가 없으니까 g.__proto__.length를 찾고, 값이 4이므로 인덱스 4에 70을 넣고, 다시 g.length에 5를 부여하는 순서로 동작한 것이다.

 

이처럼 클래스에 있는 값이 인스턴스의 동자거어ㅔ 영향을 줘서는 안된다. 사실 이런 영향을 줄 수 있다는 사실 자체가 이미 클래스의 추상성을 해치는 것이다. 인스턴스와의 관계에서는 구체적인 데이터를 지니지 않고 오직 인스턴스가 사용할 메서드만을 지니는 추상적인 '틀'로서만 작용하게끔 작성하지 않는다면 언젠가 어딘가에서 예제 7-3과 예제 7-4처럼 예기치 않은 오류가 발생할 가능성을 안고 가야 하는 것이다.

 

이번엔 사용자가 정의한 두 클래스 사이에서의 상속관계를 구현해보자.

직사각형 클래스와 정사각형 클래스를 만들어본다고 하면 직사각형은 두 쌍의 마주 보는 변이 평행이고 그 길이가 같다. 정사각형은 직사각형이면서 네 변의 길이가 모두 같다. 각 클래스에는 넓이를 구하는 getArea라는 메서드를 추가한다.

Rectangle과 Square 클래스에 공통 요소가 보인다. width라는 프로퍼티가 공통이고, getArea는 내용이 다르지만 비슷하다. 만약 Square에서 width 프로퍼티만 쓰지 않고 height 프로퍼티에 width 값을 부여하는 형태가 된다면 getArea도 동일하게 고칠 수 있다.

원래부터 정사각형은 직사각형에 '네 변의 길이가 모두 같다'라는 구체적인 조건이 하나 추가된 개념이다. 이제는 소스상으로도 Square를 Rectangle의 하위 클래스로 삼을 수 있을 거서이다. getArea라는 메서드는 동일한 동작을 하므로 상위 클래스에서만 정의하고, 하위 클래스에서는 해당 메서드를 상속하면서 height 대신 width를 넣어주면 된다.

11번째 줄에서는 Square의 생성자 함수 내부에서의 Rectangle의 생성자 함수를 함수로써 호출했다. 이때 인자 height 자리에 width를 전달했다. 13번째 줄에서는 메서드를 상속하기 위해 Square의 프로토타입 객체에 Rectangle의 인스턴스를 부여했다. 이것만으로도 일단 동작한다.

 

그러나 위 코드만으로 완벽한 클래스 체계가 구축됐다고 볼 수 없다. 우선 예제 7-4와 동일한 벙법으로 구현한 것이니 클래스에 있는 값이 인스턴스에 영향을 줄 수 있는 구조라는 동일한 문제를 가지고 있을 것이다.

console.dir(sq);

그림 7-7은 sq의 구조를 출력한 것이다. 첫줄에서 Square의 인스턴스임을 표시하고 있고, width와 height에 모두 5가 잘 들어있다. __proto__는 Rectangle의 인스턴스임을 표시하고 있는데, 바로 이어서 width, height에 모두 undefined가 할당돼 있음을 확인할 수 있다. Square.prototype에 값이 존재하는 것이 문제다. 만약 이후에 임의로 Square.prototype.width(또는 height)에 값을 부여하고 sq.width(또는 height)의 값을 지워버린다면 프로토타입 체이닝에 의해 엉뚱한 결과가 나오게 될 것이다. 

 

나아가 constructor가 여전히 Rectangle을 바라보고 있다는 문제도 있다. sq.constructor로 접근하면 프로토타입 체이닝을  따라 sq.__proto__.__proto__, 즉 Rectangle.prototype에서 찾게 되며, 이는 Rectangle을 가리키고 있기 때문이다.

이처럼 하위 클래스로 삼을 생성자 함수의 prototype에 상위 클래스의 인스턴스를 부여하는 것만으로도 기본적인 메서드 상속은 가능하지만 다양한 문제가 발생할 여지가 있어 구조적으로 안전성이 떨어진다.

 

7-3-2 클래스가 구체적인 데이터를 지니지 않게 하는 방법

클래스(prototype)가 구체적인 데이터를 지니지 않게 하는 방법은 여러 가지가 있는데, 그 중 가장 쉬운 방법은 일단 만들고 나서 프로퍼티들을 일일이 지우고 더는 새로운 프로퍼티를 추가할 수 없게 하는 것이다. 이 정도로도 깔끔하고 간단하게 목적하는 바를 충분히 이뤄낼 수 있다.

프로퍼티가 많다면 반복 작업이 될 테니까 반복을 없애고 좀 더 범용적으로 이런 동작을 수행하는 함수를 만들면 좋을 것이다.

예제 7-8의 extendCalss1 함수는 SuperClass와 SubClass, SubClass에 추가할 메서드들이 정의된 객체를 받아서 SubClass의 prototype 내용을 정리하고 freeze하는 내용으로 구성돼있다. SubClass의 프로토타입을 정리하는 내용이 다소 복잡해졌지만 범용성 측면에서는 꽤 괜찮은 방법이다.

 

두번째로 다른 방안을 말하자면, 더클라스 크락포드가 제시해서 대중적으로 널리 알려진 방법으로, SubClass의 prototype에 직접 SuperClass의 인스턴스를 할당하는 대신 아무런 프로퍼티를 생성하지 않는 빈 생성자 함수(Bridge)를 하나 더 만들어서 그  prototype이 SuperClass의 prototype을 바라보게끔 한 다음, SubClass를 prototype에는 Bridge의 인스턴스를 할당하게 하는 것이다. 빈 함수에 다리 역할을 부여하는 것이다. 

Bridge라는 빈 함수를 만들고, Bridge.prototype이 Rectangle.prototype을 참조하게 한 다음, Square.prototype에 new Bridge()로 할당하면, 우측 그림처럼 Rectangle 자리에 Bridge가 대체하게 될 것이다. 이로써 인스턴스를 제외한 프로토타입 체인 경로상에는 더는 구체적인 데이터가 남아있지 않게 된다. 마찬가지로 범용성을 고려하면 다음처럼 작성할 수 있을 것이다.

예제 7-9에서는 즉시실행함수 내부에서 Bridge를 선언해서 이를 클로저로 활용함으로써 메모리에 불필요한 함수 선언을 줄였다. subMethods에는 SubClass의 prototype에 담길 메서드들을 객체로 전달하게끔 했다.

 

끝으로 ES5에서 도입된 Object.create를 이용한 방법이다. SubClass의 prototype의 __proto__가 SuperClass의 prototype을 바라보되, SuperClass의 인스턴스가 되지는 않으므로 앞서 소개한 두 방법보다 간단하면서 안전하다.

클래스 상속 및 추상화를 흉내 내기 위한 라이브러리가 많이 있지만 기본적인 접근 방법은 위 세 가지 아이디어를 크게 벗어나지 않는다. 결국 SubClass.prototype의 __proto__가 SuperClass.prototype을 참조하고, SubClass.prototype에는 불필요한 인스턴스 프로퍼티가 남아있지 않으면 된다.

 

7-3-3 constructor 복구하기

위 세 가지 방법 모두 기본적인 상속에는 성공했지만 SubClass 인스턴스의 constructor는 여전히 SuperClass를 가리키는 상태이다. 엄밀히는 SubClass 인스턴스에는 constructor가 없고, SubClass.prototype에도 없는 상태이다. 프로토타입 체인상에 가장 먼저 등장하는 SuperClass.prototype의 constructor에서 가리키는 대상, 즉 SuperClass가 출력될 뿐이다. 따라서 위 코드들의 SubClass.prototype.constructor가 원래의 SubClass를 바라보도록 하면 된다. 완성 코드는 다음과 같다.

일반적인 객체지향 언어에서의 클래스에 비하면 보잘것 없긴 하지만 가장 기본적인 기능인 상속 및 추상화만큼은 성공적으로 달성할 수 있었다.

 

7-3-4 상위 클래스에의 접근 수단 제공

4번째 줄부터 14번째 줄까지가 새로 추가된 내용으로, super 메서드의 동작을 정의하고 있다. 우선 6번째 줄에서는 인자가 비어있을 경우에는 SuperClass 생성자 함수에 접근하는 것으로 간주했다. this가 달라지는 것을 막기 위해 클로저를 활용했다. 10번째 줄에서는 SuperClass의 prototype 내부의 propName에 해당하는 값이 함수가 아닌 경우에는 해당 값을 그대로 반환하게 됐고, 11번째 줄을 함수인 경우이므로 마찬가지로 클로저를 활용해 메서드에 접근하는 것으로 여기도록 했다.

 

super 메서드의 사용법은 다음과 같다. SuperClass의 생성자 함수에 접근하고자 할 때는 this.super(), SuperClass의 프로토타입 메서드에 접근하고자 할 때는 this.super(propName)와 같이 사용하면 된다. 이렇게 부분 적용 함수로 접근하는 방식이 아니라 super 키워드 자체가 SuperClass를 가리킬 수 있었다면 더 좋았겠지만 그렇게 구현할 수 있는 방법은 없다.

 

33번째 줄을 보면 기존에는 SuperClass.call(this, width, width)처럼 직접 this를 바인딩하는 문법을 썼다면 이제는 좀 더 깔끔하게 this.super()(width, width)라고 함으로써 가독성이 훨씬 좋아졌다. 36번째 줄에서는 SuperClass의 getArea메서드를 확장해서 'size is : value'와 같이 출력될 수 있게 변경했다.

 

41번째 줄에서 sq.getArea()를 호출하자 'size is : 100'이 출력되는 것으로 봐서 SubClass의 메서드가 실행됐음을 알 수 있고, 42번째 줄에서 sq.super('getArea')()를 호출하자 '100'이 반환되는 것으로 봐서 SuperClass의 메서드가 실행됐음을 확인할 수 있다.

 

04 ES6의 클래스 및 클래스 상속

05 정리

자바스크립트는 프로토타입 기반 언어라서 클래스 및 상속 개념은 존재하지 않지만 프로토타입을 기반으로 클래스와 비슷하게 동작하게끔 하는 다양한 기법들이 도입돼 왔다.

 

클래스는 어떤 사물의 공통 속성을 모아 정의한 추상적인 개념이고, 인스턴스는 클래스의 속성을 지니는 구체적인 사례이다. 상위 클래스(superclass)의 조건을 충족하면서 더욱 구체적인 조건이 추가된 것을 하위 클래스(subclass)라고 한다.

 

클래스의 prototype 내부에 정의된 메서드를 프로토타입 메서드라고 하며, 이들은 인스턴스가 마치 자신의 것처럼 호출할 수 있다. 한편 클래스(생성자 함수)에 직접 정의한 메서드를 스태틱 메서드라고 하며, 이들은 인스턴스가 직접 호출할 수 없고 클래스(생성자 함수)에 의해서만 호출할 수 있다.

 

클래스 상속을 흉내내기 위해 세가지 방법으로 SubClass.prototype에 SuperClass의 인스턴스를 할당한 다음 프로퍼티를 모두 삭제하는 방법, 빈 함수(Bridge)를 활용하는 방법, Object.create를 이용하는 방법이다. 모두 constructor 프로퍼티가 원래의 생성자 함수를 바라보도록 조정해야 한다.

추가로 상위 클래스에 접근할 수 있는 수단인 super를 구현했다.