[Javascript] 함수에 bind()가 안 묶인 경우

현상

var tabUI = {
    controller :
    {  
        ajaxProduct: function(){
            console.log(this);
        }.bind(tabUI)
    }
}
tabUI.controller.ajaxProduct(); //return : Window
tabUI.controller.ajaxProduct.bind(tabUI)(); // return : Window

위처럼 tabUI로 bind를 했음에도 결과는 Window가 나왔습니다.

 

원인

자바스크립트의 위 과정 작동 과정은 다음과 같습니다.

1.객체초기화
2.변수에 객체 할당

{a : 1, ....} 는 객체는 초기화하는 literal입니다.
따라서 객체를 초기화하는 중에는 tabUI가 존재하지 않습니다...

해결

고민 중입니다.. controller라는 property를 따로 만들어서 함수를 관리해주고 싶은데 tabUI를 초기화 중에 못넣습니다. 위와 같은 이유 또는 this를 넣는다 하더라도 controller가 this가 되기 때문입니다. 따라서 나중에 초기화하도록 만들어야 하는데 이러면 같은 역할을 하는 값들이 한 군데로 못 묶기 때문에 지저분해질 수 밖에 없죠...

후... 자바스크립트는 특히나 사람들이 어떻게 하는지좀 봐야겠습니다. 관련 서적좀 구매해야겠어요

자바스트크립트는 코드 스타일이 너무 다양해질 수 밖에 없는 것 같습니다...