[JS.개발일지] 10. 자바스크립트 7(프로토타입 체인. 메모리저장구조)

프로토타입 체인이란?

먼저 나누어서 살펴보자.
1. 프로토타입은 객체안에 있는 '보이지않는객체'이다. 가장 상위에 Object.prototype이다. 
2. 체인은 이 보이지 않는 객체가 연결되어있다는것을 의미한다. 
 
두 단어를 연결해보면
객체에 있는 메서드나 속성을 찾기위해 체인에 연결된 객체들을 차례대로 탐색하는것을 프로토타입 체인이라고 한다. 
 

왜 귀찮게 prototype을 쓰는거지? 

prototype에 메서드나 속성을 추가하는 이유는 메모리 효율성과 재사용성 때문
객체 내부에 메서드를 직접 정의하면 객체를 생성할 때마다 메서드가 복제된다.
하지만 prototype에 메서드를 정의하면, 모든 인스턴스가 같은 메서드를 공유하여 메모리를 절약할 수 있음.

단점 : 메모리는 줄어들지만 더 객체를 더 검색해야하므로 연산은 더 많이하게되어 성능에 영향을 주게된다.

p1. p2는 같은 sayHello를 사용한다.

 
객체의 가장 상위 객체는 Object.prototype이다. 
Object.prototype이 가지고 있는 대표적인 속성
 

• toString(): 객체를 문자열로 변환.
• hasOwnProperty(key): 해당 키가 객체 자체에 존재하는지 확인.
• isPrototypeOf(obj): 현재 객체가 다른 객체의 프로토타입인지 확인.
• valueOf(): 객체의 기본 값을 반환.
• defineProperty(): 객체의 프로퍼티를 세세하게 정의.

참고로 이 메서드들은 처음 프로그래밍을 배울 때보다,
코드를 심화 분석하거나 특정 동작을 커스터마이징할 때 더 큰 도움이 된다고 하지만
그래도 기본적인 것들은 알아놓자!

 
 
 
생성자 함수에서 new 연산자를 사용해서 객체를 복사할때
다음과 같은 구조 안에서 객체가 만들어진다.
내가 생성자 함수를 복사하면 만들어진 객체 안에 원본 생성자 함수의 메모리주소가 있다.

각 객체에 sayHello라는 함수를 따로 만드는게 아니라
상위 객체인 (객체명).prototype에 함수를 만들면 만들면 리소스를 줄일 수 있다!

 

 

 
프로토타입이 hs 라는 함수(생성자함수)와 연결되어 있음. 
Ref *1
[constructor] : (어디서 생성했나?) 
[Function: hs] : (hs라는 함수에서 생성했지.)
[length] : 0 (인자(매개변수)는 필요없어)
[name] : hs (함수이름은 hs야)
[prototype] : Circular *1 (순환참조를 나타내며 내가 나 자신을 가리키는것을 나타낸다. 거울처럼...)
일반적으로 다른 객체를 참조하지 않으면 자기자신을 가리키는 순환참조가 됨. 
arguments / caller : 최근 자바스크립트에서는 거의 사용하지 않는 비표준 속성. (무시해도 됨)
 
Ref *2
greet: [Function (anonymous)] (greet이라는 메서드에는 이름이 없어.)
프로토타입에서 만들어진 함수이기 때문에 자식객체들은 리소스 낭비없이 공통으로 사용가능하다. 
[prototype[: {[constructor]: [Circular *2]} (이 프로토타입은 constructor에서 생성되었다. 
 
 
메모리 저장구조