📚
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
  • Execution Contexts im Detail
  • Der Call Stack
  1. JavaScript
  2. JavaScript Engine und Performance

Execution Context und Call Stack

VorherigeJavaScript Engine und PerformanceNächsteWas ist TypeScript?

Zuletzt aktualisiert vor 3 Monaten

Nachdem unser Code kompiliert wurde, wird ein globaler Execution Context erstellt (für Top-Level-Code). Top-Level-Code ist Code, der sich nicht in einer Funktion befindet.

Ein Execution Context ist eine Umgebung, in der ein Teil von JavaScript ausgeführt wird. Er speichert alle Informationen, die für die Ausführung eines Codes notwendig sind, z. B. lokale Variablen oder Argumente, die an eine Funktion übergeben werden.

Nachdem der globale EC erstellt wurde, wird der Top-Level-Code ausgeführt. Sobald der Top-Level-Code fertig ist, werden schliesslich auch die Funktionen ausgeführt. Für jeden Funktionsaufruf wird ein neuer Execution Context erstellt, der alle Informationen enthält, die für die Ausführung der Funktion notwendig sind.

Wenn alle Funktionen ausgeführt wurden, wartet die Engine auf die Ankunft von Callback-Funktionen, damit sie diese ausführen kann.

Alle diese Execution Contexts zusammen bilden den Call Stack.

Execution Contexts im Detail

Innerhalb eines Ausführungskontextes sind:

  1. Variable Environment

    • let, const und var Deklarationen

    • Funktionen

    • arguments Objekt

  2. Scope Chain

    • Verweise auf Variablen außerhalb der aktuellen Funktion

  3. this Schlüsselwort

    • Besondere Variable

All diese Dinge werden während der Erstellungsphase, direkt vor der Ausführung, erstellt.

Ein weiterer wichtiger Faktor ist, dass Pfeilfunktionen weder das Objekt arguments noch das Schlüsselwort this erhalten. Stattdessen können sie das arguments-Objekt und das this-Schlüsselwort von ihrer nächsten übergeordneten Funktion verwenden.

Der Call Stack

Der Call Stack bildet zusammen mit dem Memory Heap die JavaScript-Engine selbst. Der Call Stack ist ein Platz, auf dem die Ausführungskontexte übereinander gestapelt werden, um den Überblick zu behalten, wo wir uns in der Ausführung befinden.

Der Ausführungskontext, der oben auf dem Stapel liegt, ist derjenige, der gerade ausgeführt wird. Wenn die Ausführung beendet ist, wird er vom Stapel entfernt und der Ausführungskontext kehrt zum vorherigen Ausführungskontext zurück.

Execution Context
Call Stack