对象内部的 Javascript/jQuery 事件处理程序范围使用关键字 this

Question

几天来我一直在努力解决这个问题。我已经阅读了很多关于 SO 的问题，并以多种不同的方式用谷歌搜索了它，并阅读/尝试了我发现的所有内容。到目前为止，我没有发现任何对我有用的东西，而且我已经重写了我的代码一百万次，它似乎在尝试不同的方法来做到这一点。

我觉得我在这里遗漏了一些非常明显的东西，也许只需要朝着正确的方向插入。如果我的做法完全错误并且需要重组所有内容，我也可以这样做。

基本上我正在使用的是一个前端“ Controller ”(找不到更好的词)，它初始化一些变量，设置一些事件监听器并响应用户操作。

我不关心我是使用 jQuery 还是纯 JavaScript，我只希望它能工作，即使我必须重写整个东西。我的目标是重负载下的速度和性能。我考虑的另一个选择是 node.js，但我对此经验有限，所以希望用 jQuery 来解决。

当页面加载时，我没有收到错误，但是当我单击其中一个已设置事件监听器的项目时，我收到错误... TypeError: Cannot Read Property 'apply'未定义的。 它指的是以 var scope = this 开头的相应行？函数(e)...

该行的目的是让 this 关键字引用 Controller 对象，这样我就可以从事件处理程序方法中调用对象方法。虽然看起来它可能没有按我的预期工作。

我尝试只使用 .on 来设置点击和更改处理程序，但我也遇到了范围问题。再次感谢您的帮助。

(function ($) {
    $(function () {  //document ready

        function Controller(authId, authKey) {

            this.user.id = authId;
            this.user.key = authKey;

            this.init();
        };


        Controller.prototype = {

            eventChange: [ "amt", "multi" ],
            eventClick: [ "double", "half", "high", "low" ],

            event: { refresh: ['amt', 'multi'], update: ['double', 'half'], process: ['high', 'low'] },

            user: { id: '', key: '', name: '', balance: '' },

            init: function () {

                this.initEvents();
           },
            initEventz: function() {

                for (var i = 0; i < this.eventChange.length; i += 1) {

                    var ele = document.getElementById(this.eventChange[i]);

                    var scope = this ? function(e) { this.handleEvent.apply(this, ["change"]); } : this.handleEvent;

                    if(document.addEventListener) {
                        ele.addEventListener("change", scope, false);
                    } else if(document.attachEvent) {
                        ele.attachEvent("onchange",  scope);
                    }
                }

                for (var i = 0; i < this.eventClick.length; i += 1) {

                    var ele = document.getElementById(this.eventClick[i]);

                    var scope = this ? function(e) { this.handleEvent.apply(this, ["click"]); } : this.handleEvent;

                    if(document.addEventListener) {
                        ele.addEventListener("click", scope, false);
                    } else if(document.attachEvent) {
                        ele.attachEvent("onclick",  scope);
                    }  
                }
           },
           handleEvent: function (e) {

              var eventId = e.target.id;

              for (var event in this) {
                    if (this.hasOwnProperty(event)) {

                           console.log(event);
                    }
              }
          }
        };
       var Controller = new Controller($("#auth").val(), $("#key").val());


    }); //end document ready

})(jQuery);

Answer 1

您正在丢失对此的引用。

你可以用这段代码解决这个问题:

var scope = this ? function(e) { this.handleEvent.apply(this, ["click"]); }.bind(this) : this.handleEvent;

但是如果您希望处理程序可以通过引用 this 访问其范围内的元素，您应该这样写:

var scope = this ? function(e) { this.handleEvent.apply(ele, ["click"]); }.bind(this) : this.handleEvent;

或者这个

var that = this;

var scope = this ? function(e) { that.handleEvent.apply(ele, ["click"]); } : this.handleEvent;

我看到了其他错误。因为如果 this 是 undefined 那么 scope 将是 this.handleEvent 但这会引发错误因为 undefined 不能有 handleEvent 属性。