Javascript(Prototype)

 지금까지 First-Project나 Final-Project, 아니면 개인적으로 작업을 할 때에 항상 Prototype에서 한번씩 무조건 막힌 적이 많다. 그래서 이번 기회에 Prototype을 제대로 공부해보려고 한다. 

---

 우선, 자바스크립트는 프로토타입 기반 객체 지향 언어라고 표현하는데 여기서 말하는 프로토타입이란 대체 무엇일까????

 첫번째로 자바스크립트는 클래스라는 개념을 가지고 있지 않다. 그래서 기존의 객체를 복사해서 새로운 객체를 생성하는 방식을 사용해야 한다. 그렇기 때문에 자바스크립트를 프로토타입 기반의 언어라고 표현하는 것이다. 이러한 방법은 객체 원형인 프로토타입을 이용하여 새로운 객체를 만들어내고 이렇게 생성된 객체는 다른 객체의 원형이 될 수 있다. 그렇다면 계속해서 나오고 있는 프로토타입은 언제 어떻게 사용하는 것일까라는 의문을 가지게 된다. 간단한 예시를 살펴보자

 

function Car(){
    this.wheel = 4;
    this.handle = 1;
}

var sonata = new Car();
var morning = new Car();

console.log(sonata.handle); // 1
console.log(mornig.handle); // 1

 

 이 코드에서는 Car라는 함수를 통해서 sonata와 morning이라는 객체를 생성했다. 이들은 각자 2개의 속성을 가지고 있고 동일한 데이터를 가지고 있다. 메모리의 관점에서 보면 sonata와 mornig 객체가 생성되면서 총 4개의 변수가 메모리에 저장 되었을 것이다. 중복된 값들도 포함해서 말이다. 하지만 이렇게 중복된 값들이 저장되면 메모리 낭비가 될 수 밖에 없다.(큰 프로젝트이면 어후......) 이러한 메모리 낭비를 막기 위해서 Prototype을 사용하여 객체를 생성하는 코드를 살펴보자.

 

function Car(){}

Car.prototype.wheel = 4;
Car.prototype.handle = 1;

let sonata = new Car();
let morning = new Car();

console.log(sonata.handle) // 1
console.log(mornig.handle) // 1

 

 얼핏보면 위의 코드와 그렇게 차이가 없어 보이지만 다시 한번 메모리 관점에서 살펴보면 sonata와 morning은 자신이 변수를 가지고 있는게 아니라, Car.prototype이라는 어떤 Object의 handle이라는 속성을 공유하고 있다. 그렇다는 말은 위의 코드 처럼 생성된 객체의 수 만큼 변수가 저장되는 것이 아니라, 같은 생성자를 통해서 만들어진 객체들은 하나의 prototype 이라는 Object를 공유하고 있다는 뜻이다. 결국, 중복되는 값이 메모리에 없어 메모리 낭비를 하지 않는 뜻이기도 하다. 

---

 자바스크립트에서 함수가 정의 될 때, 함수는 기본적으로 Constructor(생성자)가 부여된다. 생성자가 부여된 함수는 new를 통해서 객체를 생성할 수 있게된다. 또한 Prototype Object가 생성되고 이 Object와 함수가 가지고 있는 prototype 속성과 연결이 된다. 따라서, Car.prototype은 어떠한 Prototype Object와 연결이 되어있다. 위의 코드를 살펴봤을때, Car.prototype.handle이 정의 된다면, 이는 어떠한 Prototype Object의 하나의 속성으로 추가가 된다는 뜻이다.

 

 여기서 한가지 보자면 sonata라는 객체는 handle이라는 속성을 가지고 있지 않음에도 불구하고 어디선가 값을 가져와서 '1'을 나타내고 잇다. 그럼 이건 어디서 나타난걸까?

 바로 이때 나타나는 개념이 Prototype Link 이다. sonata을 웹페이지의 console창에서 열어봤을 때 __proto__ 라는 것을 가지고 있다. 이는 자신을 생성 했던 함수가 가지고 있는 속성들을 가리킨다. 자신의 부모의 속성들을 물려받은 것이다. 때문에 sonata.handle이라는 의미는 부모인 Car.prototype이 가리키고 있는 Prototype Object의 속성 중 handle이라는 속성을 가리킨다.

 이러한 연결에 연결을 거듭하여 속성들을 가져오기 때문에 자바스크립트를 프로토타입 기반의 언어라고 표현하는 것이다.