[Javascript] - 프로토타입(prototype)

- Prototype(프로토타입) -

 

• Prototype(프로토타입)의 정의
  - 객체지향언어의 특징인 Class라는 개념을 대체하는 Javascript의 문법
  - Javascript에는 Class라는 개념이 없었지만 최근 ES6문법에 Class가 추가되었다
  - 다른 객체지향언어(ex.Java, Python)의 상속이라는 개념을 Javascript에서는 Prototype(프로토타입)으로 구현할 수 있다
  - Javascript가 프로토타입 기반 언어라고 불리는 이유는 Prototype문법이 있기 때문이다
  
  
• Prototype(프로토타입)의 이해를 위한 예제
  
  

<-------------------------------------------------------------------------------------->
function Person() {};
 
Person.prototype.eyes = 2;
Person.prototype.nose = 1;
 
var kim  = new Person();
var park = new Person():
 
console.log(kim.eyes); // => 2
console.log(park.nose); // => 1

---

- Prototype Object / Prototype Link -

 

• Prototype Object
  
  - 객체(Object)는 항상 함수로 생성된다

<-------------------------------------------------------------------------------->
function Person() {} // => 함수
 
var personObject = new Person(); // => 함수로 객체를 생성

- personObject라는 객체는 Person함수로 생성되었다

- 객체는 항상 함수에서 생성이 된다

 

• 함수가 정의될 때 생기는 일 2가지
  
  1. Constructor(생성자) 자격 부여
  - Constructor 자격이 부여되면 new로 객체를 생성할 수 있다
  - 함수만 new 키워드를 사용할 수 있는 이유이다
  
  2. 해당 함수의 Prototype Object생성 및 연결
  - 함수가 정의되면 메모리상에 함수와 Prototype Object 두개가생성된다
  - 생성된 함수는 Prototype 속성으로 Prototype Object에 접근할 수 있다
  - Prototype Object는 기본적인 객체와 같으며 속성으로 Constructor와 __proto__를 갖고있다
    

- Constructor는 Prototype Object와 같이 생성된 함수를 가리킨다

- 쉽게 말해서 생성자가 무엇인지 가리키는 역할을 한다

 

• __Proto__

<-------------------------------------------------------------------------------------->
function Person() {};
 
Person.prototype.eyes = 2;
Person.prototype.nose = 1;
 
var kim  = new Person();
var park = new Person():
 
console.log(kim.eyes); // => 2
console.log(park.nose); // => 1
 

- 위의 예제에서 kim과 park이라는 객체는 eyes와 nose라는 속성을 가지고있지 않다

- 그치만 kim.eyes와 park.nose등 Person.prototype이 가지는 속성에 접근할 수 있는게 __proto__때문이다

 

 

- 위의 그림처럼 __proto__라는 속성이 Prototype Object를 가리키고 있기 때문이다

- __proto__는 나를 생성한 부모를 가리키게되고 그러므로 그 부모의 속성들에 접근할 수 있는 것이다