jquery回调函数 - “这个”

Question

我有一个jQuery（UI）应用程序，在这里整个JQuery代码有点混乱，所以我开始思考如何以一种更有趣的方式构造这个...我读一篇博客文章的地方，即“空中接力” - 在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)') 

我环顾四周，与萤火虫，似乎，那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.target。）

为了完整起见，使用上述Function#bind（如果浏览器支持ES5特征，或已包含一个ES5垫片[自Function#bind是垫片能够]）：

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

Answer 2

关键字this正在改变你的范围，所以它并不意味着在你所期望的不同地方同样的事情。我建议你明确地将你正在使用的元素在函数中传递，并直接引用该元素，而不是试图用this来区分范围。