📚
Lerndokumentationen
Web
Web
  • Willkommen
  • HTML
    • Was ist HTML?
    • Elemente
    • Attribute
    • Boilerplate
  • Textelemente
  • Links
  • Dokumentenstruktur
  • Medien
  • Tabellen
  • Formulare
  • CSS
    • Was ist CSS?
    • Syntax
  • Einheiten
  • Selektoren
  • Boxmodell
  • Hintergründe und Rahmen
  • Overflow
  • Bilder
  • Formulare
  • Textelemente
  • Layout
    • Flexbox
    • Grid
  • Responsive Design
  • JavaScript
    • Was ist JavaScript?
    • Einbindung in HTML
    • Grundlagen
      • Variablen und Werte
      • Datentypen
      • Operatoren und Ausdrücke
      • Kontrollstrukturen
      • Schleifen
    • Funktionen
      • Funktionsdeklarationen vs. Funktionsausdrücke
      • Arrow Functions
      • Standardparameter und Rest-Parameter
      • First-Class und Higher-Order-Funktionen
      • Closures
      • IIFE (Immediately Invoked Function Expressions)
    • Arrays
      • Erstellen und Modifizieren
      • Iteration über Arrays
      • Sortieren
      • Nützliche Methoden
    • Objekte und Datenstrukturen
      • Erstellen und Manipulieren
      • Destructuring
      • Sets und Maps
    • Strings
      • Template Literals
      • Methoden
    • Moderne JavaScript-Features
      • Optionale Verkettung
      • Nullish Coalescing Operator
      • Spread und Rest Operator
      • Kurzschlussausdrücke
    • Scope und Kontext
      • this Keyword
      • Call, Apply und Bind
      • Hoisting und Temporal Dead Zone (TDZ)
    • Objektorientierte Programmierung
      • Prototypes
      • Constructor Functions
      • ES6 Classes
      • Die create()-Methode
    • Asynchronous JavaScript
      • AJAX
      • Promises
    • Zahlen, Daten, Internationalisierung und Timer
      • Mathematische Operationen
      • Datum und Zeit
      • Internationalisierung
      • Timer
    • Modules
    • JavaScript im Browser (DOM und Events)
      • Das DOM
      • Elemente auswählen, erstellen und manipulieren
      • Styles, Attribute und Klassen
      • Events und Event Listener
      • Event Propagation
        • Event Delegation
      • DOM Traversing
    • JavaScript Engine und Performance
      • Execution Context und Call Stack
  • TypeScript
    • Was ist TypeScript?
  • Compiler und Runtimes
  • Konfiguration
  • Types
    • Primitive Typen und Typableitung
    • Arrays und Tupel
    • Objekte
    • Top- und Bottom-Types
    • Enums
    • Utility Types
      • Records
  • Typenkombination
    • Union Types
    • Discriminated Unions
    • Intersections
  • Funktionen
  • Klassen
    • Grundlagen
    • Feldinitialisierer
    • Schreibgeschützte Felder
    • Implementieren
    • Private und Geschützte Member
    • Getter und Setter
    • Statische Member
    • Abstrakte Klassen und Member
  • Modules
    • Importieren und Exportieren
    • Ambient Types
    • Namespaces
    • Globals
  • React
    • Was ist React?
    • JSX
    • Komponenten
      • Root-Komponente
      • Styling
      • Listen
      • Conditional Rendering
      • Fragments
    • Props
      • Destructuring
      • Children
    • Interaktivität
      • Event Handling
      • State
      • Formulare
    • State Management
      • State anheben
      • Derived State
    • Komposition und Reusability
      • Komponentenstrukturierung
      • Prop Drilling
      • Komposition
Bereitgestellt von GitBook
Auf dieser Seite
  1. JavaScript
  2. Funktionen

Closures

Mit Closures können wir auf Variablen zugreifen, die eigentlich gar nicht mehr existieren sollten.

const secureBooking = function () {
  let passengerCount = 0;

  return function () {
    passengerCount++;
    console.log(`${passengerCount} passengers`);
  };
};

const booker = secureBooking();

booker(); // 1 passengers
booker(); // 2 passengers
booker(); // 3 passengers

Hier hat also die Funktion booker() Zugriff auf den aktuellen Status der Variable passengerCount, obwohl diese nur im äusseren Scope existiert.

Closure
  • Eine Closure ist ein abgeschlossenes Variable Environment des Execution Contexts, in dem eine Funktion erstellt wurde, und zwar auch dann noch, wenn dieser Ausführungskontext nicht mehr besteht.

  • Eine Closure ermöglicht einer Funktion den Zugriff auf alle Variablen der übergeordneten Funktion, auch nachdem diese returned wurde. Die Funktion behält einen Verweis auf ihren äusseren Bereich, wodurch die Scope Chain über die gesamte Zeit erhalten bleibt.

  • Eine Closure stellt sicher, dass eine Funktion nicht die Verbindung zu Variablen verliert, die bei der Entstehung der Funktion vorhanden waren.

  • Eine Closure ist wie ein Rucksack, die eine Funktion mit sich herumträgt, wohin sie auch geht. Dieser Rucksack enthält alle Variablen, die in der Umgebung vorhanden waren, in der die Funktion erstellt wurde.

Wir müssen keine Closures manuell erstellen, dies ist eine Javascript-Funktion, die automatisch geschieht. Wir können nicht einmal explizit auf abgeschlossene Variablen zugreifen. Ein Closure ist kein greifbares Javascript-Objekt

Beispiele

let f;

const g = function () {
  const a = 23;

  f = function () {
    console.log(a * 2);
  };
};

g();
f(); // 46

const h = function () {
  const b = 777;

  f = function () {
    console.log(b * 2);
  };
};

// Re-assigning f function
h();
f(); // 1554
VorherigeFirst-Class und Higher-Order-FunktionenNächsteIIFE (Immediately Invoked Function Expressions)

Zuletzt aktualisiert vor 3 Monaten