[JS]프로토타입과 프로토타입 체인

Growing_dev·2022년 9월 22일
0

JS

목록 보기
4/4

1. prototype 프로퍼티

  • 함수 객체만 가지고 있는 프로퍼티이다.
  • 함수 객체가 생성자로 사용될 때, 이 함수를 통해 생성될 객체의 부모 역할을 하는 객체(Prototype 객체)를 가리킨다.
  • 즉, Prototype 객체란 어떠한 객체가 만들어지기 위해 그 객체의 모태가 되는 객체이고 하위 객체들에게 물려줄 속성들이다.

2. proto 프로퍼티

  • 함수를 포함한 모든 객체가 가지고 있는 인터널 슬롯이다.
  • 객체의 입장에서 자신의 부모 역할을 하는 Prototype 객체를 가리킨다.
  • ECMAScript에서는 암묵적 프로토타입 링크(implicit prototype link)라 부르며 proto 프로퍼티에 저장된다.
  • Prototype 프로퍼티는 함수의 입장에서 자신과 링크된 자식에게 물려줄 프로토타입 객체를 가리키고, proto 프로퍼티는 객체의 입장에서 자신의 부모 객체인 프로토타입 객체를 내부의 숨겨진 링크로 가지고 있는 것이다.

3.constructor 프로퍼티

  • 프로토타입 객체는 constructor 프로퍼티를 가진다.
  • constructor 프로퍼티는 생성된 객체(인스턴스)의 입장에서 자신을 생성한 함수를 가리킨다.

4. 프로토타입 체인(Prototype Chain)

자바스크립트는 특정 객체의 프로퍼티나 메소드에 접근시 객체 자신의 것뿐 아니라 proto가 가리키는 링크를 따라서 자신의 부모 역할을 하는 프로토타입 객체의 프로퍼티나 메소드를 접근할 수 있다.
즉, 특정 객체의 프로퍼티나 메소드 접근시 만약 현재 객체의 해당 프로퍼티가 존재하지 않는다면 proto가 가리키는 링크를 따라 부모 역할을 하는 프로토타입 객체의 프로퍼티나 메소드를 차례로 검색하는 것이 바로 프로토타입 체인이다.
모든 프로토타입 체이닝의 종점은 Object.prototype이다.
하위 객체는 상위 객체의 프로퍼티나 메소드를 상속받는 것이 아니라 공유한다.
해당 객체에 없는 프로퍼티나 메소드를 접근할 때 프로토타입 체이닝이 일어난다.

자바스크립트의 기본 데이터 타입은 Number.prototype, String.prototype 등과 같이 이들의 프로토타입 객체에 정의된 표준 메서드를 사용한다. 그리고 이들 프로토타입 객체 또한 Object.prototype을 자신의 프로토타입(proto 링크)으로 가지고 프로토타입 체이닝으로 연결된다.

3가지의 객체 생성 방법

리터럴 방식
Object 생성자 함수
생성자 함수

1) 리터럴 방식으로 생성된 객체의 프로토타입 체인

객체 리터럴 방식으로 생성된 객체는 결국 내장 함수인 Object() 생성자 함수로 생성하는 것을 단순화 한 것이다.
자바스크립트 엔진은 객체 리터럴로 객체를 생성하는 코드를 만나면 내부적으로 Object() 생성자 함수를 사용하여 객체를 생성한다.
즉, Object 생성자 함수로 생성한 것과 같다.

2) Object() 생성자 함수로 생성된 객체의 프로토타입 체인

Object() 생성자 함수는 함수이므로,
함수 객체인 Object()는 prototype 프로퍼티가 있다.
prototype 프로퍼티는 함수 개체가 생성자로 사용될 때 이 함수를 통해서 생성될 객체의 부모 역할을 하는 객체이다.
즉 프로토타입 객체를 가리킨다.
생성된 객체의 proto 프로퍼티는 자신의 부모역할을 하는 객체 즉, 프로토타입 객체를 가리킨다.

3) 생성자 함수로 생성된 객체의 프로토타입 체인

함수 생성 방법

함수 선언식(Function declaration)
함수 표현식(Function expression)
Function() 생성자 함수
생성자 함수로 객체를 생성하기 위해서는 먼저 생성자 함수를 정의해야한다.
함수 선언식의 경우 내부적으로 자바스크립트 엔진이 기명 함수 표현식으로 변환한다.
결국 함수 선언식, 함수 표현식 모두 함수 리터럴을 사용하고, 함수 리터럴은 Function() 생성자 함수로 함수를 생성하는 것을 단순화 시킨 것이다.

어떠한 방식으로 함수 객체를 생성해도 모든 함수 객체의 prototype은 Function.prototype이다. 생성자 함수도 함수 객체이므로 생성자 함수의 프로토타입 객체 또한 Function.prototype이다.

profile
github ( https://github.com/sktjgudals ) gitlab ( https://gitlab.com/sktjgudals10 )

0개의 댓글