JS 객체 생성자 패턴

let maker = {
  name:"i'm maker",
  babo:"i'm babo",
  say:function(){
    console.log(this.name+"zz"+this.babo);
  }
}

자바스크립트의 객체는 위와같이 객체 리터럴로 생성하는 방법이 있다.

객체 리터럴의 key-value 구조에 값이나, 1급 객체 특성을 이용해서 함수를 바인딩 하여 객체를 구조화 하는 방법이다

이런 객체 리터럴을 이용하여 객체를 만드는 코드는 아마 다음과 같을 것이다.

function makeObject(name,babo){
  return{
    name,
    babo,
    say:function(){
      console.log(this.name+"zz"+this.babo);
    }
  }
}

let object1 = makeObject('zz','melong');
let object2 = makeObject('gg','melllong');

이 코드에서는 문제점이 있다.
object1, object2는 서로 다른 객체라는것은 맞다. 이것은 우리가 의도한 바이다.
하지만 객체의 메소드 say또한 서로 다른 함수로 인지한다는 것이다.

2개의 객체를 생성하면 2개의 서로 다른 메소드를 생성한다는 의미가 된다. 이는 브라우저 메모리 낭비로 직결되기 때문에 좋지 않다.

이러한 패턴을 없애는 방법이 객체 생성자 패턴 Prototype이다.

function makeObject(name,babo){
  this.name = name;
  this.babo = babo;
}
makeObject.prototype.say=()=>{
  console.log(this.name+"zz"+this.babo);
}

자바스크립트는 현재 객체에 존재하지 않는 값이 호출되면, prototype chaining을 따라 탐색하는 성질을 가지고 있다.

이런 식의로 객체 생성자 패턴의 prototype에 함수를 지정하게 되면 추가로 메소드를 생성하는데 자원을 쏟지 않고 프로토타입에 있는 함수를 사용하기 때문에 조금 더 효율적인 코드가 될 수 있다.

ES6 Class가 있는데 왜 이런걸 쓰지?

사실 ES6 class가 객체 생성 패턴의 suger Syntax이다 ..

알아두면 좋다!