4

我知道将 this 的值更改为在事件处理函数中接收事件的元素非常有用。但是，我想让我的函数总是在我的应用程序上下文中调用，而不是在元素上下文中。这样，我可以将它们用作事件处理程序以及以其他方式（例如在setTimeout调用中）。

所以，像这样的代码：

window.app = (function () {
    var that = {
        millerTime: function () {},
        changeEl: function (el) {
            el = el || this;
            // rest of code...
            that.millerTime();
        }
    };
    return that;
}());

可能是这样的：

window.app = (function () {
    return {
        millerTime: function () {},
        changeEl: function (el) {
            // rest of code...
            this.millerTime();
        }
    };
}());

第一种方式让我看起来很困惑。有没有一种简单的方法可以将接收事件的元素作为第一个参数（最好是 jQuery 包装的元素）传递给我的事件处理函数并在应用程序的上下文中调用？假设我使用 jQuery 绑定了一堆事件处理程序。我不想一直包含匿名函数：

$('body').on('click', function (event) {
    app.changeEl.call(app, $(this), event);  // would be nice to get event too
});

我需要一个函数来为我处理这一切。在这一点上，我觉得传递匿名函数是没有办法的，但我只想看看是否有人有解决方案。

我的尝试：

function overrideContext (event, fn) {
   if (!(this instanceof HTMLElement) ||
         typeof event === 'undefined'
   ) {
       return overrideContext;
   }

   // at this point we know jQuery called this function // ??
   var el = $(this);

   fn.call(app, el, event);
}

$('body').on('click', overrideContext(undefined, app.changeEl));

使用Function.prototype.bind（我是新手），我仍然无法获得元素：

window.app = (function () {
    return {
         millerTime: function () {},
         changeEl: function (el) {
            // rest of code...
            console.log(this); // app
            this.millerTime();
         }
    };
}());

function overrideContext (evt, fn) {
    var el = $(this); // $(Window)
    console.log(arguments); // [undefined, app.changeEl, p.Event] 
    fn.call(app, el, event);
}

$('body').on('click', overrideContext.bind(null, undefined, app.changeEl));

相反，使用$('body').on('click', overrideContext.bind(app.changeEl));this 指向我的app.changeEl函数，我的参数长度为 1 并且仅包含p.Event. 在这两种情况下，我仍然无法获取元素。

4

1 回答 1

3

定义这样的函数应该会给你你想要的：

function wrap(func) {
  // Return the function which is passed to `on()`, which does the hard work.
  return function () {
    // This gets called when the event is fired. Call the handler
    // specified, with it's context set to `window.app`, and pass
    // the jQuery element (`$(this)`) as it's first parameter.
    func.call(window.app, $(this) /*, other parameters (e?)*/);
  }
}

然后你会像这样使用它；

$('body').on('click', wrap(app.changeEl));

有关详细信息，请参阅Function.call()

此外，我想建议不要使用这种方法。精通 JavaScript 程序员希望上下文在超时和事件处理程序中发生变化。从他们身上拿走这个基本原理就像我没有指南针就把你丢在撒哈拉沙漠。

于 2013-02-04T23:57:54.743 回答