<aside> 💡 팩토리 패턴과 팩토리 메서드 패턴은 다른것이다. 팩토리 패턴은 객체 자체가 부품인 공장인것이다. 그 공장에 어떤 부품(객체)주세요 ~ 했을때 그 부품을 내어준다.

반면에 팩토리 메소드 패턴은 부품 자체를 만드는 일이다. 이 부품에 이런이런 재료들이 필요해요~

해서 넘겨주면 그 부품을 만들어준다.

단위가 다른것이다.

</aside>

클래스

class TodoModel {
    constructor(){
				//멤버 변수 2개 정의(public)
        this.todos = [];
        this.lastChange = null;
    }
		//메소드 3개 정의 (public)
    addToPrivateList(){}
    add() {}
    reload(){}
}

팩토리 메소드 패턴

function TodoModel(){
		//Private 영역
    var todos = [];
    var lastChange = null;
        
    function addToPrivateList(){}
    function add() {}
    function reload(){}
 		//Private 영역
   
    return Object.freeze({
        add, //public
        reload //public
    });
}

<aside> 💡 Object.freeze → 인자로 넘겨진 객체와 그 객체의 프로토타입의 속성 변경을 금지시키는 메소드 → freeze된 인자 객체를 리턴함

</aside>

클래스의 문제점1 - 캡슐화불가능

• 팩토리 메서드 패턴을 사용하면 Private영역과 Public영역을 구분해 줄 수 있다. → 내가 공개 하고 싶은 메소드만 선택적으로 공개 할 수 있다.(add, reload)
• 클래스를 사용해서 객체를 만들면 private변수와 public변수를 구분할 수 없다. → 캡슐화가 불가능하다.

클래스의 문제점2 - this, context소실문제

class TodoModel {
    constructor(){
        this.**todos** = [];
    }
    
    reload(){ 
        setTimeout(function log() { 
           console.log(**this.todos**);
        }, 0);
    }
}
todoModel.reload(); // undefined 출력, 콜백 내에서 context 소실

• reload메소드를 호출하면 setTimeout이 실행되고 첫번쨰 콜백인 log함수가 호출된다. 하지만 이때, log 함수 내부에서의 this는 window객체를 가리킨다. reload내부에서의 this는 TodoModel 객체를 가리키겠지만, 콜백함수에서는 this가 TodoModel로 유지 되지 않는다. → context가 소실되었다고 표현한다
• 반면에 다음과 같이 팩토리 패턴에서는 스코프 체인에 의한 변수 참조에 의해서 상위 함수에 선언한 변수가 하위 함수들에도 유지 된다.

function TodoModel(){
    var **todos** = [];
        
    function reload(){ 
        setTimeout(function log() { 
           console.log(**todos**);        //[]
       }, 0);
    }
}
todoModel.reload();                   //[]
$("#btn").click(todoModel.reload);    //[], 

• 심지어, 위와 같이 버튼 클릭에 의한 이벤트 핸들러에서도 컨텍스트가 유지된다.

물론 클래스 키워드에서도 이런 문제들을 해결할 수 있다.

arrow function 활용