Dieser Beitrag soll sich mit einigen der wichtigeren Javascript-Konzepte befassen, um Ihnen zu helfen, besseren Code zu schreiben.

Wenn Sie den dunklen Modus mögen, können Sie diesen Artikel hier lesen .

Der Callstack ist eine LIFO- Datenstruktur ( Last In First Out ). Jedes Mal, wenn eine Funktion aufgerufen wird, wird ein Ausführungskontext erstellt und an den Anfang des Callstacks verschoben. Wenn die Ausführung beendet ist, wird der Ausführungskontext aus dem Callstack entfernt.

Javascript ist eine Single-Thread-Sprache, was bedeutet, dass sie einen Call-Stack hat und daher nur eine Sache gleichzeitig tun kann. Eine wichtige Sache, die ich schnell erwähnen möchte, ist, dass asynchrones Javascript aufgrund einer Reihe von Browser-APIs wie der Callback-Warteschlange möglich ist. Es ist nicht wirklich ein Teil der Javascript-Sprache.

Wenn eine Funktion aufgerufen wird, wird der Ausführungskontext erstellt und oben auf den Aufrufstapel gelegt, und wenn die Funktion beendet ist, wird sie vom Stapel entfernt.

Jeder Eintrag in der Aufrufliste wird als Stack Frame bezeichnet .

Wie der Ausführungskontext an den Stack angehängt wird

Nehmen wir eine einfache Funktion:

function foo() {
  bar()
}

function bar() {
  console.log('bar')
}

foo()

      
                

                    
                    
                
            

Mal sehen, wie diese Fehler aussehen, auf die wir normalerweise in unserer Konsole stoßen, wenn etwas nicht stimmt:

function foo() {
  bar()
}

function bar() {
  baz()
}

function baz() {
  throw new Error('this is an error')
}

foo()

Den Stapel sprengen

Dies passiert manchmal bei Schleifen oder Rekursionen und bedeutet lediglich, dass der Callstack überläuft. Dies geschieht, weil ein Ausführungskontext immer wieder angehängt wird und es dafür eine Grenze gibt.

function foo() {
  foo()
}

foo()

Ein letztes Beispiel, um den Punkt nach Hause zu bringen

Achten Sie auf jeden Stapelrahmen in der folgenden Abbildung.

function foo() {
  console.log('hi')
  bar()
  console.log('bye')
}

function bar() {
  console.log('bar')
  baz()
}

function baz() {
  console.log('baz')
}

foo()