javascript - 在 jquery 事件中引用 javascript 对象

Question

我有这个代码。

var NotificationsBox={
    HideNotificationBox:function()
    {
          document.getElementById("NotificationBox").style.visibility="hidden"; 
    },
    toggleNotificationBox:function()
    {
        $('#NotificationBox').toggle();             
    },
    SetContainerClick_NotificationHide_Event:function()
    {
        $('#Container').click(this.HideNotificationBox);        
    },
    SetNotificationBoxClick_NotificationToggleEvent:function()
    {
        $('#ShowNotification').click(function(){
            $(this).html("0");
            $(this).css("background-color","#000");

            this.toggleNotificationBox();     ///  <-- PROBLEM
        });
    }

};

NotifyBox=Object.create(NotificationsBox);
NotifyBox.HideNotificationBox();
NotifyBox.SetContainerClick_NotificationHide_Event();
NotifyBox.SetNotificationBoxClick_NotificationToggleEvent();

现在您可以看到问题出在哪里了。这里 this 将引用 #ShowNotification，我想在这里引用 NotificationBox 以便我可以调用该函数。

Answer 1

在绑定(bind) click 之前保存对 this 的引用，并在 click 中使用此引用而不是 this事件处理程序:

SetNotificationBoxClick_NotificationToggleEvent:function()
{
    var self = this;
    $('#ShowNotification').click(function(){
        $(this).html("0");
        $(this).css("background-color","#000");

        self.toggleNotificationBox(); //  <-- self will refer to NotificationsBox
    });
}

或者，作为替代方案，使用 NotificationsBox.toggleNotificationBox()，但如果您碰巧更改了变量 NotificationsBox 的名称，这将停止工作:

SetNotificationBoxClick_NotificationToggleEvent:function()
{
    $('#ShowNotification').click(function(){
        $(this).html("0");
        $(this).css("background-color","#000");

        NotificationsBox.toggleNotificationBox();
    });
}