Ανύψωση JavaScript

Πίνακας περιεχομένων

Η ανύψωση είναι η προεπιλεγμένη συμπεριφορά της JavaScript για τη μετακίνηση δηλώσεων στο μπλουζα.

Οι δηλώσεις JavaScript ανυψώνονται

Στο JavaScript, μια μεταβλητή μπορεί να δηλωθεί αφού χρησιμοποιηθεί.

Με άλλα λόγια; μια μεταβλητή μπορεί να χρησιμοποιηθεί πριν δηλωθεί.

Το Παράδειγμα 1 δίνει το ίδιο αποτέλεσμα με το Παράδειγμα 2:

Παράδειγμα 1

x = 5; // Assign 5 to x

elem = document.getElementById("demo"); // Find an element 
elem.innerHTML = x;                     
// Display x in the element
var x; // Declare x

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
x = 5; // Assign 5 to x

elem = document.getElementById("demo"); // Find an element 
elem.innerHTML = x;           // Display x in the element

var x; // Declare x
</script>

</body>
</html>

Παράδειγμα 2

var x; // Declare x
x = 5; // Assign 5 to x

elem = document.getElementById("demo"); // Find an element 
elem.innerHTML = x;                     
// Display x in the element

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var x; // Declare x
x = 5; // Assign 5 to x

elem = document.getElementById("demo"); // Find an element 
elem.innerHTML = x;           // Display x in the element
</script>

</body>
</html>

Για να το καταλάβετε αυτό, πρέπει να κατανοήσετε τον όρο «ανύψωση».

Η ανύψωση είναι η προεπιλεγμένη συμπεριφορά της JavaScript για τη μετακίνηση όλων των δηλώσεων στο πάνω από το τρέχον εύρος (στην κορυφή του τρέχοντος σεναρίου ή της τρέχουσας συνάρτησης).

Οι λέξεις-κλειδιά let and const

Οι μεταβλητές που ορίζονται με let και const ανυψώνονται στην κορυφή του μπλοκ, αλλά δεν είναι αρχικοποιημένο.<p>Σημασία: Το μπλοκ κώδικα γνωρίζει μεταβλητή, αλλά δεν μπορεί να χρησιμοποιηθεί μέχρι να δηλωθεί. <p>Η χρήση μιας μεταβλητής let πριν δηλωθεί θα έχει ως αποτέλεσμα Σφάλμα αναφοράς.

Η μεταβλητή βρίσκεται από την αρχή σε μια "χρονική νεκρή ζώνη". του μπλοκ μέχρι να δηλωθεί:

Παράδειγμα

carName = "Volvo";
let carName;

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Hoisting</h2>
<p>With <b>let</b>, you cannot use a variable before it is declared.</p>
<p id="demo"></p>

<script>
try {
  carName = "Saab";
  let carName = "Volvo";
}
catch(err) {
  document.getElementById("demo").innerHTML = err;
}
</script>

</body>
</html>

Η χρήση μιας μεταβλητής const προτού δηλωθεί, είναι συντακτικό σφάλμα, οπότε ο κώδικας απλά δεν θα εκτελεστεί.

Παράδειγμα

Αυτός ο κωδικός δεν θα εκτελεστεί.

carName = "Volvo";
const carName;

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Hoisting</h2>

<p>With <b>const</b>, you cannot use a variable before it is declared.</p>
<p>Try to remove the //.</p>

<p id="demo"></p>

<script>
carName = "Volvo";
//const carName;
document.getElementById("demo").innerHTML = carName;
</script>

</body>
</html>

Διαβάστε περισσότερα για το let and const στο JS Let/Const.

Οι αρχικοποιήσεις JavaScript δεν ανεβαίνουν

Η JavaScript ανυψώνει μόνο δηλώσεις, όχι αρχικοποιήσεις.

Το Παράδειγμα 1 δεν δίνει το ίδιο αποτέλεσμα με αυτό Παράδειγμα 2:

Παράδειγμα 1

var x = 5; // Initialize x
var y = 7; // Initialize y
elem = document.getElementById("demo"); // Find an element 
elem.innerHTML = x + " " + y;           // Display x and y

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var x = 5; // Initialize x
var y = 7; // Initialize y

elem = document.getElementById("demo"); // Find an element 
elem.innerHTML = x + " " + y;       // Display x and y

</script>

</body>
</html>

Παράδειγμα 2

var x = 5; // Initialize x

elem = document.getElementById("demo"); // Find an element 
elem.innerHTML = x + " " + y;           // Display x and y

var y = 7; // Initialize y

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var x = 5;  // Initialize x

elem = document.getElementById("demo");      // Find an element 
elem.innerHTML = "x is " + x + " and y is " + y;  // Display x and y

var y = 7;  // Initialize y
</script>

</body>
</html>

Έχει νόημα το y να είναι απροσδιόριστο στο τελευταίο παράδειγμα;

Αυτό συμβαίνει επειδή μόνο η δήλωση (var y), όχι η αρχικοποίηση (=7) ανυψώνεται στην κορυφή.

Λόγω ανύψωσης, το y έχει δηλωθεί πριν χρησιμοποιηθεί, αλλά επειδή οι αρχικοποιήσεις δεν ανυψώνονται, η τιμή του y δεν έχει οριστεί.

Το Παράδειγμα 2 είναι το ίδιο με τη σύνταξη:

Παράδειγμα

var x = 5; // Initialize x
var y;     // Declare y

elem = document.getElementById("demo"); // Find an element 
elem.innerHTML = x + " " + y;           // Display x and y

y = 7;    // Assign 7 to y

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var x = 5; // Initialize x
var y;   // Declare y

elem = document.getElementById("demo"); // Find an element 
elem.innerHTML = x + " " + y;       // Display x and y

y = 7;   // Assign 7 to y

</script>

</body>
</html>

Δηλώστε τις μεταβλητές σας στην κορυφή!

Η ανύψωση είναι (για πολλούς προγραμματιστές) μια άγνωστη ή παραμελημένη συμπεριφορά JavaScript.

Εάν ένας προγραμματιστής δεν κατανοεί την ανύψωση, τα προγράμματα ενδέχεται να περιέχουν σφάλματα (λάθη).<p> Για να αποφύγετε σφάλματα, δηλώνετε πάντα όλες τις μεταβλητές στην αρχή του κάθε πεδίο.<p> Επειδή έτσι ερμηνεύει η JavaScript το κώδικας, είναι πάντα ένας καλός κανόνας.

Η JavaScript σε αυστηρή λειτουργία δεν επιτρέπει τη χρήση μεταβλητών, εάν είναι δεν έχει δηλωθεί.
Μελέτη "χρήση αυστηρής" στο επόμενο κεφάλαιο.