此关键字 *within* Javascript 模块

Question

我正在创建一个 Javascript 模块，其任务基本上是通过单击按钮通过 Ajax 动态生成一个打开模式。这个按钮有一个数据属性，我传递给 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 方法。我怎么做？

现在 this 总是引用 modalwindow 对象，实际上 openModal 有效；但是 modal_id 参数是错误的，因为其中 this 应该指的是按钮。

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

Answer 1

您在设置处理程序时已经绑定了 this，因此 ajaxCall 中的 this 将引用模式 window。所以接受 ajaxCall:

中的事件参数

ajaxCall: function(e) {

...然后在需要按钮的地方使用 e.currentTarget，在需要模式 window 的地方使用 this。在事件处理程序中，e.currentTarget（和 this）均指代处理程序所连接的元素（与 e.target 相对，后者指的是事件的目标元素，这可能是 e.currentTarget).

的后代