본문 바로가기

Programming/Javascript

4. Javascript 프로토타입([[Prototype]])

javascript logo

 

Javascript의 프로토타입

자바스크립트의 모든 객체는 프로토타입 객체를 갖습니다. 이는, 일반적인 객체지향 언어에서의 상속 개념과 거의 동일하고 부모 객체의 프로퍼티를 그대로 사용할 수 있다는 특성을 보여줍니다. 

 

이 프로토타입은 Javascript에서 객체가 생성되는 시점에 일정한 규칙에 따라 정해집니다. 객체가 생성되는 방식도 여러가지 경우의 수가 존재하기 때문에, 이에 따른 생성 규칙은 추후에 알아보겠습니다. 

 

우선은 객체 리터럴 방식으로 객체를 생성한 후, 프로토타입에 대해서 알아보겠습니다.

 

var newObj = {
    age : 20,
    name : 'John Doe'
};

console.log(newObj.toString());
console.dir(newObj);

 

위와 같이 newObj 객체를 선언하고, toString( ) 메소드를 실행하면 이상없이 정상적으로 실행됩니다. newObj 객체에 프로퍼티로 선언되지 않은 함수인데 실행이 가능한 이유는 바로 newObj 객체의 프로토타입에 toString( ) 메소드가 이미 정의되어 있기 때문입니다. 

 

object list capture
위 코드 실행 결과를 크롬에서 확인한다.

 

newObj의 정보를 보면, [[Prototype]]으로 Object가 할당되어 있습니다(정확히는 Object.prototype 객체. 자세한 내용은 추후 학습합니다). 그리고, 하위에 toString( )함수가 포함되어 있는 것도 확인이 가능합니다. 

 

정리하면 Javascript의 모든 객체는 Object.prototype을 프로토타입으로 바라봅니다. 그리고 Object.prototype 객체에 정의된 메소드는 모든 객체가 상속받게 되므로 모든 객체에서 사용이 가능한 상태가 됩니다. 물론 객체 생성 시점에 자동으로 결정되는 객체의 프로토타입은 동적으로 변경도 가능합니다. 이를 통해 객체 상속을 구현할 수도 있는데 이 역시 추후 살펴보겠습니다.

 

(참고로 chrome 버전에 따라 [[Prototype]]은 __proto__로 표기되는 경우도 있습니다. 동일한 개념이니 헷갈리지 않도록 주의하세요. 본 아티클에서는 계속 [[Prototype]]으로 통일하여 표시하겠습니다.)