為什么用功能樣式編寫的jQuery代碼不起作用？

Question

我有這個最小的示例，它工作正常：

var node = $('div');
var fun1 = function(filter) { return node.find(filter) };
console.log(fun1('span'));

DOM：

<div><span>text</span></div>

似乎合乎邏輯，因為我只將參數傳遞給下一個函數，所以我可以擺脫它，而只需引用find函數：

var node = $('div');
var fun2 = node.find;
console.log(fun2('span'));

但是它拋出Uncaught TypeError: Object [object global] has no method 'pushStack' 。

有人可以告訴我這是怎么回事嗎？

現場演示： http ： //jsfiddle.net/wyVhW/

Answer 1

當您將對find函數的引用分配給fun2時，您已經失去了node的上下文。 您可以通過調用 fun2來獲得該上下文：

fun2.call(node, 'span');

或者，因此您不必每次都這樣做，請綁定引用以find回node ：

var fun2 = node.find.bind(node);

這是一個更新的示例 。

更新（感謝Jon ）：如果您需要支持未實現Function.prototype.bind舊瀏覽器，則可以使用前面鏈接的MDN文章中詳細介紹的jQuery.proxy ，也可以使用jQuery.proxy來完成相同的工作：

var fun2 = $.proxy(node.find, node);