javascript - Jquery回调函数 - "this"

Question

我这里有一个 jquery (UI) 应用程序，其中整个 JQuery 代码有点困惑，所以我开始思考如何以更奇特的方式构建它......我在某处读过一篇博客文章， “oop” - 以 java 方式可以通过执行某种操作来实现:

function RangeSelector(product_id) {
    this.product_id = product_id;
    this.start_point = "#from_" + product_id;
    this.end_point = "#to_" + product_id;
}
RangeSelector.prototype.myFunction = function() { }

完整代码可以在 here 找到.

我的范围选择器“Class”应该包含两个jquery ui datetimepickers负责让用户选择可以租用产品的商店的日期时间范围

我目前遇到的问题如下:日期时间选择器获取回调函数(“unavailableFrom”，“unavailableTo”)，我想做一些特定的事情，然后调用通用的“unavailable”来运行。 错误信息是:

TypeError: 'undefined' is not a function (evaluating 'this.unavailable(date)')

我用 firebug 看了看，似乎“this”不是我的 RangeSelector 对象，而是 datetimepicker 正在工作的 HTML 元素。 我的问题是:我怎样才能访问这个“不可用”的方法？

顺便说一句，我在这里告诉你整个故事，因为我不认为我在这里选择的结构是正确的方法。当您有多个具有共同含义的 html 元素并且您想聚合它们时，您如何处理这类事情？

Answer 1

如果您需要将this设置为不同的值，可以使用jQuery.proxy要做到这一点。 (或者在支持 ES5 的环境中，您可以使用新的 Function#bind 函数。)proxy 接受用于 this 的函数和值，并返回一个函数将调用原始的 this 设置为该值。

举例来说，假设您有 RangeSelector 并且您希望 click 在特定实例上触发 myFunction:

var r = new RangeSelector(/* ...args...*/);
$("some_selector").click($.proxy(r.myFunction, r));

现在，当调用 r.myFunction 时，在调用中，this 将是对 r 对象的引用。 (如果您需要知道单击了哪个 DOM 元素，请让 myFunction 接受 jQuery 传递给它的 event 参数，并使用 event.target。 )

为了完整起见，上面使用 Function#bind (如果浏览器支持 ES5 功能，或者您已经包含了 ES5 shim [因为 Function#bind 是 shim-)能够]):

var r = new RangeSelector(/* ...args...*/);
$("some_selector").click(r.myFunction.bind(r));

更多探索(在我的博客上):

• Mythical methods
• You must remember this

---

jQuery UI datepicker 的 onSelect 有点麻烦，因为它们不给你 event 对象，所以您无权访问 event.target。你最好的选择可能是有一个传递元素的闭包:

var r = new RangeSelector(/* ...args...*/);
$("some_selector")..datepicker({
    onSelect: function(dateText, inst) {
        return r.myFunction(dateText, inst, this);
    }
});

...其中 myFunction 接受 dateText、inst 和 element 参数。

Live example | source

这是可行的，因为我们分配给 onSelect 的函数是对包含 r 变量的环境的闭包。

闭包经常被误解； FWIW，另一个博客条目:Closures are not complicated