프로토타입

변진수·2021년 12월 23일
2

프로토타입

자바스크립트는 프로토타입기반 언어입니다. 클래스 기반 언어에서는 '상속'을 사용하지만 프로토타입 기반 언어에서는 어떤 객체를 원형으로 삼고 이를 복제(참조)함으로써 상속과 비슷한 효과를 얻습니다.

함수를 생성하는 생성자 함수를 Constructor라고 합니다. Constructor는 prototype 객체를 가지고 있습니다. Constructor를 사용하여 인스턴스를 생성할 수 있습니다. 이때 인스턴스에는 __proto__ 객체가 생성됩니다. __proto__ 객체는 Constructor의 prototype 객체를 참조하고 있으므로 객체가 그대로 복사됩니다.

__proto__ 키워드 자체는 생략이 가능하므로 우리는 인스턴스에서 프로토타입 객체를 사용할 때 __proto__ 를 생략하고 사용하는 경우가 많습니다. 만약 생략을 하지 않고 사용한다면 __proto__ 의 내장 메소드를 사용할 경우 this는 __proto__ 를 바라보게 됩니다.

프로토타입 체인

메서드 오버라이드

prototype에 정의된 메서드는 인스턴스의 __proto__ 에서 사용이 가능합니다. 그런데 만약 __proto__ 에서 prototype에 있는 메소드와 같은 이름으로 메소드를 정의한다면 __proto__ 에는 같은 이름의 메소드가 생성됩니다. 즉, 같은 이름으로 2개의 메소드가 정의된 것입니다. 이때는 실행 컨텍스트에 따라서 자신과 가까운 곳의 메소드부터 호출합니다.

프로토타입 체인

프로토타입은 객체이고 자바스크립트에서 객체는 함수이기 때문에 프로토타입은 실행 컨텍스트와 같은 구조를 가집니다. 즉, 프로토타입 체인은 스코프 체인과 구조가 같습니다. prototype를 environmentRecord의 역할을 하고 __proto__ 는 outerEnvironmentReference의 역할을 합니다. __proto__ 는 상위 스코프의 prototype을 참조하고 있습니다. 콜스택이 쌓임에 따라 상위 실행 컨텍스트로 올라가면서 스코프를 참조하듯이, 프로토타입도 상위로 올라가면서 해당 메소드 등을 참조합니다.

실행 컨텍스트와 차이점이 있다면 프로토타입은 콜스택이 쌓이는 대로만 작동하지 않고 원하는 대로 스택을 쌓을 수 있습니다. 즉, 중간에 원하는 프로토타입 객체를 삽입할 수 있습니다.

profile
Web Frontend Engineer

0개의 댓글