diff options
Diffstat (limited to 'files/de/glossary/hoisting/index.html')
-rw-r--r-- | files/de/glossary/hoisting/index.html | 90 |
1 files changed, 90 insertions, 0 deletions
diff --git a/files/de/glossary/hoisting/index.html b/files/de/glossary/hoisting/index.html new file mode 100644 index 0000000000..f53dcb6647 --- /dev/null +++ b/files/de/glossary/hoisting/index.html @@ -0,0 +1,90 @@ +--- +title: Hoisting +slug: Glossary/Hoisting +tags: + - CodingScripting + - Glossary + - JavaScript + - hoisted + - hoisting +translation_of: Glossary/Hoisting +--- +<p>Hoisting (engl. <em>(an)heben</em>, <em>hochziehen</em>, <em>hissen</em>) ist ein Begriff, den Sie in <em>keiner</em> normativen Spezifikation vor <a href="https://www.ecma-international.org/ecma-262/6.0/index.html">ECMAScript® 2015 Language Specification</a> finden werden. Unter Hoisting wird eine allgemeine Denkweise verstanden, wie Ausführungskontexte (insbesondere die Erstellungs- und Ausführungsphasen) in JavaScript funktionieren. Das Konzept kann jedoch zunächst etwas verwirrend sein.</p> + +<p>Konzeptionell bedeutet beispielsweise eine strikte Definition von Hoisting, dass Variablen- und Funktionsdeklarationen physisch an die Spitze Ihres Codes gestellt werden, was jedoch nicht das ist was tatsächlich passiert. Stattdessen werden die Variablen- und Funktionsdeklarationen während der <em>Kompilierungsphase</em> in den Speicher gestellt, bleiben aber genau dort, wo Sie sie in Ihrem Code geschrieben haben.</p> + +<h2 id="Erfahren_Sie_mehr">Erfahren Sie mehr</h2> + +<h3 id="Technisches_Beispiel">Technisches Beispiel</h3> + +<p>Wenn JavaScript Funktionsdeklarationen vor der Ausführung eines Codesegments in den Speicher ablegt, können Sie eine Funktion verwenden, bevor Sie sie in Ihrem Code deklarieren. Zum Beispiel:</p> + +<pre class="brush: js">function catName(name) { + console.log("Der Name meiner Katze ist " + name); +} + +catName("Tigger"); + +/* +Das Ergebnis des Codes oben ist: "Der Name meiner Katze ist Tigger" +*/</pre> + +<p>Das Beispiel zeigt an, wie Sie den Code schreiben würden, damit er funktioniert. Nun wollen wir sehen, was passiert, wenn wir die Funktion aufrufen, bevor wir sie schreiben:</p> + +<pre class="brush: js">catName("Chloe"); + +function catName(name) { + console.log("Der Name meiner Katze ist " + name); +} +/* +Das Ergebnis des Codes oben ist: "Der Name meiner Katze ist Chloe" +*/</pre> + +<p>Obwohl wir die Funktion zuerst in unserem Code aufrufen, funktioniert der Code auch dann noch, bevor die Funktion geschrieben wird. Dies liegt daran, wie die Kontextausführung in JavaScript funktioniert.</p> + +<p>Hoisting funktioniert auch gut mit anderen Datentypen und Variablen. Variablen können vor der Deklaration initialisiert und verwendet werden.</p> + +<h3 id="Nur_Deklarationen_werden_gehoistet">Nur Deklarationen werden gehoistet</h3> + +<p>JavaScript hoistet nur Deklarationen, keine Initialisierungen. Wenn eine Variable nach ihrer Verwendung deklariert und initialisiert wird, ist der Wert <code>undefined</code>. Zum Beispiel:</p> + +<pre class="brush: js">console.log(num); // Gibt undefined zurück +var num; +num = 6;</pre> + +<p>Wenn Sie die Variable nach der Verwendung deklarieren, sie jedoch vorher initialisieren, wird der Wert zurückgegeben:</p> + +<pre class="brush: js">num = 6; +console.log(num); // Gibt 6 zurück +var num;</pre> + +<p>Die beiden folgenden Beispiele zeigen das gleiche Verhalten:</p> + +<p> </p> + +<pre class="brush: js">var x = 1; // Initialisiere x +console.log(x + " " + y); // '1 undefined' +var y = 2; // Initialisiere y + +// Das obige Beispiel wird implizit als das folgende verstanden: +var x; // Deklariere x +var y; // Deklariere y +// Hoisting beendet. + +x = 1; // Initialisiere x +console.log(x + " " + y); // '1 undefined' +y = 2; // Initialisiere y</pre> + +<h3 id="Technische_Referenz">Technische Referenz</h3> + +<p> </p> + +<p> </p> + +<ul> + <li><a href="https://www.udemy.com/javascript-verstehe-die-seltsamen-teile/">JavaScript: Verstehe die seltsamen Teile</a> — Udemy.com Kurs</li> + <li><a href="/de/docs/Web/JavaScript/Reference/Statements/var">var Ausdruck</a> — MDN</li> + <li><a href="/de/docs/Web/JavaScript/Reference/Statements/function">function Ausdruck</a> — MDN</li> +</ul> + +<p> </p> |