1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
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>
|
