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來區分範圍。