13. Javascript 객체지향 프로그래밍(2) - 프로토타입 상속 구현 3

 

이번에는 앞서 진행했던 extend( ) 함수의 작성 예제를 사용해, 우리가 예제로 만들어 보았던 Rapper 객체를 통한 자식 객체를 생성한 후 해당 자식 객체를 확장하는 사례를 만들어 보겠습니다. 

 

var Rapper = {
    name : "QM",
    getName : function() {
        return this.name;
    },
    setName : function(value) {
        this.name = value;
    }
};

function create_object(o) {
    function F() {}
    F.prototype = o;
    return new F();
}

function extend(obj, prop) {
    if( !prop ) {
        prop = obj;
        obj = this;

        console.log(this);
        return;
    }

    for(var i in prop) {
        obj[i] = prop[i];
    }

    return obj;
};

var newHype = create_object(Rapper);
var newProp = {
    setAge : function(age) {
        this.age = age;
    },
    getAge : function() {
        return this.age;
    }
};

extend(newHype, newProp);

newHype.setAge(21);
console.log(newHype.getAge());
console.log(newHype);

// 출력
// 21
// { setAge: [Function: setAge], getAge: [Function: getAge], age: 21 }

 

extend( )를 이용해, newHype 객체의 프로퍼티들이 변경된 것을 확인할 수 있습니다. extend( ) 함수는 향후 상속 체계 구현에서도 중요하게 사용되는 함수이니, 잘 확인해두시기 바랍니다. 

 

덧붙여, 해당 코드는 완벽하지는 않습니다. 일단 newHype 객체의 프로퍼티가 완전히 인덱스에 따라 매칭 되어 내용이 추가된 것이 아닌 변경이 일어났다는 것은 참고해 두시기 바랍니다. 더불어 이 코드대로 그대로 작성할 경우에는 if문 영역에서 사용된 [obj = this;] 라는 라인이 의도와 다르게 작동합니다. 혹시 기억하실지 모르겠지만, 이 경우에는 this는 전역 객체 global을 바인딩하게 됩니다. 

 

만일 왜 이런 this 바인딩이 일어나는지 이해가 가지 않는 분들이 계시다면, Javascript의 this 바인딩 규칙이 아직 숙지 되지 않으신 것입니다. this 바인딩 아티클을 참고하셔서 다시 공부해 보시기 바랍니다.