13. Javascript 객체지향 프로그래밍(5) - subClass 구현하기 1

 

 

이제부터는 앞서 배운 프로토타입 체이닝, extend 함수, 인스턴스 생성 시점의 생성자 호출 기능 등을 활용하여 subClass 함수를 만드는 예제를 하나씩 살펴볼 예정입니다. 

 

subClass의 기능을 먼저 정의해 보도록 하겠습니다. subClass라는 함수는 우선 객체(변수, 메서드)를 파라미터 인자로 받습니다. 부모 함수에서 subClass를 실행하게 되면, 인자로 전달된 객체의 프로퍼티를 포함하는 자식 클래스를 생성하는 기능을 하게 됩니다.

 

예시를 보겠습니다. 우선, 부모 클래스를 하나 생성해 보겠습니다. 

 

var SuperClass = subClass(obj);

 

위에서 subClass(obj)라는 라인은 명시적으로 부모 클래스를 표시하지 않았습니다. 이는 결국, 최상위 함수 클래스 Function을 상속받고 여기에 obj 객체의 프로퍼티를 추가한 새로운 SuperClass라는 클래스 함수를 생성하는 개념이 됩니다. 그럼 이제 본격적으로 SuperClass를 상속받는 자식 클래스를 만드는 예시를 보도록 하겠습니다. 

 

var SubClass = SuperClass.subClass(obj);

 

위와 같이 SuperClass.subClass(obj)를 실행하게 되면, 새로운 obj 프로퍼티를 추가한 SubClass를 생성하게 됩니다. 이제, 위와 같은 의도로 동작하게 되는 함수인 subClass( )를 하나씩 단계별로 선언해 보도록 하겠습니다. 

 

 

---

 

우선 아래의 예제 코드를 살펴보겠습니다. 현재 이 코드는 완성된 것은 아니며, 기본적인 구조를 살펴보기 위해 우선 기본적인 내용만 먼저 작성되었습니다. 

function subClass(obj) {

    var parent = this;
    var F = function() {};

    var child = function() {};

    F.prototype = parent.prototype;
    
    child.prototype = new F();
    child.prototype.constructor = child;
    child.parent = parent.prototype;
    child.parent_constructor = parent;


    return child;

}

 

우선 설명했다시피, subClass(obj) 함수는 부모클래스.subClass(obj) 형태로 실행되는 것을 가정합니다. 이 함수를 실행하게 되면, 부모 클래스를 상속받은 child라는 객체를 리턴하는 것을 목적으로 선언되었습니다. 

 

일단 parent라는 변수에는 this가 할당됩니다. 여기서 this는 메서드인 프로퍼티이기 때문에 this는 자신을 실행시키는 '부모클래스'가 바인딩됩니다. 즉, parent는 부모 클래스가 됩니다. 

 

F의 경우, 우리가 앞서 배웠던 클래스 기반 상속 체계에서 살펴보았던 것과 마찬가지로 부모 클래스와 자식(child) 클래스의 사이를 이어주는 객체가 됩니다. 즉, child의 프로토타입이 되어주는 부분입니다. 여기서 F라는 함수 객체는 prototype을 parent.prototype으로 지정했습니다. 그럼 F를 생성자 함수로 하여 new로 생성한 객체는 곧 부모 클래스의 prototype 객체를 [[Prototype]]으로 참조하는 객체가 됩니다. new F( )를 통해 생성된 객체는 child의 prototype이 됩니다. 그리고 이후에 child의 constructor, parent를 각각 선언하여 상속 구조를 형성합니다. 

 

추가로, child.parent_constructor에 parent를 대입하였는데, 이는 생성자 호출에 대한 설명이 이루어질 때 이 부분을 설명하도록 하겠습니다.