这个关键字*在* Javascript模块中

Question

我正在创建一个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方法中，我需要 this 关键字来引用两个不同的东西：我在设置modal_id参数时需要它来引用按钮;我需要它来引用modalwindow对象来成功调用openModal方法。我怎么做？

现在这个总是引用modalwindow对象，实际上openModal有效;但是modal_id参数是错误的，因为在那里这个应该引用按钮。

我是Modular JS的新手，这让我发疯了。我发现了类似的问题，但似乎都没有解决模块中所有方法的问题。

Answer 1

在设置处理程序时，您已经绑定this，因此this中的ajaxCall将引用模态窗口。所以接受ajaxCall中的事件参数：

ajaxCall: function(e) {

...然后在需要按钮的地方，使用e.currentTarget，以及需要模态窗口的地方，使用this。在事件处理程序中，e.currentTarget（和this）都引用处理程序连接的元素（而不是e.target，它指的是事件所针对的元素，可能是e.currentTarget）的后代。