为什么用功能样式编写的jQuery代码不起作用？

Question

I have this minimal example, and it works fine:

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

DOM:

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

It seems logical, that as I'm only passing the argument to the next function, I can get rid of it and simply refer to the find function:

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

But it throws Uncaught TypeError: Object [object global] has no method 'pushStack' .

Could somebody tell me what's wrong with this?

Live demo: http://jsfiddle.net/wyVhW/

Answer 1

You have lost the context of node when you assigned a reference to the find function to fun2 . You can get that context back by calling fun2 with it:

fun2.call(node, 'span');

Or, so you don't have to do that every time, bind the reference to find back to node :

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

Here's an updated example .

Update (thanks Jon ): If you need to support old browsers that don't implement Function.prototype.bind you can either use the polyfill detailed on the MDN article linked to previously, or use jQuery.proxy , which does the same thing:

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