3. 자바스크립트 데이터 타입과 연산자 #4 프로토타입

본 글은 인사이드 자바스크립 도서의 내용을 복습하기 위하여 작성된 글입니다.

3.4 프로토타입

자바스크립트의 모든 객체는 자신의 부모 역할을 하는 객체와 연결되어 있다. 그리고 이것은 마치 객체지향의 상속 개념과 같이 부모 객체의 프로퍼티를 마치 자신의 것처럼 쓸 수 있는 것 같은 특징이 있다. 자바스크립트에서는 이러한 부모 객체를 프로토타입 객체(짧게는 프로토타입)라고 부른다.

 

객체 생성 및 출력

let foo = {
    name : "foo",
    age : 30
};

// 에러가 발생하지 않고 예제가 실행될수 있는 이유는
// foo 객체의 프로토타입에 toString() 메서드가 이미 정의
// 되어 있고 foo 객체가 상속처럼 toString() 메서드를 호출했기 때문이다.
console.log(foo.toString());    // [object Object]


// age, name 프로퍼티외의 __proto__ 프로퍼티가 있는 것을 확인할 수 있다.
// __proto__ 프로퍼티가 foo 객체의 부모인 프로토타입 객체이다.
console.dir(foo);

foo 객체를 보면 foo 객체의 프로토타입인 Object 객체의 메소드 중 toString 메서드가 존재하는 것을 볼 수 있다. 따라서 foo객체가 toString 메서드가 없어도 프로토타입이 존재하므로 toString 메서드를 사용할 수 있다.

 

ECMAScript 명세서에는 자바스크립트의 모든 객체는 자신의 프로토타입을 가리키는 [[Prototype]]라는 숨겨진 프로퍼티를 가진다고 설명하고 있다. 크롬 브라우저에서는 __proto__가 바로 이 숨겨진 [[Prototype]] 프로퍼티를 의미한다. 즉, foo 객체는 자신의 부모 객체를 __proto__라는 내부 프로퍼티로 연결하고 있는 것이다.

 

foo 객체와 Object.prototype 객체의 관계

또한, 객체를 생성할 때 결정된 프로토타입 객체는 임의의 다른 객체로 변경하는 것도 가능하다. 즉, 부모 객체를 동적으로 변경이 가능하다. 자바스크립트에서는 이러한 특징을 활용해서 객체 상속 등의 기능을 구현한다.

 

References

source code : https://github.com/yonghwankim-dev/javascript_study/tree/main
인사이드 자바스크립트, 송형주 저