Maison > interface Web > js tutoriel > LEVAGE EN JS (ERREUR DE RÉFÉRENCE !!)

LEVAGE EN JS (ERREUR DE RÉFÉRENCE !!)

Susan Sarandon
Libérer: 2024-12-31 02:27:10
original
224 Les gens l'ont consulté

HOISTING IN JS (REFERENCE ERROR!!)

Comprendre le levage en JavaScript

Le levage est l'un des concepts les plus fondamentaux de JavaScript, mais il peut être une source de confusion pour les développeurs débutants et même chevronnés.

Dans ce blog, nous démystifierons le levage, expliquerons son fonctionnement et fournirons des exemples clairs pour vous aider à bien comprendre ce concept.

Qu'est-ce que le levage ?

Le levage est un mécanisme JavaScript dans lequel les déclarations de variables, fonctions et classes sont déplacées en haut de leur portée pendant la phase de compilation.

Cela signifie que vous pouvez utiliser ces éléments avant qu'ils ne soient réellement déclarés dans le code.

Cependant, le levage fonctionne différemment pour var, let, const, les fonctions et les classes, et c'est là que la confusion surgit souvent

Comment fonctionne le levage

Lorsque le code JavaScript est exécuté, il passe par deux phases :

  1. Phase de compilation : Durant cette phase, le moteur hisse les déclarations au sommet de son périmètre.

  2. Phase d'exécution : Le code s'exécute ligne par ligne, en respectant les règles de levage.

Règles de levage pour différentes déclarations

1. var

Les variables déclarées avec var sont hissées, mais leur valeur n'est pas initialisée. Avant l'initialisation, ils sont définis sur non défini.

console.log(a); // Output: undefined
var a = 10;
console.log(a); // Output: 10
Copier après la connexion
  1. laisser et const

Les variables déclarées avec let et const sont également hissées mais restent dans la Zone Morte Temporelle (TDZ). Ils ne sont accessibles que lorsque leur déclaration est rencontrée dans le code.

console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 20;

Copier après la connexion
console.log(c); // ReferenceError: Cannot access 'c' before initialization
const c = 30;
Copier après la connexion
  1. Fonctions

Les déclarations de fonctions sont entièrement hissées, ce qui signifie que leur nom et leur corps sont déplacés vers le haut. Cela vous permet d'appeler des fonctions avant qu'elles ne soient déclarées.

greet(); // Output: "Hello, World!"

function greet() {
    console.log("Hello, World!");
}

Copier après la connexion

Cependant, les expressions de fonction sont traitées différemment. Ils se comportent comme des variables déclarées avec var, let ou const :

sayHi(); // ReferenceError: Cannot access 'sayHi' before initialization

const sayHi = function () {
    console.log("Hi!");
};
Copier après la connexion
  1. Cours

Les classes sont levées mais restent dans la Zone Morte Temporelle, semblable à let et const. Vous ne pouvez pas accéder à une classe avant qu'elle ne soit déclarée.

const obj = new MyClass(); // ReferenceError: Cannot access 'MyClass' before initialization

class MyClass {
    constructor() {
        this.name = "Class";
    }
}
Copier après la connexion

Comprendre la zone morte temporelle (TDZ)

La Zone Morte Temporelle est la période entre le début de la portée et le point où la variable est déclarée. Pendant cette période, tout accès aux variables let ou const générera une ReferenceError.

Key Takeaways

Declaration   Hoisted?       Behavior Before Initialization

var            Yes              undefined

let            Yes            ReferenceError (in TDZ)

const          Yes             ReferenceError (in TDZ)

Function Declaration  Yes       Fully hoisted, works before 
declaration

Function Expression  Partially (as var)   undefined or ReferenceError (if let/const)

Class           Yes              ReferenceError (in TDZ)
Copier après la connexion

Conclusion

Comprendre le levage est essentiel pour écrire du code JavaScript propre et prévisible. Même si cela peut sembler magique au début, connaître les règles de var, let, const, fonctions et classes vous aidera à éviter les pièges courants. Déclarez toujours vos variables et fonctions en haut de leur portée pour garantir la clarté et réduire les risques d'erreurs.

Bon codage !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:dev.to
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal