화투의 개발 블로그

자바스크립트는 기본적으로 Java와 C++과 같은 클래스 객체의 상속이란 개념을 사용하지 않고 prototype 모델의 상속을 지원한다. prototype은 객체를 생성하기 위해 사용되는 객체의 원형을 뜻하며 생성자 객체를 통해 객체가 생성 될 때, 생성자의 prototype 프로퍼티에 링크되어있는 프로토타입 객체들이 생성된 객체에 연결된다. prototype 프로퍼티는 함수 함수들이 가지고있는 속성으로서 생성자를 처음 정의할때엔 기본적으로 empty Object를 가르킨다.

(cf: prototype 프로퍼티는 1급 객체인 함수 객체만 가지고 있는 프로퍼티이므로 일반 객체에서 접근하려고하면 syntax error가 발생한다.)

prototype을 정리하기에 앞서 비교를 위해 생성자 함수를 이용한 객체 생성을 먼저 보면,

var Parent = function(){
    this.f = function(){
        console.log("HI");
    }
}

Parent.f = function(){
    console.log("HELLO");
}
var A = new Parent;
var B = new Parent;

A.f();
B.f();

위 코드의 결과는 다음과 같다.
HI
HI

위에서 this.f는 프로토타입이 아닌 생성자 Parent의 프로퍼티이다. 즉 이 생성자를 통해 새로운 객체를 생성하면 this가 A,B객체에 바인딩이 되어 A,B객체의 프로퍼티가 되기 때문에, 아무리 생성자인 Parent의 f를 수정하더라도 생성된 객체인 A와 B의 f 프로퍼티는 변하지 않는다.(객체 생성 부분은 객체 생성 포스트를 참조하자)

다음은 프로토타입을 이용한 객체 생성이다.

var Parent = function(){
    Parent.prototype.f = function(){
        console.log("HELLO");
    };
}
var A = new Parent;
var B = new Parent;
A.f();
B.f();


Parent.prototype.f = function(){
        console.log("HI");
    };
A.f();
B.f();

위 코드의 결과값은 다음과 같다.

정리하자면 함수 객체는 자식에게 상속할 프로퍼티를 포함하는 prototype를 가지고 있다. prototype 프로퍼티는 객체의 원형을 담는 자신의 프로토타입 객체에 링크되고, 또한 객체를 생성할 때 객체의 [[Prototype]] 프로퍼티(__proto__)에 링크된다. (객체 생성 포스트를 참조하자, new 키워드를 이용해 생성될 때 연결된다.). 객체는 이 __proto__에 연결된 프로토타입 객체를 따라가 프로토타입에 정의된 프로퍼티를 객체 자신의 것처럼 사용할 수 있다. 부모 프로토타입에도 없을 경우, 부모가 상속받은 프로토타입을 찾아가며(__proto__프로퍼티를 통해 프로토타입 체인을 따라 올라가며) 해당 프로퍼티를 찾는다.

이렇게 따로 생성한 객체 말고도, Array나 Function 등의 객체들도 프로토타입의 상속을 기반으로 한다. Array나 Function이 내부적으로 가지고있는 메소드들은 바로 이 상속을 기반으로 가능한 것이다.

객체의 생성은 함수 객체(생성자 객체)에 의해 일어나지만, 상속에 관련된 모든 역할은 생성자 객체에 연결되어있는 프로토타입 객체에 의해 일어난다는 것을 기억하자.