JavaScript, 프로토타입 메서드

여태까지 우리는 __proto__를 통해 숨김 프로퍼티 [[Prototype]] 객체를 변경해주었는데요

 

이것의 단점을 알아보고 스마트하게 상속하는 방법을 알아봅시다.

Object.create(proto, [descriptor])	[[Prototype]]이 proto를 참조하는 빈 객체를 만듭니다.
Object.getPrototypeOf(obj)	obj의 [[Prototype]]을 반환합니다.
Object.setPrototypeOf(obj, proto)	obj의 [[Prototype]]을 proto로 설정합니다.

 

let animal = {
  eats: true
};

// 프로토타입이 animal인 새로운 객체를 생성합니다.
let rabbit = Object.create(animal);

alert(rabbit.eats); // true

alert(Object.getPrototypeOf(rabbit) === animal); // true

Object.setPrototypeOf(rabbit, {}); // rabbit의 프로토타입을 {}으로 바꿉니다.

 

이렇게 상속하는 객체를 메서드를 통해 생성하고 get, set하게 된 배경은 2가지가 있습니다.

 

1. 일반적으로 객체를 생성할 때만 [[Prototype]]을 설정하고 이후에 수정을 하지 않기 때문

 

자바스크립트 엔진은 위와 같은 상황에 최적화되어 있습니다.

그렇기 때문에 obj.proto를 써서 프로토타입을 바꾸는 연산은 최적화를 망치기 때문에 성능에 영향을 미칩니다.

 

2. 중간에 __proto__로 인해 값이 바뀌어버린다면 치명적인 버그가 발생할 수 있기 때문

 

예를들어 HTML 태그의 프로토타입값이 중간에 바뀌어버린다면?

사용자는 원하는 UI를 제대로 그려내지 못할 것이고

이것은 치명적인 영향을 끼칠 수 있습니다 (실제로 이런일이 일어날 일은 극히 드물긴하다)

 

이러한 2가지의 연유로 인해 __proto__ 프로퍼티를 통해 직접 값을 바꾸는 것이 아닌

프로토타입 메서드를 통해 생성하는 것을 표준에도 명시되어 있습니다.

 

프로토타입 메서드와 __proto__가 없는 객체