JavaScript ist das Rückgrat des Webs und ermöglicht dynamische clientseitige Funktionalität für Milliarden von Websites und Anwendungen. Aber haben Sie sich jemals gefragt, wie JavaScript im Hintergrund seine Magie entfaltet? In diesem Beitrag befassen wir uns mit dem Innenleben der Single-Threaded-Natur von JavaScript und erforschen das Konzept der asynchronen Programmierung.

Was bedeutet Single-Threaded?

Wenn wir sagen, dass JavaScript „Single-Threaded“ ist, bedeutet das, dass es einen einzigen Aufrufstapel hat. Der Aufrufstapel ist im Wesentlichen die Struktur, in der JavaScript die ausgeführten Funktionen verfolgt. Es folgt eine LIFO-Reihenfolge (Last In, First Out), was bedeutet, dass die zuletzt auf den Stapel gelegte Funktion als erste beendet wird. Hier ist ein Beispiel dafür, wie das funktioniert:

function first() {
    console.log('First function');
}

function second() {
    console.log('Second function');
}

first();
second();

In diesem Beispiel wird die Funktion first() zum Stapel hinzugefügt und ausgeführt. Sobald es fertig ist, wird es entfernt und die Funktion second() wird auf den Stapel gelegt und als nächstes ausgeführt.

Während Single-Thread-Sprachen eingeschränkt erscheinen mögen, weil sie immer nur eine Sache gleichzeitig tun können, ermöglicht die clevere Verwendung asynchroner Mechanismen in JavaScript die Simulation von Multitasking.

Die Ereignisschleife und die asynchrone Ausführung

JavaScript verwendet die asynchrone Ausführung, um Vorgänge zu verarbeiten, deren Abschluss möglicherweise lange dauert, wie z. B. Netzwerkanforderungen, Datei-E/A oder Timer. Obwohl es Single-Threaded ist, kann es dank der Ereignisschleife und der Rückrufwarteschlange mehrere Aufgaben gleichzeitig verwalten.

Die Ereignisschleife

Die Ereignisschleife ist ein Kernkonzept im Parallelitätsmodell von JavaScript. Seine Hauptaufgabe besteht darin, zu verwalten, wie JavaScript die asynchrone Codeausführung handhabt. So funktioniert es:

1. Synchronous Code wird zuerst ausgeführt. Wenn JavaScript startet, führt es den gesamten Code im globalen Bereich synchron Zeile für Zeile mithilfe des Aufrufstapels aus.

2. Asynchrone Aufgaben werden an die Web-APIs (wie setTimeout, fetch usw.) oder Node.js-APIs gesendet, wo sie im Hintergrund verarbeitet werden.

3. In der Rückrufwarteschlange werden asynchrone Vorgänge platziert, sobald sie abgeschlossen sind.

4. Die Ereignisschleife prüft kontinuierlich, ob der Aufrufstapel leer ist. Wenn der Stapel leer ist, wird das erste Element aus der Rückrufwarteschlange genommen und auf den Aufrufstapel verschoben, sodass es ausgeführt werden kann.

Die Magie von asynchronem JavaScript liegt in dieser Interaktion zwischen der Ereignisschleife, dem Aufrufstapel und der Rückrufwarteschlange. Asynchrone Vorgänge blockieren den Aufrufstapel nicht, was bedeutet, dass JavaScript weiterhin anderen Code ausführen kann, während es auf den Abschluss von Hintergrundaufgaben wartet.

Beispiel: Verwendung von setTimeout

Betrachten Sie das folgende Beispiel mit einer setTimeout-Funktion:

console.log('Start');

setTimeout(() => {
    console.log('This runs after 2 seconds');
}, 2000);

console.log('End');

Das passiert Schritt für Schritt:

1. JavaScript gibt „Start“ aus.

2. Die setTimeout-Funktion wird aufgerufen, aber anstatt die Ausführung für 2 Sekunden zu blockieren, wird sie an die Web-API gesendet, wo sie im Hintergrund ausgeführt wird.

3. JavaScript gibt „End“ aus und setzt seine Ausführung fort, ohne auf den Abschluss von setTimeout zu warten.

4. Nach 2 Sekunden wird die Rückruffunktion in setTimeout in die Rückrufwarteschlange gestellt.

5. Die Ereignisschleife prüft, ob der Aufrufstapel leer ist (was der Fall ist), schiebt dann die Rückruffunktion auf den Stapel, führt sie aus und gibt „Dies wird nach 2 Sekunden ausgeführt“ aus.

Versprechen und Async/Await

Eine weitere beliebte Möglichkeit, asynchrone Aufgaben in modernem JavaScript zu handhaben, sind Promises und die async/await-Syntax, die dazu beitragen, den Code lesbarer zu machen, indem tief verschachtelte Rückrufe vermieden werden (auch bekannt als „Callback-Hölle“).

Ein Versprechen repräsentiert den eventuellen Abschluss (oder Misserfolg) eines asynchronen Vorgangs und seinen daraus resultierenden Wert. Hier ist ein Beispiel:

const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('Promise resolved!');
    }, 1000);
});

promise.then(result => {
    console.log(result);  // Output after 1 second: 'Promise resolved!'
});

Anstatt uns auf Rückrufe zu verlassen, können wir then() verwenden, um zu handhaben, was passiert, wenn das Versprechen gelöst wird. Wenn wir asynchronen Code synchroner behandeln möchten, können wir async/await:
verwenden.

async function asyncExample() {
    const result = await promise;
    console.log(result);  // Output after 1 second: 'Promise resolved!'
}

asyncExample();

Dadurch wird der Code sauberer und leichter verständlich, sodass wir auf den Abschluss asynchroner Aufgaben „warten“ können, bevor wir mit der nächsten Codezeile fortfahren, auch wenn JavaScript unter der Haube nicht blockierend bleibt.

Schlüsselkomponenten im asynchronen Modell von JavaScript

1. Aufrufstapel: Wo synchroner Code ausgeführt wird.

2. Web-APIs/Node.js-APIs: Externe Umgebungen, in denen asynchrone Aufgaben (wie Netzwerkanforderungen) verarbeitet werden.

3. Rückrufwarteschlange: Eine Warteschlange, in der asynchrone Aufgabenergebnisse darauf warten, zur Ausführung in den Aufrufstapel verschoben zu werden.

4. Ereignisschleife: Das System, das zwischen dem Aufrufstapel und der Rückrufwarteschlange koordiniert und sicherstellt, dass Aufgaben in der richtigen Reihenfolge bearbeitet werden.

Abschluss

Die Single-Thread-Natur von JavaScript mag auf den ersten Blick einschränkend erscheinen, aber seine asynchronen Fähigkeiten ermöglichen die effiziente Verwaltung mehrerer Aufgaben. Durch Mechanismen wie die Ereignisschleife, Rückrufwarteschlangen und Versprechen ist JavaScript in der Lage, komplexe, nicht blockierende Vorgänge zu verarbeiten und gleichzeitig einen intuitiven, synchron aussehenden Codierungsstil beizubehalten.