Instantiation Patterns

Instantiation Patterns(인스턴스를 만드는 과정)

4가지 Class 선언 방식

1. Functional

2. Functional Shared

3. Prototypal

4. Pseudoclassical

 

1. Functional Instantiation 방식 (자동차 공장을 만들어 보자)

(1) 함수 실행했을 때, 찍어내 줄 객체를 선언
(2) someInstace의 position을 0으로 초기화, Car 함수가 실행되어 나온 인스턴스의 postion이 초기값은 항상 0
(3) someInstance에 move라는 메소드를 추가. function 내부에 있는 this는 someInstace를 뜻함
     this.position은 someInstance.position과 같고, 실행시 position 값이 1만큼 증가할 것이다.
(4) return을 해주어야 함수의 결과로 객체가 나옴
(5) car1.move()를 실행한 후 
(6) car1을 console.log로 찍어보면 postion이 1인 것을 확인

var Car = function() {
  var someInstace = {}; // (1)
  someInstace.position = 0; // (2) 
  someInstace.move = function() { // (3)
    this.position += 1;
  }
  return someInstace;  // (4)
};

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

console.log(car1) // (6) {position: 1, move: ƒ}

초기 위치를 지정해 줄 수도 있다.

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

var car1 = Car(5);

---

2. Functional Shared 방식 (자동차 공장을 만들어 보자)

(1) Car 함수를 선언해 준다. someInstance의 property로 position으로 넣어줬다.

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

(2) 메소드를 담아줄 객체를 생성한다. 모든 메소드는 someMethods에 담을 것! (이 예제는 move 함수 하나밖에 없지만...)

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

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

(3) someInstace와 someMethods를 합치는 extend함수를 만들어서 Car함수 내부에 합친다.

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

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

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

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

 

왜 이런 방식을 사용할까? 

=> 이전의 Functional 방식은 instance를 생성할 때마다 모든 메소드를 someInstace에게 할당하므로

각각의 인스턴스들이 메소드의 수 만큼의 메모리를 더 차지하기 때문이다.

반면, Functional Shared 방식은 someMethods라는 객체에 있는 메소드들의 메모리 주소만을 참조하기 때문에 메모리 효율 좋음

 

Functional 방식과 Functional Shared 방식 비교

3개, 4개의 인스턴스라서 메모리 차이는 얼마나지 않아보이지만, 만약 큰 프로젝트라면 차이가 많이 날것같다.

---

3. Prototypal

(1) Functional Shared 방식과 비슷하다. {}만 바꿔보자

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

var Car = function(position) {
  var someInstace = {}; // (1) 이 부분 => {} 
  someInstance.position = position;
  return someInstance;
};

(2) Object.create 는 특정 객체를 프로토타입을 하는 객체를 생성해 주는 함수

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

var Car = function(position) {
  var someInstace = Object.create(someMethods); // (2)
  someInstance.position = position;
  return someInstance;
};

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

 

 

Object.create()

---

4. Pseudoclassical

(1) 메소드 프로토타입으로 만든다.

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

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

(2) 찍어낼 때는 new operator를 붙여야 된다. 가장 많이 쓰이는 방식이라 한다.

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

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

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

 

• OOP(Object Oriented Programming)가 무엇인지?
• JavaScript에서 Object를 생성하는 여러가지 방법들
• JavaScript에서 Prototype은 무엇이고 왜 사용해야 하는지?