🤔 Instantiation Patterns / 그대 class가 없던 시절을 기억하는가?🙁

2020. 9. 10. 01:25기초 Java Script

ES6 문법 이전에는 JavaScript를 객체지향적으로 사용하기 위한 다양한 시도가 있었습니다. Instantiation는 인스턴스를 만드는 과정으로 class와 같이 청사진으로 만들어서 코딩을 할 때 사용되었다고 합니다. 


1. Functional

Var Cooking = function(ingredient){
  var cookingInstnace = {};
  cookingInstance.ingredient = ingredient;
  cookingInstance.bake = function(){
    this.ingredient + 'yummy bake';
  }
  return cookingInstance;
};

var cooking1 = Cooking('flour');

함수를 선언에서 그 안에 객체를 만들고 필요한 데이터와 메소드를 저장하는 방식!  ingredient에 어떤 재료를 넣어도 원하는 메소드로 요리를 하면 원하는 값을 얻을 수 있습니다! 
 # 함수를 선언 -> 객체를 만들고 -> 메소드로 사용할 함수를 객체에 담고 -> 객체를 출력

2. Functional Shared

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

var cookingMethods = {};
cookingMethods.fry = function(){
  this.chicken += 1;
};

var KFC = function(num){
  var storage = {
    chicken : num
  };
  extend(KFC, cookingMethods);
  return storage;
};

var KFC잠실점 = KFC(26);

함수 공유 형태는 객체 함수와 메소드 함수를 따로 선언한 다음에 extend라는 함수를 통해서 합치는 과정을 가집니다. 이렇게 할 경우1번의  Functional 과 다르게 매번 새로운 객체를 만들 때마다 메소드를 위한 메모리를 할당하는 것이 아니라 cookingMethods라는 한 주소를 공유하기 때문에 메모리 효율이 좋아집니다. 


3. Prototypal


var cookingMethods = {};
cookingMethods.fry = function(){
  this.chicken += 1;
};

var KFC = function(num){
  var storage = object.create(cookingMethods);  // 여기만 바꿔준다!
  storage.chicken = num;
  return storage;
};

var KFC잠실점 = KFC(26);

Prototypal은 2번과 비슷하지만 storage라는 객체를 선언하는 것이 아니라 'Object.create'를 통해서 특정 객체를 프로토타입으로 가지는 객체를 만들 수 있다. XX.prototype = XX과 다른 점은  새로운 프로토타입 객체를 복사해서 만들기 때문에 한 쪽을 변경한다고 해서 주소로 있는 프토로타입 객체에 변화가 안 생긴다는 것이다. 


4. Proseudoclassical

var KFC = function(num){
  this.chicken = num;
};

KFC.prototype.cookingMethods = function() {
  this.chiken +=1;
};

var KFC마포점 = new KFC(27);

BlinkyDancer.prototype = Object.create(Dancer.prototype);

BlinkyDancer.prototype.constructor = BlinkyDancer; 를 통해서 새로만든 프로토타입의 모체의 프로토타입을 복사하고 연결하는 과정도 잊지마!