Instantiation Pattern은 JS로 무언가를 만드는 방법

객체를 생성하는 4가지 방법 :

• Functional
• Functional-shared
• Prototypal
• Pseudoclassical

Functional

: 함수 생성 → 함수 내에서 빈 객체를 만들고 속성과 메서드를 추가한 후 객체를 return한다.

• 장점: 이해하기 쉽다.
• 단점:
  1. 모든 메서드가 함수 내에 포함되어 있어서 매번 instance를 생성할 때마다 메모리에 메서드를 생성할 때마다 메모리에 메서드를 복제해야 한다.
  2. 메서드를 수정한 후 새 오브젝트를 작성하면 원래 오브젝트와 새 오브젝트가 다른 메서드를 참조한다.

let Animal = function(name) {
	let object = {};
    
    object.name = name;
    object.eat = function() {
    	// code goes here
    }
    
    return object;
}

let rabbit = Animal("토끼");
carrot.eat();

Functional-shared

: 함수 생성 → 함수 내에서 빈 객체를 만들고 속성 정의 → 다른 객체에 메서드를 정의해준 후 함수 내의 객체에서 주소값만 참조

• 장점: 메서드의 중복을 제거해서 메모리 관리 향상
• 단점: 메서드를 수정한 후 새 오브젝트를 작성하면 원래 오브젝트와 새 오브젝트가 다른 메서드를 참조한다.

let extend = function(object, method) {
	for(let key in method) {
		object[key] = method[key]
	}
}

let Animal = function(species, name) {
	let object = {};

	object.species = species;
  	object.name = name;

	extend(object, objMethod)

	return object;
}

let objMethod = {
	eat: function() {
		// code goes here
	}
  	
	sleep: function() {
    	// code goes here
    }
}

let tiger = Animal("호랑이", "호랑이");

tiger.eat();
tiger.sleep();

Prototypal

: prototype chain을 사용하여 객체를 만든다. (Object.create 사용)
별도의 객체에 모든 메서드를 작성 → 함수를 생성 → 함수 안에서 Object.create 메서드를 사용하여 메서드를 참조한다. → 함수 내부의 속성을 정의한 후 객체를 return

• 장점 :
  1) 메서드는 객체 내에서 반환되지 않고 객체의 prototype에 연결된다.
  2) 모든 메서드는 메모리에서 메서드를 복제하지 않고 작성된 모든 오브젝트에서 사용할 수 있다.
• 단점 : 메서드를 사용하려면 객체를 정의하고 메서드를 가지고 있는 객체를 prototype으로 하는 객체를 만들어 정의한 객체에 할당해준 다음 생성자 함수에서 return해야 한다.

let Animal = function(species, name) {
	let object = Object.create(objMethod);

  	object.species = species;
	object.name = name;

	return object;
}

let objMethod = {
	eat: function() {
		// code goes here
	}
  	
  	makeSound: function() {
      	// code goes here
    }
}

let tiger = Food("호랑이", "호랑이");

tiger.eat();
tiger.makeSound();

Pseudoclassical

-: 함수 생성 → this 키워드를 사용하여 속성 정의 → 메서드는 prototype에 정의 → 인스턴스 객체 만들 때 new 키워드 사용

• 장점 : Pseudoclassical Instantiation은 자바스크립트에 내장된 기능을 활용한 가장 최적화 된 객체 생성 방법
• 단점 : 디자인이 조금 복잡함

let Animal = function(species, name) {
  	this.species = species; // this 키워드 사용
	this.name = name;
}

Animal.prototype.eat = function() {
	// code goes here
}

Animal.prototype.makeSound = function() {
  // code goes here
}

let tiger = Food("호랑이", "호랑이"); // 라면을 먹는 중입니다.

tiger.eat();
tiger.makeSound();

ES6 등장 이후 Class, Subclass 개념의 등장으로 적극적인 객체 지향을 지원하기 전까지, OOP 구현에 가장 자주 쓰였던 방식은 Pseudoclassical 방식이다.

/ pseudo = 가짜의, 가짜로 class 개념을 흉내내는 방식. /

• 자식 생성자 함수 안에서 call/apply를 통해 부모 생성자 함수와 연결. 자식 생성자 함수의 prototype 객체를 Object.create 메서드를 통해 부모 생성자 함수의 prototype과 연결. 자식 생성자 함수의 constructor를 자기 자신으로 재할당.
• 부모 생성자 함수는 영향받지 않는 별개의 함수를 만들기 위해 얕은 복사를 해주는 Object.create()을 실행한다. (새로운 주소값을 가지고 새로운 프로토타입 객체 생성)

*apply(): fn.apply(thisArg, [argsArray]) / this 인자를 첫번째 인자로 받고, 두번째 인자로는 배열을 받음

Reference:
Instantiation Patterns in JavaScript