prototype

[[Prototype]] 링크

자바스크립트 객체는 Prototype이라는 내부 프로퍼티가 존재한다. 거의 모든 객체가 생성 시점에 이 프로퍼티에 null이 아닌 값이 할당된다.

 

const woody = {
    riding : true
}

woody.riding    // true

woody.riding처럼 객체 프로퍼티를 참조할 경우 [[Get]]이 호출되어 객체 내부에 해당 프로퍼티가 존재하는지를 탐색한다. 그렇다면 객체 내부에 없는 프로퍼티를 호출하게 되면 어떻게 될까?

[[Get]]은 객체 내부에서 해당 프로퍼티를 찾지 못하면 바로 [[Prototype]]링크를 따라가 프로퍼티를 탐색한다. 모든 일반 객체의 최상위 프로토타입 연쇄는 내장 Object.prototype이고 이 지점에서도 찾지 못하면 탐색이 종료된다.(undefined 반환)

 

const buzz = {
    flying : true
}

const woody = Object.create(buzz);
// 우디가 날 수 있게 되었다!
woody.flying;   // true

woody는 buzz와 [[Prototype]]이 링크되었다.

woody 내부에는 flying이라는 프로퍼티가 없지만 연결된 buzz에서 해당 프로퍼티를 찾아 그 값을 반환한 것이다.

 

for...in 루프에서도 객체를 순회할 때 prototype 연결을 통해 탐색 가능한 프로퍼티라면 모두 열거한다.

for(let i in woody) {
    console.log('${i}를 발견');
};
// flying 발견

---

클래스 함수

function Foo() {

}

함수를 정의하면 함수만 생성되는 것이 아니라 Prototype Object도 같이 생성된다.

Prototype Object는 기본속성으로 constructor와 __proto__를 가지고 있다.(따라서 정확히 말하자면 Foo.prototype 객체가 프로토타입을 의미하는 것은 아니다. constructor도 가지고 있으니)

* constructor는 내가 선언한 생성자 함수(Foo)를 가리킨다. new 키워드와 함께 함수를 호출할 경우 constructor함수를 실행하고 부수효과로 객체가 생성된다.

생성자 함수가 아니라 함수를 생성하는 호출이라고 생각하는 것이 맞다.

* prototype은 생성자 함수에 정의한 모든 객체가 공유할 원형이다.

* proto는 [[Prototype]]링크이다. 생성자 함수에 정의해두었던 prototype을 참조한다.

 

const f = new Foo();
Object.getPrototypeOf(f) === Foo.prototype; // true

 

 

prototype은 생성자 함수에 사용자가 직접 넣는 거고, __proto__는 new 호출할 때 prototype을 참조하여 자동으로 만들어진다.

생성자 함수에는 prototype에, 생성자로부터 만들어진 객체에는 __proto__에 생성자의 prototype이 들어간다.

new Foo()로써 만들어진 모든 객체(f)는 결국 Foo.prototype 객체와 내부적으로 [[Prototype]] 링크로 연결된다.

결국 f와 Foo는 상호 연결된 두 개의 객체가 된다.

 

출처:

velog.io/@adam2/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-Prototype-%EC%99%84%EB%B2%BD-%EC%A0%95%EB%A6%AC

자바스크립트 Prototype 완벽 정리