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

Question

这段代码运行良好：

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

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

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

但这导致了 jQuery 内部的异常。两段代码不应该是等价的吗？

score 5 · Accepted Answer

你可以这样做：

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'];

我不确定这样的重构是否会使任何事情变得更清晰:-)

score 2 · Accepted Answer

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

因此，例如，返回 true：

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

只有一个show函数，并且var showHide = div.show只将通用函数分配给变量。至关重要的是，它不会导入context，这就是调用它的div.show()作用。

简单的方法是使用属性名称作为变量，而不是像Pointy 的回答那样使用函数本身，或者call像他也建议的那样使用。另一种选择是使用bind（或者$.proxy如果您必须支持旧浏览器）：

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

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

2 回答 2