이 키워드 * 자바 스크립트 모듈 내

Question

기본적으로 버튼 클릭으로 Ajax를 통해 열린 모달을 동적으로 생성하는 Javascript 모듈을 만들고 있습니다. 이 버튼에는 Ajax 호출에 전달하는 데이터 속성이있어서 어떤 모드를 열 것인지를 알려줍니다. 여기

모듈의 단순화 된 버전입니다 :

(function() { 

let modalwindow = { 

    init: function() { 
     this.bindEvents(); 
    }, 

    bindEvents: function() { 
     $(document).on('click', '[data-action="open-modal"]', this.ajaxCall.bind(this)); 
    }, 

    ajaxCall: function() { 

     $.ajax({ 

      url: ajax.url, 
      type: 'post', 
      context: this, 
      data: { 
       modal_id: this.modalID, // In this case, I need *this* to refer to the button 
       action: 'open_modal' 
      }, 
      success: function (response) { 

       // In this case, I need *this* to refer to the modalwindow object 

       this.openModal(response, this.modalID); 

      } 

     }); 

    }, 

    openModal: function(response, modalID) { 

     $(response).appendTo(Body).attr('data-state', 'active-modal'); 

    } 

} 

modalwindow.init(); 

})() 

문제는 ajaxCall 방법 나는 다른 두 가지 참조하기 위해 이 키워드를 필요로한다 : 나는 버튼을 할 때 참조 할 필요 modal_id 매개 변수를 설정했습니다. 성공하려면 openModal 메서드를 호출하려면 modalwindow 객체를 참조해야합니다. 어떻게해야합니까?

지금은 이은 항상 modalwindow 개체를 참조하며, 실제로는 openModal 작품입니다. 하지만 거기에 이 버튼을 참조해야하기 때문에 modal_id 매개 변수가 잘못되었습니다.

저는 Modular JS에 매우 익숙하며 이것은 나를 미치게했습니다. 비슷한 질문을 찾았지만 아무도 모듈 내의 모든 메소드에 대해 문제를 해결하지 못하는 것 같습니다.

Answer 1

핸들러를 설정할 때 이미 this을 바인딩하고 있으므로 this의 ajaxCall은 모달 창을 참조합니다.

ajaxCall: function(e) { 

을 ... 그리고 버튼을 필요로하는 곳에 다음, e.currentTarget을 사용하고, 모달 창을 필요로하는 곳에, this를 사용 : 그래서 ajaxCall에서 이벤트 인수에 동의합니다. 이벤트 처리기에서 e.currentTarget (및 this)은 모두 처리기가 연결 된 요소를 참조합니다 (e.target은 이벤트 대상이 된 요소이며 e.currentTarget의 자손이 될 수 있음).