[JS] Object - 4 Instantiation Pattern in JavaScript

junyong92·2019년 11월 17일
0

JavaScript

목록 보기
3/5

자바스크립트(JavaScript)에는 클래스(Class)라는 개념이 없다. 그럼에도 불구하고 자바스크립트가 객체지향 언어인 이유는 다른 방법으로 클래스의 기능을 구현해서 사용했기 때문이다. 지금은 클래스 키워드를 사용할 수 있지만, 그 전에는 4가지 방법으로 그 기능을 대체했다.

functional instantiation

functional instantiation 은 호출 될 때마다 새로운 인스턴스(객체)를 반환하는 함수이다. 클래스의 기능은 할 수 있지만 인스턴스를 만들 때 마다 모든 메소드를 새롭게 할당하므로, 모든 인스턴스들이 메소드의 수 만큼의 메모리를 차지하는 비효율적인 측면이 있다.

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

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

functional-shared instantiation

functional instantiation의 메모르 비효율성 문제를 개선한 방법이다. 인스턴스들이 공통적으로 지녀야하는 메소드들을 지닌 객체(someMethods)를 따로 만들고, 인스턴스는 메소드들의 메모리 주소만을 참조한다.

var Car = function(position){
  var someInstance = {
    position : position
  };
  extend(someInstance, someMethods);
  return someInstance;
};
var extend = function(target, source){
  for(let key in source){
    target[key] = source[key];
  }
};
var someMethods = {};
someMethods.move = function(){
  this.position += 1;
};

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

prototypal instantiation

특정 객체를 프로토타입(prototype)으로 하는 객체를 생성해주는 메소드인 Object.create(source)를 활용하는 방법이다.

var Car = function(position){
  var someInstance = Object.create(someInstance);
  someInstance.position = position;
  return someInstance;
};
var someMethods = {};
someMethods.move = function(){
  this.position += 1;
};
var car1 = Car(5);
var car2 = Car(10);

psuedo classical instantiation

인스턴스를 생성할 때 new operator를 사용할 수 있도록 하는 방법이다.

var Car = function(position){
  this.position = position;
}
Car.prototype.move = function(){
  this.position += 1;
}
var car1 = new Car(5);
var car2 = new Car(10);

0개의 댓글