[ 자바스크립트(JavaScript) ] Prototype과 prototype property, __proto__ 그리고 prototype chain

📍 Class vs ProtoType

JavaScript는 객체지향프로그래밍을 지원 하지만 Class 문법을 사용하지 않고 대신 Prototype 문법을 사용한다. (ES6 이후에 class 문법이 들어왔지만 이는 JS가 class 기반의 문법으로 바뀐 것은 아니다.) 그렇다면 class처럼 사용하는 문법과 prototype 문법은 언제 사용할까? 다음 코드를 살펴보자.

 

// use class
function myInfo() {
    this.name = 'AYW'
    this.age = 27
}

const myName = new myInfo();
const myAge = new myInfo();

console.log(myName.name);    // AYW
console.log(myAge.age);    // 27

// prototype
function myInfo() {}

myInfo.prototype.name = 'AYW';
myInfo.prototype.age = 27;

const myName = new myInfo();
const myAge = new myInfo();

console.log(myName.name);    // AYW
console.log(myAge.age);    // 27

 

차이점이 느껴지는가? class 문법의 단점은 myInfo 내에 있는 값 모두가 메모리에 할당된다는 것이다. 가령 100개의 객체를 선언하면 200개의 값이 메모리 변수에 올라가있다는 것이다. 만약, a 변수에는 name과 age 모두를 사용하지만, b 변수에는 name만 사용하고 싶을 때 사용하지 않는 age 변수까지 메모리에 할당된다는 이야기다. 이는 곧 메모리의 효율과 관련이 되는데 이를 방지하기 위해 prototype을 사용한다.

 

prototype은 함수를 지정할 때 prototype이라는 고유 속성 값을 지정해줌으로서 객체를 생성할 때마다 해당 객체는 이미 지정된 prototype에 속한 함수 값만 참조하면 되는 것이다. 즉, prototype을 쓰면 200개의 변수가 메모리에 저장되는 것이 아니라, 함숫값만 참조하므로 메모리가 절약되는 효과를 얻을 수 있다. prototype 코드의 흐름은 다음과 같다.

 

1. prototype의 빈 객체를 어딘가에 선언한다.
2. myName과 myAge는 prototype의 빈 객체 내에 존재하는 Object의 값을 모두 사용할 수 있다.
   • 쉽게 말해 name과 age를 prototype의 빈 객체 어딘가에 넣어두고 myName과 myAge 변수가 해당 값을 꺼내쓰는 형태라고 보면 된다.

지금까지 내용으로 보아 prototype은 직접 함수내부에 선언하지도 않은 값을 넣어둘 수 있다고 배웠다. 그럼 어떻게 값을 저장하고 접근한다는 말인가? 해답은 prototype Object 와 prototype Link에 있는데, 하나씩 차근차근 살펴보자.

728x90

---

📍 ProtoType Object(constructor), ProtoType Link

객체는 언제나 함수(Function)로 생성된다. 함수로 정의되면 기본적으로 얻는 자격이 있는데 바로 constructor(생성자)다. 이것이 있기 때문에 우리는 new를 통해 객체를 만들 수 있는 것이다.

 

또, 함수를 생성하면 prototype의 속성(property)과 ProtoType Object가 만들어지는데, 생성된 함수에 prototype의 속성을 통해 ProtoType Object에 접근할 수 있는 권한이 생긴다. ProtoType Object는 말 그대로 프로토타입 객체이고, 이해하기 쉽게 일반 객체라고 생각하면 된다. 일반 객체에는 값을 자유롭게 추가하거나 삭제할 수 있다.

 

[myInfo 함수는 constructor(생성자)를 갖고있다]

 

[prototype object에 값을 추가하는 모습]

 

prototype_object는 constructor(생성자)와 __proto__ 속성을 갖게 된다. constructor(생성자)는 생성 함수인 function myInfo() {}를 가리키고 있다.

 

그렇다면 __proto__속성은 뭘까? 우리가 함수 내부에 값을 선언하지 않았는데도 접근할 수 있는 이유가 바로 __proto__때문이다. __proto__는 객체가 생성될 때 origin 격의 함수인 prototype object를 가리킨다. 즉, name과 age는 myInfo로부터 생성되었으니 myInfo 함수의 prototype object를 가리키고 있는다. 이처럼 __proto__ 속성을 통해 상위 프로토타입과 연결되어있는 형태를 프로토타입 체인(prototype chain)이라고 한다.

// prototype chain1

function myInfo() {}    // 함수

myInfo.prototype.name = 'AYW'
myInfo.prototype.age = 27

let an = new myInfo();  // 함수를 객체로 생성

console.log(an.name) // 'AYW'
console.log(an.age)  // 27

 

 

prototype chain의 또 다른 예를 한번 살펴보자.

// prototype chain2

function Boss (){}
Boss.prototype.boolean = true;

function MiddleBoss (){}
MiddleBoss.prototype = new Boss();

function Worker(){}
Worker.prototype = new MiddleBoss();

let o = new Worker();
console.log(o.boolean)    // true

 

이 과정은 Boss -> MiddleBoss -> Worker 순으로 boolean값을 내려주는 코드이다. 이 코드가 어떻게 o.boolean값이 true가 나올 수 있을까?

 

1. 마지막 변수인 o의 property 중 boolean 값이 있는지 살펴보고 있으면 반환시킨다.
2. 값이 없으면 생성자를 추적한다. 상위 prototype인 Worker의 property에서 Worker.prototype.boolean을 찾고 있으면 반환시킨다.
3. 값이 없으면 생성자를 추적한다. 상위 prototype인 MiddleBoss의 property에서 MiddleBoss.prototype.boolean 찾고 있으면 반환시킨다.
4. 값이 없으면 생성자를 추적한다. 상위 prototype인 Boss의 property에서 Boss.prototype.boolean 찾고 있으면 반환시킨다.

 

이런 순서로 진행 될 것이다. 만약, 다음 코드는 값이 어떻게 나올까?

// prototype chain3

function Boss (){}
Boss.prototype.boolean = true;

function MiddleBoss (){}
MiddleBoss.prototype = new Boss();

function Worker(){}
let t = new Worker();
t.boolean = false;
Worker.prototype. = t

let o = new Worker();
console.log(o.boolean)    // ??

 

정답은 false다.  왜 그럴까?

1. 마지막 변수인 o의 property 중 boolean 값이 있는지 살펴보고 있으면 반환시킨다.
2. 값이 없으면 생성자를 추적한다. 상위 Worker.prototype를 살핀다.
3. prototype에 저장되어있는 boolean 값이 4이기 때문에 4를 반환한다.

 

---

📌 reference

1. javascript-prototype-이해하기
2. Javascript 기초 - Object prototype 이해하기
3. 생활코딩 - prototype