Wie funktionieren die Operatoren import und export in JavaScript?

Die Operatoren import und export werden in JavaScript verwendet, um mit Modulen zu arbeiten, den Code in unabhängige, wiederverwendbare Teile zu unterteilen und Abhängigkeiten zwischen ihnen zu verwalten.

export

Der Operator export wird verwendet, um Variablen, Funktionen, Klassen oder andere Werte aus einem Modul zu exportieren. Der Export kann benannt oder Standard sein.

Benannter Export:

// module.js
export const myVariable = 10;
export function myFunction() { // ... }
export class MyClass { // ... }

Standardexport: Ein Modul kann nur einen Standardexport haben.

// module.js
const defaultValue = 'default value';
export default defaultValue;

import

Der Operator import wird verwendet, um Werte zu importieren, die von anderen Modulen exportiert wurden.

Benannter Import:

// another-module.js
import { myVariable, myFunction } from './module.js';

Import mit anderem Namen:

// another-module.js
import { myVariable as newVariableName } from './module.js';

Alle benannten Exporte als Objekt importieren:

// another-module.js
import * as moduleAlias from './module.js';
// Zugriff: moduleAlias.myVariable, moduleAlias.myFunction

Standardexport importieren:

// another-module.js
import defaultValueName from './module.js';

Sowohl benannten Export als auch Standardexport gleichzeitig importieren:

// another-module.js
import defaultValueName, { myVariable, myFunction } from './module.js';

Funktionsweise:

1. Statische Analyse: Der JavaScript-Interpreter analysiert die import- und export-Operatoren während der Kompilierung (vor der Ausführung des Codes) und erstellt ein Abhängigkeitsdiagramm zwischen den Modulen.
2. "Lebendige" Bindungen: Importierte Variablen sind keine Kopien der Werte aus dem exportierenden Modul. Es sind "lebendige" Bindungen (lebendige Referenzen) an die Variablen des Originalmoduls. Wenn sich der Wert einer Variablen im exportierenden Modul ändert, wird diese Änderung durch die importierte Bindung sichtbar.
3. Einmalige Ausführung: Der Code jedes Moduls wird nur einmal bei der ersten Importierung dieses Moduls ausgeführt. Die Ergebnisse des Exports werden zwischengespeichert und bei späteren Importen wiederverwendet.
4. Verwendung im Kontext: Module werden in ihrem eigenen Kontext ausgeführt, der vom globalen Bereich isoliert ist. Variablen, die am Anfang des Moduls deklariert sind, verschmutzen den globalen Raum nicht, es sei denn, sie werden explizit exportiert.