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

 

 

먼저 앞서 만들어본 예제 코드를 도식화해보도록 하겠습니다.

 

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 객체에 대한 처리입니다. 여기서는 자식 클래스에 새로운 프로퍼티를 추가하여 자식 클래스를 확장하는 용도로 사용합니다. 아래의 마지막 리턴문 바로 위에 추가된 for문을 확인해 보겠습니다. 

 

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;

    for(var i in obj) {
        if(obj.hasOwnProperty(i)){
            child.prototype[i] = obj[i];
        }
    }

    return child;

}

 

여기서는 우선 hasOwnProperty 메서드를 먼저 살펴봐야겠죠? hasOwnProperty는 Object.prototype 프로퍼티에 정의된 메서드입니다. 즉, 최상위 프로토타입 메서드이므로 위의 for문에서도 사용이 가능한 것입니다. 여기서는 인자로 넘기는 이름에 해당하는 프로퍼티가 메서드를 사용하는 객체 내부에 존재하는지 여부를 확인해 true/false를 리턴합니다. 여기 예문에서는 obj.i라는 프로퍼티가 있는지를 확인하는 절차를 거치게 되는 것이고, 만일 obj에 특정 프로퍼티가 있으면 child.prototype에 해당 프로퍼티를 하나씩 대입하는 루프를 실행하게 되는 것입니다. 

 

 

---

 

여기까지 진행했다면, 이제 생성자를 호출하는 절차를 거쳐야 합니다. 이때, 자식 클래스뿐만 아니라 부모 클래스의 생성자까지 호출되어야 하는 과제를 안고 있습니다. 여기서 코드가 꽤나 복잡해지는데, apply를 사용하여 부모 생성자를 호출하던 예제를 조금 더 발전시켜서 대응해 보도록 하겠습니다.