Question

我有一些jQuery代码，根据具体情况，应该查看整个页面，或者只查看其中的某个部分。所以我最初有一些像这样的代码：

var doSearching = wholePage ? $ : $('#portion').find;
var target = doSearching('#someSelector');

经过一些调试后，我意识到这是一个问题，并且采取了有根据的猜测结果是这样的：

var doSearching = $;
if (!wholePage)
  {
    doSearching = function(selector) {return $('#portion').find(selector);}
  }
var target = doSearching('#someSelector');

嗯，这样做没问题，但我真的不明白第一个片段错误但第二个是正确的。

发生了什么？

Answer 1

出现问题的是find在调用this期间依赖于find的价值（知道它在里面看到了什么），但是在你的代码中，你正在调用它是直接的，因此在调用期间this将是全局对象（在松散模式下）或undefined（在严格模式下），而不是find期望它的jQuery实例。

你可以这样做：

var portion = wholePage ? null : $('#portion'); // Or: `var portion = wholePage && $('#portion');` if you like
var doSearching = portion ? portion.find.bind(portion) : $;
var target = doSearching('#someSelector');

使用Function#bind确保在您致电doSearching时，使用find调用this来引用$('#portion')生成的jQuery对象，等等它知道在哪里搜索。

它基本上是一个稍微简洁的“包装”示例形式，但是通过所有参数而不是一个。

Function#bind是旧版浏览器（如IE8）缺少的ES5功能，但如果支持它们很重要，则可以填充。

将jQuery函数赋值给变量不起作用，但包装它会起作用

1 个答案: