🤔 자바스크립트 프로토타입
프로토타입 = 원본의 유전자
자바스크립트의 프로토타입(Prototype)은 객체가 다른 객체로부터 상속받을 수 있는 속성과 메서드를 정의하는 것이다.
🔎 객체와 프로토타입의 관계
자바스크립트의 모든 객체는 프로토타입을 가진다. 객체 본인의 속성, 메서드에 접근할 수 있으면서 프로토타입의 속성, 메서드에도 접근할 수 있다. 객체는 자신의 프로토타입에 정의된 속성과 메서드를 상속받는다(유전).
모든 객체는 [[Prototype]]이라는 숨겨진 속성을 가지며, 이 속성은 객체의 프로토타입을 가리킨다. 자신의 부모 역할을 하는 객체와 연결되어 있고, 그 부모 객체가 프로토타입이다. 그래서 자신과 그 아래 자식 객체들도 부모 객체의 속성, 메서드에 접근이 가능하다. 조상 유전자를 다 갖고 있기 때문이라고 생각하면 이해가 쉽다.
🔎 프로토타입에 접근하는 법
Object.getPrototypeOf()
const proto = Object.getPrototypeOf(obj);__proto__
ES6부터 공식적으로 비추천, 대신Object.getPrototypeOf()사용이 권장
const proto = obj.__proto__;Object.prototype.isPrototypeOf()
const isProto = Object.prototype.isPrototypeOf(obj);super(ES6)
클래스에서 super 키워드를 사용하여 부모 클래스의 메서드를 호출할 때 사용
class ChildClass extends ParentClass {
constructor() {
super();
const parentProto = super.__proto__;
}
}🔎 프로토타입 체인
객체는 자신의 프로토타입이 가리키는 다른 객체의 속성과 메서드를 찾을 수 있다. 탐색은 프로토타입 체인이 연결된 객체에 한해서 가능하다.
프로토타입이 가리키는 프로토타입의 프로토타입을 순차적으로 검색하여 원하는 속성, 메서드를 찾는다. 만약 조상 객체에서 찾지 못한 속성, 메서드는 undefiend가 나온다.
🔎 프로토타입이 쓰이는 이유
1) 상속
자식 객체는 부모 객체의 프로토타입을 자신의 프로토타입으로 사용하여 부모 객체의 속성과 메서드를 상속받는다.
2) 메모리 효율성
여러 객체가 동일한 프로토타입을 공유할 때, 각 객체가 자신의 모든 속성과 메서드를 가지고 있는 것이 아니라 프로토타입을 참조하게 되므로 메모리를 절약할 수 있다.
3) 런타임 확장성
런타임에 객체의 속성, 메서드를 동적으로 추가 및 제거할 수 있다. 자바스크립트의 동적 특성을 활용하여 객체를 유연하게 확장할 수 있는 장점이 있다.
4) 코드 재사용성
다양한 객체가 동일한 기본 동작을 공유할 수 있으므로 코드의 재사용성이 증가한다.(추상화)
5) 동적 디스패치
프로토타입 기반의 언어에서는 메서드 디스패치가 동적으로 이루어진다. 프로토타입 체인을 따라 메서드를 검색하여 실행함으로써 객체 간에 동적인 상호작용을 돕는다.
