JavaScript
Prototype

프로토타입에 대해 설명해주세요

프로토타입은 자바스크립트에서 상속을 지원하기 위한 방법이다.

자바스크립트는 객체들로 구성되어 있는데, 객체는 각각 프로토타입을 가진다.

프로토타입을 통해 자바스크립트의 상속이 구현된다.

객체의 원형이라는 의미 그대로, 상위 객체의 속성이나 메소드를 하위 객체에서 사용할 수 있다.

표현은 삶의 흐름 속에서만 의미를 갖는다

  • 현실에 존재하는 것 중 가장 좋은 본보기를 원형(prototype)으로 선택한다.
  • 문맥(컨텍스트)에 따라 '범주', 즉 '의미'가 달라진다.

프로토타입 체인

객체에서 어떤 속성이나 메소드에 접근할 때 현재 객체에 찾는 값이 없으면 해당 객체의 상위 프로토타입에서 접근할 값을 찾는 것을 반복한다.

프로토타입 기반 OOP 언어의 특징

  • 개별 객체(instance) 수준에서 메소드와 변수를 추가
  • 객체 생성은 일반적으로 복사를 통해 이루어짐
  • 확장(extends)은 클래스가 아니라 위임(delegation)
  • 개별 객체 수준에서 객체를 수정하고 발전시키는 능력은 선험적 분류의 필요성을 줄이고 반복적인 프로그래밍 및 디자인 스타일 장려
  • 프로토타입 프로그래밍은 일반적으로 분류하지 않고 유사성을 활용하도록 선택
  • 결과적으로 설계는 맥락에 의해 평가

어휘적 범위(lexical scope)

변수의 의미는 그 어휘적인(Lexical), 실행 문맥(Execution Context)에서의 의미가 된다

'단어의 의미가 사용되는 근처 환경'에서의 '근처'를 어휘적 범위로 정의한다.

자바스크립트 엔진은 코드가 로드될 때 실행 컨텍스트를 생성하고 그 안에 선언된 변수, 함수를 실행 컨텍스트 최상단으로 호이스팅한다.

this를 어떻게 대할 것인가

단어의 쓰임새가 곧 의미이다.

그것이 어디서 발화되느냐에 따라 단어의 의미가 달라진다.

프로토타입에서는 받아들이는 주체와 문맥이 중요하다.

프로그래밍으로 보면 실행하는 '객체'가 중요하다.

  • 메소드: 객체의 함수
  • 메시지: 메소드를 실행하라는 메시지 전달

[[Prototype]] vs prototype 프로퍼티

function Person(name) {
  this.name = name;
}
 
var foo = new Person("Lee");
 
console.dir(Person); // prototype 프로퍼티 있음
console.dir(foo); // prototype 프로퍼티 없음

[[Prototype]]

함수를 포함한 모든 객체가 가지고 있는 인터널 슬롯이다.

객체의 입장에서 자신의 부모 역할을 하는 프로토타입 객체를 가리킨다.

console.log(Person.__proto__ === Function.prototype);

prototype 프로퍼티

함수 객체만 가지고 있는 프로퍼티이다.

함수 객체가 생성자로 사용될 때 이 함수를 통해 생성될 객체의 부모 역할을 하는 객체(프로토타입 객체)를 가리킨다.

console.log(Person.prototype === foo.__proto__);

GPT로 문장 정리하기

프로토타입에 대해 설명해줘

  • 자바스크립트 객체 간의 상속을 구현하는 매커니즘
  • 모든 객체는 다른 객체로부터 상속을 받으며, 이 상속 관계는 프로토타입 체인을 통해 형성
  • __proto__
    • 객체의 프로토타입에 접근하기 위한 내부 프로퍼티
    • __proto__을 통해 접근 가능하지만, Object.getPrototypeOf()Object.setPrototypeOf() 사용 권장
  • prototype
    • 함수 객체가 가지고 있는 속성, 해당 함수를 통해 생성된 객체의 프로토타입 나타냄
    • 주로 생성자 함수와 함께 사용

키워드 정리

  • 문맥(context)
  • 프로토타입 체인

참고 자료