TIL_Instantiation Patterns

자바스크립트의 Class는 공장의 역할을 수행하는 상당히 편리한 기능이다.
그런데 이런 Class 기능이 없었을 때에는 어떻게 했을까?
당시 Class 기능을 대체한 4가지 방법이 있다. 이를 두고 Instantiation Patterns라고 한다.
​
Instantiation Patterns는 class가 왜 나오게 되었는지 알기 위해 배우는 의미가 있다.
Class에 비해 어떤 점이 불편한 지 어떤 부분이 나은지 등등.
또한 예전에 짜여진 코드 중에서 class로 만들어지지 않은 코드를 이해하는 데
도움이 될 것이다.
​
지금부터 Instantiation Patterns에 대해 알아보자.

1. Functional

var Farm = function(){ // 1.Farm이라는 함수를 만든다(농장)
    var fruitBox = {}; // 2.함수를 실행했을 때, 찍어내 줄 객체를 선언한다(과일상자).
    fruitBox.label = 0; // 3. fruitBox의 label을 0으로 초기화한다. Farm 함수가 실행되어 나온 label의 초기값은 항상 0.
    fruitBox.package = function(){ // 4.fruitBox에 label이라는 메소드를 추가한다. function 내부의 this는 fruitBox를 의미하므로 this.label = fruitBox.label. 
        this.label += 1;           //   실행시 label의 값이 1만큼 증가.
    }
    return fruitBox;  
};

var fruit1 = Farm(); // 이제 fruit들을 출하할 수 있다.
var fruit2 = Farm();
fruit1.package(); 

​
fruit1.package()를 실행한 후 fruit1을 console.log로 찍으면 lavel의 값이 1인 것을 알 수 있다.

console.log(fruit1)
//{label: 1, move: ƒ}

초기 위치를 처음부터 지정하는 것 역시 가능하다.

var Farm = function(label){ // parameter로 label을 넣은 모습.
    var fruitBox = {}; 
    fruitBox.label = label; // fruitBox.label에 label을 전달
    fruitBox.package = function(){ 
        this.label += 1;           
    }
    return fruitBox;  
};

var fruit1 = Farm(); 

2. Functional Shared

var extend = function(to, from){ // 3. 그리고 fruitBox와 someMethods를 합치는 extend함수를 만들어서 Farm 함수 내부에서 합친다.
  for (var key in from){
    to[key] = from[key];
  }
}

var someMethods = {};  // 2. 메소드를 담아줄 객체를 생성한다. 모든 메소드를 담는 역할을 한다.
someMethods.package = function() {
  this.label += 1;
};

var Farm = function(label){ // 1. 먼저 Farm 함수를 선언한다. label을 fruitBox에 property로 넣어준다.
    var fruitBox = {
      label: label,
    };
    extend(fruitBox, someMethods); // 3
    return fruitBox;  
};

위와 같은 방법을 사용하는 이유는 functional 방식은 모든 메소드를 fruitBox에 할당하기 때문에 메모리를 그만큼 더 사용한다.

하지만 functional shared 방식은 someMethods 라는 객체에 있는 메소드들의 메모리만 사용하기에 효율이 좋다.

(메모리 용량을 효율적으로 사용할 수 있다.)

3. Prototypal

var someMethods = {};  // 1. 먼저 Functional Shared 방식과 비슷하게 작성한다.
someMethods.package = function() {
  this.label += 1;
};

var Farm = function(label){
    var fruitBox = Object.create(someMethods); // 2. 기존의 {}를 Object.create(someMethods)로 바꿔준다. 
    fruitBox.label = label;
    return fruitBox;  
};

Object.create는 특정 객체를 프로토타입으로 하는 객체를 생성해주는 함수이다. 생성된 객체가 someMethods를 프로토타입으로 하고 있기 때문에 프로토타입 체인에 의하여 package 함수의 기능을 갖는다. 그래서 fruitBox는 this.label += 1의 기능을 수행할 수 있다.

4. Pseudoclassical

var Farm = function(label) { // 코드를 작성하고, 메소드를 프로토타입으로 만든다.
  this.label = label;
};

Farm.prototype.package = function(){
  this.position += 1;
};

var fruit1 = new Farm(5);
var fruit2 = new Farm(10); // 찍어낼 때 new 키워드를 붙여야 한다.

찍을 때 new 키워드를 붙여야 한다.