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

 

우선은 상속 개념을 구현하는 데 있어서 Javascript의 프로토타입 개념을 이용해 구현하는 방식을 살펴보도록 하겠습니다. 다시 한번 미리 말씀드리지만, 이 챕터의 내용들을 원활하게 이해하기 위해서는 Javascript의 프로토타입에 대한 기본 동작 원리를 이해하고 있어야 합니다. 아직 이해가 부족하거나 잘 생각이 나지 않는다면, 앞서서 살펴보았던 내용들을 다시 한번 복습하고 오시기 바랍니다. 

 

우선은 아래의 코드를 프로토타입 동작 기본 원리에 의거해 해석해 보도록 하겠습니다. 

 

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

 

위의 코드는 더글라스 크락포드의 Javascript에서의 객체 상속 방법 예제 코드입니다. (현재 ECMAScript 5에서 Object.create( )로 제공되고 있습니다) 간단한 코드 같지만, 프로토타입에 대한 동작원리를 잘 이해하지 못하고 있다면 이해하기 쉽지 않습니다. 하나하나 자세히 짚어보겠습니다. 

 

우선 이 함수의 목적은, 기본적으로 F( )라는 '생성자 함수'를 선언하고 이에 따라 F( )를 부모로 하는 새로운 객체를 생성하는 것입니다. 작동 구조를 살펴보자면, 함수 create_object는 어떤 객체를 인자로 받습니다. 그리고 이 함수 내부에서는 (생성자) 함수 F( )를 선언하게 됩니다. 그리고 함수 F의 prototype 객체에 인자 o를 대입합니다. 그리고 마지막으로 new 키워드를 통해 생성자 함수 F( )를 통해 자식 객체를 산출해 줍니다.

 

이제 프로토타입 작동 원리에 따라, 새롭게 생성(반환)된 객체는 [[Prototype]]으로 F.prototype 객체를 바라보게 됩니다. 부모로 F.prototype을 참조하기 때문에, 새로운 객체는 함수 F( )의 프로퍼티에 접근할 수 있으면서도 자신만의 프로퍼티를 가질 수도 있습니다. 프로토타입 체이닝을 통한 상속이 구현된 것이죠.

 

 

---

 

이제 위의 예제 코드를 활용해서, 실제로 프로퍼티를 가진 특정 객체의 자식 객체를 생성하는 예제를 작성해 보겠습니다. 

 

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();
}

var loco = create_object(rapper);
loco.setName("LOCO");
console.log(loco.name);

 

위의 코드를 순차적으로 설명해 보겠습니다. 우선, 생성자 역할을 하게 되는 객체 rapper를 선언하고, 여기에 몇 가지 프로퍼티를 선언해 두었습니다. 그리고 이 객체를 create_object( ) 함수의 인자로 전달했죠. 그럼 이 함수 안에서, F라는 생성자 함수가 선언되고 이 함수는 rapper 객체를 prototype으로 선언합니다. 그리고 F( )를 부모로 하는, 즉 F.prototype을 [[Prototype]]으로 참조하게 되는 객체를 리턴하게 됩니다. 그리고 이 객체를 loco에 대입하였습니다. 결과적으로 객체 변수 loco는 F.prototype을 [[Prototype]]으로 참조하는 객체가 되었습니다. 그래서 기존 rapper가 갖고 있는 프로퍼티인 name, setName, getName을 사용할 수 있게 되었습니다.