프로토타입

코어자바스크립트를 필사했습니다.

 

프로토타입 상속

개발을 하다 보면 기존에 있는 기능을 가져와 확장해야 하는 경우가 생깁니다.

사람에 관한 프로터티와 메서드를 가진 user라는 객체가 있는데, user와 상당히 유사하지만 약간의 차이가 있는 admin과 guest 객체를 만들어야 한다고 가정해봅시다. 이때 "user의 메서드를 복사하거나 다시 구현하지 않고 user에 약간의 기능을 얹어 admin과 guest 객체를 만들 수 있지 않을까?"라는 생각이 들겁니다.

자바스크립트 언어의 고유 기능인 프로토타입 상속(prototypal inheritance)을 이용하면 위와 같은 생각을 실현할 수 있습니다.

 

[[Prototype]]

자바스크립트의 객체는 명세서에서 명명한 [[Prototype]]이라는 숨김 프로퍼티를 갖습니다. 이 숨김 프로퍼티 값은 null이거나 다른 객체에 대한 참조가 되는데, 다른 객체를 참조하는 경우 참조 대상을 '프로토타입'이라 부릅니다.

 

 

프로토타입의 동작 방식은 신비스러운 면이 있습니다. object에서 프로터피를 읽으려고 하는데 해당 프로퍼티가 없으면 자바스크립트는 자동으로 프로토타입에서 프로퍼티를 찾기 때문이죠. 프로그래밍에선 이런 동작 방식을 '프로토타입 상속'이라 부릅니다. 언어 차원에서 지원하는 편리한 기능이나 개발 테크닉 중 프로토타입 상속에 기반해 만들어진 것들이 많습니다.

[[Prototype]] 프로퍼티는 내부 프로퍼티이면서 숨김 프로퍼티이지만 다양한 방법을 사용해 개발자가 값을 설정할 수 있습니다.

 

아래 예시처럼 특별한 이름인 __proto__를 사용하면 값을 설정할 수 있습니다.

 

let animal = {
	eats: true
};

let rabbir = {
	jumps: true
};

rabbit.__proto__ = animal;

__proto__는 [[Prototype]]용 getter, setter입니다.

__proto__는 [[Prototype]]과 다릅니다. __proto__는 [[Prototype]]의 getter(획득자)이자 setter(설정자)입니다.

 

하위 호환성 때문에 여전히 __proto__를 사용할 순 있지만 비교적 근래에 작성된 스크립트에선 __proto__대신 함수 Object.getPrototypeOf나 Object.setPrototypeOf를 써서 프로토타입을 get하거나 set합니다. 근래엔 왜 __proto__를 쓰지 않는지와 두 함수에 대한 자세한 설명은 이어지는 챕터에서 다룹니다.

 

__proto__는 브라우저 환경에서만 지원하도록 자바스크립트 명세서에서 규정하였는데, 실상은 서버 사이드를 포함한 모든 호스트 환경에서 __proto__를 지원합니다.

 

객체 rabbit에서 프로퍼티를 얻고 싶은데 해당 프로퍼티가 없다면, 자바스크립트는 자동으로 animal이라는 객체에서 프로퍼티를 얻습니다.

예시 :

let animal = {
	eats: true
};

let rabbit = {
	jumps: true
}

rabbit.__proto__ = animal; // (*)

// 프로퍼티 eats과 jumps를 rabbit에서도 사용할 수 있게 되었습니다.
alert( rabbit.eats ); // true (**)
alert( rabbit.jumps ); // true