分配被认为有害的jQuery函数？

Question

此代码工作正常：

if (chk.checked)
    div.show(delay);
else
    div.hide(delay);

我试图通过像这样重构它来聪明：

var showHide = chk.checked ? div.show : div.hide;
showHide(delay);

但是这导致了jQuery中的异常。这两段代码不应该相同吗？

Answer 1

您可以这样做：

var showHide = chk.checked ? 'show' : 'hide';
div[showHide](delay);

如果您只是保存对该函数的引用，您将丢失接收器 - 也就是说，在函数内部this引用将是错误的。

我想你可以这样做：

var showHide = chk.checked ? div.show : div.hide;
showHide.call(div, delay);

编辑或者，以避免在第一行中引用“div”两次：

var showHide = div[chk.checked ? 'show' : 'hide'];

我不确定这样的重构会让事情变得更清楚： - ）

Answer 2

问题是show和hide函数不是该特定jQuery选择对象的属性。它们是jQuery原型对象的属性。

因此，例如，返回true：

$('div').show === $.fn.show;

只有一个show函数，而var showHide = div.show仅将泛型函数赋值给变量。至关重要的是，它不会导入上下文，这是用div.show()调用它的内容。

简单的方法是将属性名称用作变量，而不是函数本身，如Pointy's answer does，或使用call，正如他所建议的那样。另一种方法是使用bind（或$.proxy，如果您必须支持旧浏览器）：

var showHide = (chk.checked ? div.show : div.hide).bind(div);
showHide(delay);

我真的不确定这是值得的，但是......