web-dev-qa-db-ja.com

JavaScriptのvoid演算子のポイントは何ですか?

コードでvoid演算子を使用している人を見たことがあります。私はこれをhref属性でも見ました:javascript:void(0)これはjavascript:;よりも優れているようには見えません

では、void演算子を使用する理由は何でしょうか。

54
mkoryak

リンクでの使用の説明

これは、ブックマークレットがvoid()または匿名関数内のコードをラップすることがよくある理由です。この関数は何も返さず、ブラウザがブックマークレットの実行結果を表示しないようにします。例えば:

javascript:void(window.open("dom_spy.html"))

何かを返すコード(この場合は新しいウィンドウインスタンス)を直接使用すると、ブラウザはそれを表示します。

javascript:window.open("dom_spy.html");

Firefoxでは上記が表示されます:

[object Window]
52
Crescent Fresh

undefined値は、ES1.3までJavaScriptで直接アクセスできませんでした。

演算子void <expression>したがって、この値へのアクセスを許可するために含まれていました。

特にWeb API(イベントハンドラーなど)を使用する場合、式の結果が一貫してundefinedになるようにすると便利な場合があります。

ES1.3でundefinedプロパティがグローバルオブジェクトに追加されたとき、voidのユーティリティは自明ではなくなりました。

したがってあなたの質問。

17
Ben

以下を検討してください。

_<a href="javascript:void(fish=document.getElementById('foo').value);void(document.getElementById('bar').value=fish);">With Void</a>

<a href="javascript:fish=document.getElementById('foo').value;document.getElementById('bar').value=fish;">Without Void</a>

<input type="text" id="foo" value="one fish" />
<input type="text" id="bar" value="no fish" />
_

最初のリンクは、テキストフィールドの値を入れ替えます。 2番目のリンクは、「1匹の魚」というテキストを含む新しいページを開きます。 _javascript: link_を使用する場合、式がnullまたはundefined以外の値を返すと、ブラウザーはそれをリンクが何をすべきかを解釈します。すべての式/ステートメントをvoid()関数でラップすることにより、コードのスニペット全体が確実に実行されるようにします。最近では、これはブックマークレットで主に使用されています。onclick属性を使用するか、イベントハンドラーを個別のJavaScriptブロック/ファイルに設定することが「標準」であるためです。

_javascript:_対javascript:void()については、最初のステートメントがあいまいです。 「ちょっと、JavaScriptを実行したい」と言っているのに、コードを提供していない。ここでブラウザが何をすべきかは必ずしも明確ではありません。 2番目のステートメントでは、「ちょっと、JavaScriptを実行して」と言っており、コードは最終的に未定義を返します。これは、ブラウザーが「何もしない」ことを意味します。

私はここにいるので、マークアップを気にするほとんどの人にとって、_javascript:_またはjavascript:void();のどちらかを使用することは好まれなくなったことも指摘しておきます。 onclickハンドラーがfalseを返し、JavaScriptがオフになっている、またはNoScriptなどのJavaScriptブロッカーを使用している人にとって意味のあるページ/リソースへのリンクを指すようにすることをお勧めします。

12
Alan Storm