7. Inheritance Patterns - Instantiation Patterns

1. Instantiation이란

Instantiation은 인스턴스를 만드는 과정을 말한다. 

ES6의 class 개념이 나오기 전에 JavaScript를 객체지향적으로 사용하려는 많은 노력이 있었다. 이 여러 방법들에  대해 알아보고자 한다. 

 

2. Functional Instantiation 방식의 Instantiation

이 방식은 말 그대로 function(함수)를 이용해서 class에서 instance를 찍어내는 방식이다. 

ex)

var Car = function(){              1st. Car라는 함수를 만들어준다. 

    var someInstance = {}; 2nd. 이 함수를 실행했을 때, 만들 instance 객체를 선언하다.

    someInstance.position = 0; 3rd. Car함수가 실행되었을 때 만들어진 instance 객체의 property를 선언 및 초기화해준다. 

    someInstance.move = function(){  4th. Car함수가 실행되었을 때 만들어진 instance 객체의 method를 선언 및 초기화해준다

          this.position++; 이때, method의 parameter를 외부에서 받아온는거면 function(parameter선언) 해주어야하고,

그게아니라 Car함수가 실행되었을 때 만들어진 instance의 정보를 쓰는거면, this를 써서 Car함수가 실행되었을 때 만들어진 객체의 정보라는걸 표시해준다. 다시말해 여기서 this.position은 someInstance.position과 같다. 

    }

   return someInstance; 이 객체를 return 해주어야 함수 실행결과로 찍혀서 만들어진 instance가 나오므로 return도 해준다. 

}

var Car = function(){

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

3. Functional Shared 방식의 Instantiation

ex)

var Car = function(){              1st. Car라는 함수를 만들어준다. 

    var someInstance = {

               someInstance.position = 0; 3rd. Car함수가 실행되었을 때 만들어진 instance 객체의 property를 선언 및 초기화해준다. 

     };2nd. 이 함수를 실행했을 때, 만들 instance 객체를 선언하다.

}

4th. 그리고 함수 밖에 method를 담아줄 객체를 생성한다. 

var someMethods = {};

그리고 이 객체에 메소드를 만들어준다.

someMethods.move = functionn(){

      this.position++;

}

5th. 그리고 someInstance와 someMethods를 합치는 extend함수를 만들어서 Car함수 내부에서 합쳐준다. 

최종적으로 아래와 같이 된다. 

var extend = function(to, from){
	for(var key in from){
    	to[key] = from[key];
    }
};

var someMethods = {};
someMethods.move = function(){
	this.position++;
};

var Car = function(position){
	var someInstance = {
    	position: position,
    };
   	extend(someInstance, someMethods);
    return someInstance;
};

그러면 왜 이렇게 method를 담는 객체를 따로 만들어서 나중에 합치는 번거로운 과정을 하는 것일까? 다시말해, Functional Instantiation방식과 Function Shared 방식의 차이는 뭔가

=> Functional 방식은 인스턴스를 생성할 때마다 모든 메소드를 someInstance에게 할당하므로, 각각의 인스턴스들이 메소드의 수 만큼의 메모리를 더 차지하기 때문이다. 반면 Functional Shared 방식은 someMethods 객체에 있는 메소드들의 메모리 주소만을 참조하므로 메모리 효율이 좋다. 

출처: codestatess

4. Prototypal Instantiation 방식의 Instantiation

var Car = function(){             1st. Car라는 함수를 만들어준다. 

    var someInstance = Object.create(someMethods); 2nd. 이 함수를 실행했을 때, 만들 instance 객체를 선언하다.

    someInstance.position = 0; 3rd. Car함수가 실행되었을 때 만들어진 instance 객체의 property를 선언 및 초기화해준다. 

   return someInstance; 이 객체를 return 해주어야 함수 실행결과로 찍혀서 만들어진 instance가 나오므로 return도 해준다. 

}

4th. 그리고 함수 밖에 method를 담아줄 객체를 생성한다. 

var someMethods = {};

그리고 이 객체에 메소드를 만들어준다.

someMethods.move = functionn(){

      this.position++;

}

Functional Instantiation 방식의 Instantiation에서

var someInstace = {};를

var someInstance = Object.create(someMethods);로 바꿔준 것이다. 

var Car = function(){             

    var someInstance = Object.create(someMethods);

    someInstance.position = 0; 
    
    return someInstance; 
}

var someMethods = {};

someMethods.move = functionn(){
      this.position++;
}

 

Object.create란?

Object.create는 특정 객체를 prototype으로 하는 객체를 생성해주는 함수이다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/create

Object.create()

https://poiemaweb.com/js-object-oriented-programming

Object-Oriented Programming | PoiemaWeb

5. Pseudoclassical 방식의 Instantiation

pseudoclassical방식의 Instantiation은 ES6 class 와 내부적으로 정확히 동일한 원리로 작동한다. 

 

pseudoclassical방식에서는 property는 function안에 선언해주고,  method는 prototype을 이용해서 선언한다. 그리고 위의 방식과 다르게 instance를 만들 때, new 를 붙여서 생성해준다. 

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

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

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

Car함수를 사용할 때 앞에 new를 붙이면, instance 객체를 생성하고 그 객체의 속성이 기본적으로 각각 car1.position=5, car2.position=10으로 setting된 instance가 return된다. 

이때의 function Car에서 function은 일반적인 함수가 아니라 생성자(constructor)가 되는 것이다. 

 

다른 예시를 살펴보면,

 

6. ES6 방식의 Instantiation

ES6에서는 class 생성은 class 키워드를 쓰고,

property는 constructor(){ 안에,

method는 function(){~ 이런 거 없이 바로 함수명(){~}을 쓰면 된다. 

 

위의 마지막 Pseudoclassical 방식예시를 ES6로 바꿔보자.