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。

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

我目前遇到的问题如下：日期时间选择器获得回调函数（“unavailableFrom”，“unavailableTo”），其中我想做一些特定的事情，然后调用通用的“不可用”来运行。错误消息是：

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

我用firebug看了一下，似乎“这个”不是我的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垫片[因为Function#bind可以填充]）：

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

更多内容（在我的博客上）：

jQuery UI datepicker的{{1}}有点痛苦，因为它们没有为您提供onSelect对象，因此您无法访问{{ 1}}。你最好的选择可能是一个关闭元素：

event

...其中event.target接受var r = new RangeSelector(/* ...args...*/); $("some_selector")..datepicker({ onSelect: function(dateText, inst) { return r.myFunction(dateText, inst, this); } });，myFunction和dateText个参数。

Live example | source

这是有效的，因为我们分配给inst的函数是对包含element变量的环境的闭包。

关闭经常被误解; FWIW，另一篇博文：Closures are not complicated

Answer 2

关键字this正在改变您的范围，因此它并不意味着在您预期的不同位置使用相同的内容。我建议您在函数中显式传递您正在使用的元素，并直接引用该元素，而不是尝试使用this来识别范围。

Jquery回调函数 - “这个”

2 个答案: