javascript - 将 jQuery 函数分配给变量不起作用，但包装它可以

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 在调用 find 期间依赖于 this 的值(以了解它在寻找什么)，但是在你的代码中，你直接调用它，所以调用期间的 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' )，因此它知道要在其中搜索什么。

它基本上是您的“包装”示例的一种稍微更简洁的形式，但会传递所有参数而不仅仅是一个参数。

---

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