Jquery回调函数 - "这个"

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() { }

整个代码可以在这里找到.

我的范围选择器"类"应该包含两个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接受eventjQuery传递它的参数,然后使用event.target.)

为了完整性,上面使用Function#bind(如果浏览器支持ES5功能,或者你已经包含了一个ES5垫片[因为它Function#bind是可以填充的]):

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

更多内容(在我的博客上):

• 神话方法
• 你必须记住 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论据.

实例 | 资源

这是有效的,因为我们分配的函数是对onSelect包含r变量的环境的闭包.

关闭经常被误解; FWIW,另一篇博客文章:闭包并不复杂