为什么这个jQuery代码是用函数式编写的;不起作用

Why is this jQuery code written in functional style doesn't work?

本文关键字：不起作用 函数 jQuery 代码 为什么      更新时间：2023-09-26

我有一个最小的例子，它运行良好：

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/

当您将对find函数的引用分配给fun2时，您已经丢失了node的上下文。您可以通过调用fun2来获取该上下文：

fun2.call(node, 'span');

或者，不必每次都这样做，将对find的引用绑定回node:

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

下面是一个更新的示例。

更新（感谢Jon）：如果你需要支持不实现Function.prototype.bind的旧浏览器，你可以使用前面链接的MDN文章中详细介绍的polyfill，也可以使用jQuery.proxy，它做同样的事情：

var fun2 = $.proxy(node.find, node);
相关文章：