javascript - 将事件绑定(bind)到对象内的函数

Question

我在 jQuery/JS 方面遇到了一个特殊的问题。

我正在处理一个 JS 文件，它可以让我为客户端站点创建 portlet。我使用 SignalR 向用户传达更改。

下面的代码让我有点头疼，为什么它不起作用。

Eenheden: function (poPortlet) {
        this.moPortlet = poPortlet;
        this.Init = function () {
           $(this.moPortlet).find('.portlet-title').text($(this.moPortlet).attr('data-cpv-type') + ' Eenheden')
        };
        this.BindHub = function () {
           CPV.moHub.on('onEenheidUpdate', this.Events.Update);
        };
        this.Events = {
           Update: function (pnId, psStatus) {
              CPV.Log('Error', 'Update: ' + pnId + ' ' + psStatus);
           }
        };
     }

我正在尝试将函数 this.Events.Update 绑定(bind)到 SignalR 事件 onEenheidUpdate 上。这些 Eenheiden 对象的实例在页面上并不唯一。这个想法是它们包含相同的数据，但可以进行过滤，根据某些配置创建不同的 portlet。

我的问题是 onEenheidUpdate 函数没有触发正确的事件。我想这样做，这样我就可以使用为唯一对象设置的引用，例如我在初始化时设置的 jQuery 对象。

Answer 1

问题

您的问题是，当 jQuery 或 javascript 通常触发事件回调时，“上下文”(this 的值)会发生更改。例如

var MyModule = {
    init: function () {
        $('.amazing-element').on('click', function () {
            // This breaks because `
            // `this` is not MyModule
            // When the callback is triggered
            // `this` is `<p class="amazing-element"></p>`
            this.onClick()
        })
    },
    onClick: function () {
        console.log('wee, I was clicked')
    }
}

Function.prototype.bind来救援!

var MyModule = {
    init: function () {
        $('.amazing-element').on('click', function () {
            this.onClick()
        }.bind(this))
        // ^ here we bind the context of the callback to the
        // correct version of `this`.
    },
    onClick: function () {
        console.log('wee, I was clicked')
    }
}

所以你的确切示例如下所示:

Eenheden: function (poPortlet) {
    this.moPortlet = poPortlet;
    this.Init = function () {
       $(this.moPortlet).find('.portlet-title').text($(this.moPortlet).attr('data-cpv-type') + ' Eenheden')
    };
    this.BindHub = function () {
       CPV.moHub.on('onEenheidUpdate', this.Events.Update.bind(this));
                                                      // ^ change here
    };
    this.Events = {
       Update: function (pnId, psStatus) {
          CPV.Log('Error', 'Update: ' + pnId + ' ' + psStatus);
       }
    };
 }