4 Instantiation Patterns in JavaScript

Instantiation Patterns

ES6 class 키워드가 나오기 전, 클래스(class)라는 개념이 없는 자바스크립트를 객체지향으로 사용하기 위한 다양한 시도가 있었다. Instantiation은 말 그대로 인스턴스를 만드는 과정에 관한 내용을 다루며 4가지 방법이 있다.

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

var Car = function() { 
    var someInstance = {};
    someInstance.position = 0; //초기화
    someInstance.move = function() {
        this.position += 1; 
    }
    
    return someInstance; 
};
var car1 = Car();
var car2 = Car();
car1.move

• Functional-shared
  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);

• prototypal
  특정 오브젝트를 프로토타입(prototype)으로 하는 오브젝트를 생성해주는 Object.create(proto)을 활용하는 방법이다. 매개변수 proto는 새로 만든 오브젝트의 프로토타입이어야 할 오브젝트.

var someMethods = {};
someMethods.move = function() {
    this.position += 1; 
};
var Car = function(position){
  var someInstance = Object.create(someMethods)
    SomeInstance.position = position;

  return someInstance;
};
var car1 = Car(5);
var car2 = Car(10);

• pseudoclassical
  인스턴스를 생성할 때 new 키워드를 사용할 수 있도록 하는 방법이다.

var Car = function(position) {
    this.position = position;   
}

Car.prototype.move = function(){
  	this.position += 1; 
}

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

Reference
Object-oriented Programming in JavaScript: Made Super Simple | Mosh
모던 JavaScript 튜토리얼
MDN