모든 객체는 자신의 부모 역할을 하는 Prototype 객체를 가리키는 숨겨진 참조 링크(__proto__) 가집니다.

즉,

모든 객체는 자신의 부모 역할을 담당하는 객체와 연결되어,
부모 객체의 프로퍼티 또는 메서드를 상속받아 사용할 수 있습니다.

> javascript의 prototype 기반 프로그래밍

: 객체 지향의 상속 개념을 의미합니다.

# prototype 프로퍼티

: 함수에만 있는 속성(프로퍼티)으로,
property 프로퍼티가 가리키는 객체를 자신의 prototype 객체 를 가리킵니다.

function FuncEx(){ this.name = 'jaen'}

/*
FuncEx.prototype === {constructor: ƒ}
*/

# prototype 객체

: 사전 그대로 '원형(원래의 모습)'을 의미
같은 생성자로부터 만들어진 객체들은 모두 이 원형 객체를 공유

1. 함수가 생성될 때 만들어지는 객체

: constructor 속성 하나만 있는 객체를 가리킴

FuncEx.prototype === {constructor: ƒ}

2. 서로를 참조 ( 객체의 유일한 속성(constructor)을 가리킴 )

: prototype 프로퍼티 ⇠⇢ constructor (자신과 연결된 함수 가리킴)

FuncEx.prototype === {constructor: {}, __proto__: {}}

// 프로토타입 객체와 매핑된 함수
FuncEx.prototype.constructor === function FuncEx(){ this.name = 'jaen' } 

FuncEx (함수객체 :: prototype 속성) <-> FuncEx.prototype (prototype 객체 :: constructor 속성)

let fun = new FuncEx();
fun.__proto__ === FuncEx.prototype

/*
 생성된 인스턴스의 인터널슬롯은 생성자함수의 prototype 객체를 가리킴*
*/

 

# prototype 프로퍼티 vs __proto__

• 공통점 : 프로토타입 객체를 가리킴
• 차이점
  prototype : 함수 객체(Function.prototype)에서만 가지는 속성 값
  __proto__ : 모든 객체에서 가지는 링크

__proto__ [ internal slot ]

: 모든 객체에서 가지는 자신의 부모 역할을 하는 프로토타입을 가리킴 “모든 갹채의 부모, 내부 프로퍼티"

 

콘솔로 확인해보기 👀

function myObj(param){
	this.name = param;
}

myObj.__proto__;		//부모 객체인 Function prototype 가리킴
myObj;				//(함수 자신을 가리킴)
myObj.prototype;		//prototype 객체를 가리킴
myObj.prototype.constructor;	//함수 자신을 가리킴

/*
 myObj === myObj.prototype.constructor
*/

# prototype chaining

자식은 부모에 정의된 속성 or 메서드를 사용 가능합니다.

객체에서 속성이나 메서드에 접근할 경우,

우선 객체 자신의 속성에서 찾아봅니다.

하지만 자신의 속성에 없을 경우 __proto__로 연결된 링크를 따라

부모의 속성을 탐색하여 접근합니다.

 let obj = { aim : 'dynamic developer'};
 obj.hasOwnProperty('aim');	//true

/*
 정의한 객체 obj에 hasOwnProperty() 메서드가 없지만
 객체의 부모 객체인 Object prototype에 정의되어 있으므로 사용가능하다.
*/

 

---

• 참조
  Insideout javascript 책