javascript - 有害と見なされるjQuery関数の割り当て?

Question

このコードは正常に機能していました:

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

私は次のようにリファクタリングして賢くしようとしました：

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

しかし、それはjQuery内で例外を引き起こしました. 2 つのコードは同等であるべきではありませんか?

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」を 2 回参照しないようにするには、次のようにします。

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

そのようなリファクタリングが何かをより明確にするかどうかはわかりません:-)

score 2 · Accepted Answer

問題は、関数showとhide関数がその特定の jQuery 選択オブジェクトのプロパティではないことです。これらは、jQuery プロトタイプオブジェクトのプロパティです。

たとえば、これは true を返します。

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

show関数は 1 つvar showHide = div.showしかなく、一般的な関数を変数に割り当てるだけです。重要なのは、 contextをインポートしないことdiv.show()です。

簡単な方法は、 Pointy の回答が示すように、関数自体ではなく変数としてプロパティ名を使用するか、またはcall彼が提案するようにを使用することです。もう 1 つの方法は、次を使用することですbind(または$.proxy、古いブラウザーをサポートする必要がある場合)。

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

しかし、これが努力する価値があるかどうかは本当にわかりません...

2 に答える 2