Das Wort void bedeutet laut Wörterbuch „völlig leerer Raum“. Wenn dieser Begriff in der Programmierung verwendet wird, bezieht er sich auf die Rückgabe von „nichts“ – sozusagen einen „leeren Wert“.
Was ist das Schlüsselwort void?
Wenn eine Funktion void ist, bedeutet das, dass die Funktion nichts zurückgibt. Das ist ähnlich wie bei Funktionen in JavaScript, die undefined explizit zurückgeben, etwa so:
function und() { return undefined}und()oder implizit, etwa so:
function und() {}und()Ungeachtet der Ausdrücke und Anweisungen in den obigen Funktionen (addiert 2 Zahlen zusammen, findet den Durchschnitt von 5 Zahlen, was auch immer), wird kein Ergebnis zurückgegeben.
Nun wissen wir, was es mit dem Schlüsselwort void auf sich hat. Was ist mit javascript:void(0)?
Was ist javascript:void(0)?
Wenn wir das aufteilen, haben wir javascript: und void(0). Schauen wir uns jeden Teil genauer an.
Javascript:
Dies wird als Pseudo-URL bezeichnet. Wenn ein Browser diesen Wert als Wert von href auf einem Anker-Tag erhält, interpretiert er den JS-Code, der auf den Doppelpunkt (:) folgt, anstatt den Wert als referenzierten Pfad zu behandeln.
Beispiel:
<a href="javascript:console.log('javascript');alert('javascript')">Link</a>Wenn „Link“ angeklickt wird, ist hier das Ergebnis:
Wie oben gesehen, behandelt der Browser href nicht als referenzierten Pfad. Stattdessen behandelt er es als einen JavaScript-Code, der nach „javascript:“ beginnt und durch Semikolons getrennt ist.
void(0)
Der void-Operator wertet gegebene Ausdrücke aus und gibt undefined zurück.
Beispiel:
const result = void(1 + 1);console.log(result);// undefined1 + 1 wird ausgewertet, aber undefined wird zurückgegeben. Um das zu bestätigen, hier ein weiteres Beispiel:
<body> <h1>Heading</h1> <script> void(document.body.style.backgroundColor = 'red', document.body.style.color = 'white' ) </script></body>Das Ergebnis des obigen Codes ist:
Hier ein weiteres Beispiel:
console.log(void(0) === undefined)// trueKombiniere javascript: und void(0)
Manchmal möchte man nicht, dass ein Link zu einer anderen Seite navigiert oder eine Seite neu lädt. Mit javascript: können Sie Code ausführen, der die aktuelle Seite nicht verändert.
Dies, verwendet mit void(0) bedeutet, nichts tun – nicht neu laden, nicht navigieren, keinen Code ausführen.
Zum Beispiel:
<a href="javascript:void(0)">Link</a>Das Wort „Link“ wird vom Browser wie ein Link behandelt. Zum Beispiel ist es fokussierbar, aber es navigiert nicht zu einer neuen Seite.
0 ist ein Argument, das an void übergeben wird, das nichts tut und nichts zurückgibt.
JavaScript-Code (wie oben gesehen) kann auch als Argument an die Methode void übergeben werden. Dadurch wird im Link-Element etwas Code ausgeführt, aber die Seite bleibt gleich.
Beispiel:
<a href="javascript:void( document.querySelector('#link').style.color = 'green')">Link</a>Wenn die Schaltfläche angeklickt wird, ist dies das Ergebnis:
Mit void wird dem Browser mitgeteilt, dass er nichts zurückgeben soll (oder undefined).
Ein weiterer Anwendungsfall für Links mit dem Verweis javascript:void(0) ist, dass ein Link manchmal im Hintergrund etwas JavaScript-Code ausführt und das Navigieren unnötig ist. In diesem Fall würden die Ausdrücke als Argumente verwendet werden, die an void übergeben werden.
Abschluss
In diesem vereinfachten Artikel haben wir gelernt, was der void-Operator ist, wie er funktioniert und wie er mit dem javascript:-Pseudo-URL für href-Attribute von Links verwendet wird.
Damit wird sichergestellt, dass eine Seite nicht zu einer anderen Seite navigiert oder die aktuelle Seite neu lädt, wenn sie angeklickt wird.