(191117) 객체지향 프로그래밍 (OOP) - (3)

JS에서 Prototype

자바스크립트는 프로토타입 기반 언어라고 불린다. 자바스크립트도 객제지향언어이지만 class라는 개념이 없다.

(Class 문법이 ECMA6 표준에서 추가되었지만, 문법이 추가된 것이지 class 기반으로 바뀐 것은 아님!!)

 

대신 prototype을 통하여 class를 흉내내어 구현한다.

 

 
 var Person = function () {};
 
 Person.prototype.eyes = 2;
 Person.prototype.nose = 1;
 
 var kim = new Person();
 var park = new Person();
 
 console.log(kim.eyes); // 결과는 2
 

Person.prototype 이라는 빈 object가 어딘가에 존재하고, Person 함수로부터 생성된 객체들 (kim, park)은 어딘가에 존재하는 object에 들어있는 값을 가져다가 쓸 수 있다!!

 

Prototype Object

객체는 함수로 생성된다!!

var obj = {};  → 바꿔쓰면 var obj = new Object();  (array, function도 마찬가지)

 

즉, 함수가 정의될 때

1. 해당 함수에 constructor 자격이 부여된다

→ new 키워드를 통해 객체를 만들어 낼 수 있다.

 

2. prototype object도 같이 생성된다.

→ 생성된 함수는 prototype 속성을 통해 prototype object에 접근할 수 있고, prototype object는 constructor와 __proto__를 가지고 있다.

→ constructor는 생성된 함수를 가리키고 있고, __proto__는 'prototype link'

 

 

Prototype Link

위의 예시에서 kim을 보면 eyes 라는 속성은 없다!! 하지만 kim.eyes를 실행하면 2라는 값을 참조한다.

이는 prototype object에 존재하는 eyes 속성을 참조한 것 → __proto__ 를 통해서 가능!!

 

__proto__ 속성은 모든 객체가 전부 가지고 있다. 그리고 객체가 생성될 때 조상이었던 함수의 prototype object를 가리킨다!!

→ 즉, kim 객체는 Person 함수로 생성되었으므로 Person 함수의 prototype object를 가리키고 있음!!

→ 마찬가지로 Person 함수도 보면 prototype object에 __proto__를 가지고 있는데 이것은 Object 함수의 prototype object를      가리키고 있다!!!

 

이는 kim 객체가 eyes가 없으므로, eyes를 찾을 때까지 상위 프로토타입을 계속 탐색함!

→ 최상위인 'Object' 의 prototype object까지 탐색했는데도 없으면 undefined 를 리턴한다

→ 이것을 '프로토타입 체인'이라고 부른다.

 

따라서, 모든 객체는 최상위인 Object의 자식이라고 부를수 있고, Object의 prototype object가 가지고 있는 모든 속성이 사용가능한 것임!!!!

 

Object.create()

 var hi = {
   first : "hi"
 }
 
 var obj = Object.create(hi);
 
 /* obj를 찍어보면 빈 객체로 나온다. 하지만 obj.first 찍으면 "hi" 를 참조하는 것을 알 수 있는데 obj의 __proto__를 보면 hi가 있는 것을 알 수 있음!! (hi는 함수가 아니고 객체이므로 hi의 prototype object를 가리키는게 아니라 hi라는 객체 자체가 들어가 있음!!)

hi는 마찬가지로 __proto__를 보면 최상위인 Object의 prototype object를 가리키고 있는 것을 알 수 있다. 

여기에는 Object의  constructor가 있고 Object에 정의되어있는 속성들을 볼 수 있다.
최상위이므로 여기서 __proto__는 없음!!!
 */