프로토타입(Prototype) 이해하기(1)

C++, Java와 같은 클래스 기반 객체지향 언어와 달리 자바스크립트는 프로토타입 기반 객체지향 언어다.

객체지향 프로그래밍에 대해서 미리 공부한 상태라고 가정할 것이다.

 

클래스 기반 객체지향 프로그래밍 언어는 객체 생성 이전에 클래스를 정의하고 이를 통해 객체(인스턴스)를 생성한다. 하지만 프로토타입 객체지향 프로그래밍 언어는 클래스라는 개념이 없다. 그럼에도 자바스크립트가 객체지향 언어인 이유는 다른 방법으로 클래스의 기능을 구현했기 때문이다.

(ES6에서 class 문법이 추가되었지만 클래스가 아닌 프로토타입을 기반으로 한 문법)

 

그리고 클래스 기반 객체지향 프로그래밍에서 명심할 것

클래스란, 객체를 만들어 내기 위한 추상적인 개념, 설계도 혹은 틀
객체란, 소프트웨어 세계에 구현할 대상, 클래스에 선언된 모양 그대로 생성된 실체
인스턴스란, 설계도를 바탕으로 소프트웨어 세계에 구현된 구체적인 실체

자바스크립트(프로토타입 기반)은 이러한 개념이 없고 그냥 클래스를 따라하는 것이다!

---

✅ 자바스크립트의 Instantiation Pattern

앞서 말했듯, 자바스크립트는 클래스 개념이 없다. 하지만 이를 구현하기 위한 방법이 Instantiation Pattern인 것이다.

 

정말 여기서 많은 시간을 헤맸는데 클래스, 인스턴스 개념과 Instantiation Pattern을 혼동하지 않았으면 좋겠다.(똑같은 인스턴스인 줄...) 자바스크립트(프로토타입 기반 언어)는 클래스를 통해 객체를 만드는 기능이 없었으므로, Instantiation Pattern을 통해 클래스의 기능을 구현하는 것이다!

 

정리를 해보자면

Class는 하나의 정형화된 모델을 만들어두고, 그 모델을 기반으로 한 인스턴스(복제품)을 만들기 위해 사용한다. 하지만 자바스크립트는 Class라는 개념이 없으므로 이를 구현하기 위해 Instantiation Pattern을 통해 Class를 선언해줬다! 

 

Instantiation Pattern에는 4가지가 있다.

 

1. functional instantiation

functional instantiation은 호출 될 때마다 새로운 인스턴스(객체)를 반환하는 함수이다. 클래스의 기능은 할 수 있지만 인스턴스를 만들 때 마다 모든 메소드를 새롭게 할당하므로, 모든 인스턴스들이 메소드의 수 만큼의 메모리를 차지하는 비효율적인 측면이 있다.

var Car = function(){
  var someInstance = {};
  someInstance.position = 0;
  someInstance.move = function(){
    this.position += 1;
  }
  return somInstance;
}

var car1 = Car();
var car2 = Car();
car1.move()

 

2. functional-shared instantiation

functional instantiation의 메모리 비효율성 문제를 개선한 방법이다. 인스턴스들이 공통적으로 지녀야하는 메소드들을 지닌 객체(someMethods)를 따로 만들고, 인스턴스는 메소드들의 메모리 주소만을 참조한다.

var Car = function(position){
  var someInstance = {
    position : position
  };
  extend(someInstance, someMethods);
  return someInstance;
};
var extend = function(target, source){
  for(let key in source){
    target[key] = source[key];
  }
};
var someMethods = {};
someMethods.move = function(){
  this.position += 1;
};

var car1 = Car(5);
var car2 = Car(10);

 

3. prototypal instantiation

특정 객체를 프로토타입(prototype)으로 하는 객체를 생성해주는 메소드인 Object.create(source)를 활용하는 방법이다.

var Car = function(position){
  var someInstance = Object.create(someMethods);
  someInstance.position = position;
  return someInstance;
};
var someMethods = {};
someMethods.move = function(){
  this.position += 1;
};
var car1 = Car(5);
var car2 = Car(10);

 

4. psuedoclassical instantiation

인스턴스를 생성할 때 new operator를 사용할 수 있도록 하는 방법이다.

var Car = function(position){
  this.position = position;
}
Car.prototype.move = function(){
  this.position += 1;
}
var car1 = new Car(5);
var car2 = new Car(10);

 

 

프로토타입(Prototype) 이해하기(2)