[JavaScript] Prototype (*JS에서 Class처럼 사용됨)

목차 :

1. prototype

2. prototype object

3. prototype link

---

1. Prototype | JavaScript는 Prototype 기반 언어이다.

javascript에서 모든 객체는 'prototype' 이라는 속성을 가지며 기본적으로 'Object' 객체를 참조한다.
이 속성은 객체의 부모 역할을 수행한다. 즉, 이를 통해 javascript가 class처럼 상속받는 행위를 비슷하게 구현할 수 있는 것이다.

**사용자가 정의한 혹은 이미 정의된 함수는 prototype이라는 Object를 가지고 있다.
이미 정의된 함수 (String(), Number() 등)의 prototype에는 사전에 정의된 여러 객체, 함수가 존재하며
사용자가 정의한 함수의 prototype은 빈 상태로 등록되어있다.

 

2. Prototype Object | 모든 객체는 함수로 생성한다.

객체는 언제나 함수(Function)로 생성된다.

var i = 1; // var i = new Number(1); 임
var s = "hello"; // var s = new String("hello") 임

var personObject = new Person(); // 함수로 객체 생성

우리가 흔히 레터럴이라 알고있는 "var i = 1" 는 정확히 "var i = new Number(1)" 로 변환 작업을 수행한다.
이처럼 모든 객체는 함수로 생성되는 것이다.

그럼 Prototype Object와 위에서 말하는 Object랑 무슨 관계?

 

함수가 정의될 때

(1) 해당 함수에 constructor (생성자) 자격 부여 : new를 통한 객체 생성 권한 부여
(2) 해당 함수의 Prototype Object 생성 및 연결 

위 2개가 수행된다.

여기서 (2)번을 자세히 보면

그림 1 Prototype Object

함수를 정의하면 함수와 Prototype Object가 생성된다. 
생성된 함수는 prototype 속성을 가지며 해당 속성으로 Prototype Object에 접근 가능하다.

Prototype Object는 일반적인 객체이므로 속성을 마음대로 추가/삭제할 수 있고, 같은 함수로 생성된 모든 객체는 동일한 Prototype Object를 접근하므로, 공유 자원인 셈이다. 

 

**앞에서 말했던 '모든 객체는 prototype 속성을 가진다' 라고 했는데. 
이는 바로 모든 객체는 함수로 생성되며, 함수는 prototype 속성을 가지기 때문이다.
즉, 모든 객체는 자신을 생성한 함수가 가리키는 prototype 속성에 접근 가능하다.

 

여기서 Prototype Object의 __proto__ 는 Prototype Link이다.

 

 

3. Prototype Link  | 모든 객체의 __proto__ 는 상위 Prototype Object와 연결되어있다.

__proto__속성은 모든 객체가 빠짐없이 가지고있는 속성이다. 
*prototype속성은 함수(function)만 가지고 있음 !!!

 

__proto__속성은 객체가 생성될 때 상위 함수의 Prototype Object를 가리킨다.
(**아래 그림에서 personObject(생성된 객체)의 상위 함수는 Person()이다.)

function Person(){};
Person.prototype.testArgs1 = 2;

var personObject = new Person();
console.log(personObject.testArgs1);

//result
>> 2

위 코드를 설명하면 아래 그림(2) 처럼
(1) Person 함수가 정의되면서 Person Prototype Object가 생성되었고, 생성된 함수에는 prototype 속성이 Prototype Object과 연결된다..
(2) Person 함수로 생성(new)된 personObject에는 __proto__가 존재한다. 해당 __proto__는 Person의 prototype과 연결된 Prototype Object와 연결된다.

 

그림 2 Prototype Link

여기서 중요한 점은 myFunction에 testArgs1 속성이 없어도 testArgs1에 접근할 수 있다는 것이다.
이게 가능한 이유는 myFunction이 가지고있는 __proto__가 상위 Prototype과 연결되어있기 때문이다. 
찾고자 하는 속성을 최상위 Prototype까지 search 하고 존재하지 않을 시 undefined를 return한다.

이렇게 __proto__속성을 통해 상위 Prototype과 연결되어있는 형태를
Prototype Chain이라 한다.

 

myFunction의 Prototype Chain을 그리면 아래 그림(3)과 같다.

그림 3 Prototype Chain

거의 모든 객체의 최상위는 Object Type이기 때문에 MyFunction Prototype Object의 __proto__는 Object Prototype Object와 연결되어있다.
myFunction에서 접근하고자하는 속성이 __proto__와 연결되어있는 MyFunction Prototype Object에서 1차적으로 찾고
원하는 속성을 발견하지 못 했다면 MyFunction Prototype Object의 __proto__와 연결되어있는 Object Prototype Object에서 2차로 찾게되는 것이다.

 

---

참고 : 

https://medium.com/@bluesh55/javascript-prototype-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-f8e67c286b67

[Javascript ] 프로토타입 이해하기