Entmystifizierung des JavaScript-Aufrufstapels: Wie Ihr Code wirklich ausgeführt wird

Wie der JavaScript Call Stack funktioniert, hat sich jeder Frontend-Entwickler mindestens einmal in seiner Karriere gestellt, und meiner Meinung nach ist das keine Frage Diese Fragen wurden an den meisten Stellen beantwortet, und die Antworten sind nicht immer klar oder leicht zu verstehen. Aus diesem Grund habe ich beschlossen, das Thema in diesem Beitrag zu behandeln.

Lasst uns von vorne beginnen. Die JavaScript-Engine führt den Code Zeile für Zeile synchron aus und erstellt jedes Mal, wenn eine Funktion ausgeführt wird, einen Ausführungskontext (einen Bereich im Speicher zum Speichern aller nur vorhandenen bereichsbezogenen Eigenschaften). innerhalb dieser Funktion) und fügt die Funktion dem Aufrufstapel hinzu.

JavaScript führt nur den Code der Funktion aus, die sich oben im Stapel befindet, und wenn eine Funktion abgeschlossen wird und ihren Wert zurückgibt, entfernt die Engine die Funktion aus dem Aufrufstapel und beginnt mit der Arbeit am nächsten.

Wenn der Aufrufstapel leer ist, führt die JavaScript-Engine den Code im nächsten globalen Kontext weiter aus, oder was dasselbe ist, führt weiterhin die Zeilen aus, die sich in das Stammverzeichnis der JavaScript-Datei und gehören zu keiner Funktion.

Sehen wir uns einige Beispiele Zeile für Zeile an:

const num1 = 2;
const num2 = 5;

function sum(a, b){
return a + b;
}

const result= sum(num1, num2);
console.log(result) // 7

Dies ist ein wirklich einfacher Code, der zwei Konstanten (num1 und num2) definiert und dann eine Funktion

sum definiert, die zwei Zahlen summiert und das Ergebnis der Summe zurückgibt. Abschließend wird die Konstante result erstellt und ihr das result of executing sum mit den Argumenten num1 und num2 zugewiesen. Anschließend wird der Wert des Ergebnisses auf der Konsole ausgegeben.

Wenn Sie der Meinung sind, dass die vorherige Erklärung zu einfach oder zu komplex ist und nichts erklärt,

haben Sie bitte Geduld, wir kommen zu den interessanten Dingen.

Sehen wir uns

Zeile für Zeile an, was die JavaScript-Engine macht. In der ersten Zeile erstellt die Engine eine Bezeichnung num1 und speichert im Speicher den Wert 2.

const num1 = 2;

Die zweite Zeile macht dasselbe für die Bezeichnung

num2. Es erstellt eine Bezeichnung num2 und speichert im Speicher den Wert 5.

const num2 = 5;

Das bedeutet, dass immer dann, wenn jemand innerhalb des

globalen Bereichs den Wert von num2 benötigt, die Engine die Bezeichnung ändert und den Wert 5 eingibt stattdessen.

Fahren wir mit der nächsten Zeile fort. Die nächste Zeile ist die

Funktion Summe. Was glauben Sie, was der Motor tun wird? Glauben Sie, dass die Funktion ausgeführt oder zum Aufrufstapel hinzugefügt wird? Nö! Was die Engine tun wird, ist ein neues Label mit dem Namen sum zu speichern und den Code in den Klammern im Speicher zu speichern. Oder was dasselbe ist: Es wird die Funktionsdefinition speichern und sie der Bezeichnung Summe zuweisen.

function sum(a, b){
return a + b;
}

Wenn wir

den Speicher des Codes, den wir bisher ausgeführt haben, visuell sehen könnten, würden wir etwa Folgendes sehen:

Label name	Value in memory
num1	2
num2	5
sum	function definition

Die nächste Zeile ist

wirklich interessant. Wenn die JavaScript-Engine die nächste Zeile erreicht, erstellt sie die Bezeichnung Ergebnis, aber zu diesem Zeitpunkt weiß sie noch nicht, welcher Wert der Bezeichnung zugewiesen werden muss, weil Der Wert ist das Ergebnis der Ausführung einer Funktion, also muss er zuerst die Funktion ausführen, alles tun, was die Funktion tun muss, und das Ergebnis aus dem Rückgabewert abrufen.

const result= sum(num1, num2);

An diesem Punkt

fügt die Engine die Funktion zum Aufrufstapel hinzu und erstellt außerdem einen neuen Ausführungskontext, der einen neuen Speicherplatz darstellt JavaScript kann den Wert der Argumente und aller anderen Eigenschaften innerhalb der Funktion speichern, ohne mit dem globalen Kontext zu kollidieren.

First of all, the engine creates in memory the labels a and b which are the names given to the parameters, and it assigns the value of the arguments 2 and 5 respectively.

If we could see the memory at this specific moment, we would see something like this:

Label name	Value in memory
a	2
b	5
return	2 + 5 = 7

In this case, the function is really simple and only returns the value of the sum between a and b, so the engine substitutes the parameters with the values of the arguments and returns the value to the global execution context. Finally, the function is removed from the call stack, and only the global context remains.

Call stack

Global

At this point, the result of the function is assigned to the label result and we can print the value on console with the console log.

Let's take a look at how the global memory looks now:

Label name	Value in memory
num1	2
num2	5
sum	function definition
result	7

Did you noticed? the label result has a value of 7? and also sum still has the function definition inside.

Let's take a look at the next code:

const num1 = 2;
const num2 = 5;

function sum(a, b){
return a + b;
}

const result= sum(num1, num2);
console.log(result) // 7

function sumThreeNumbers = (x,y,z) => {
return sum(x, y) + z
}

const result2 = sumThreeNumbers(4,6,2)
console.log(result2) // 12

The main difference is that now we have a new sumThreeNumbers function and we are creating a new result2 constant and assigning the value of running the function sumThreeNumbers with the arguments, 4, 6 and 2.

Let's take a look at how the call stack works when we run nested functions.

If we jump to the line when we define the constant result2 the global memory would look something like this:

Label name	Value in memory
num1	2
num2	5
sum	function definition
result	7
sumThreeNumbers	function definition

Just as on the previous example, the JavaScript engine doesn't know what value to assign to the label result2, to get the value, first needs to execute the function sumThreeNumbers with the arguments. The function is added to the call stack, and a new execution context is created. The execution context would look like this:

Label name	Value in memory
x	4
y	6
z	2

So the first thing that JavaScript does is create the parameter labels and assign the value provided by the arguments.

Now let's take a look at our call stack

Call stack

sumThreeNumbers

Global

As you can see, the call stack only has the sumThreeNumbers item (apart from the global context that is always present).

To be able to get the result value, the function sum needs to be executed first, so the engine will add the function to the call stack and create a new execution context for the sum function.

Call stack

sum

sumThreeNumbers

Global

As the sum function is on top of the call stack, Javascript needs to run sum first to be able to continue running sumThreeNumbers.

This is how it's going to look the execution context for the function sum:

Label name	Value in memory
a	4
b	6
return	4 + 6 = 10

Wie Sie wissen, wird _10 _ zurückgegeben und aus dem Aufrufstapel entfernt

Call stack

sumThreeNumbers

Global

Das JavaScript führt weiterhin sumThreeNumbers aus und der Ausführungskontext sieht folgendermaßen aus:

Label name	Value in memory
x	4
y	6
z	2
return	10 + 2 = 12

Es wird der Wert 12 zurückgegeben und aus dem Aufrufstapel entfernt.

Call stack

Global

Dann wird der Eigenschaft result2 der Wert 12 zugewiesen und der Wert 12 in der Konsole angezeigt.

Ich hoffe, dieser Beitrag hat Ihnen geholfen zu verstehen, wie der JavaScript-Aufrufstapel funktioniert. Wenn ja, hinterlassen Sie bitte einen Kommentar und ein „Gefällt mir“. Wir sehen uns im nächsten!

Das obige ist der detaillierte Inhalt vonEntmystifizierung des JavaScript-Aufrufstapels: Wie Ihr Code wirklich ausgeführt wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!