Page d'accueil>Tutoriel de conception de sites Web>Tutoriel Javascript

Objet global

Auteur：Eve Cole Date de mise à jour：2024-12-20 17:46:34

L'objet global fournit des variables et des fonctions disponibles partout. Par défaut, ceux qui sont intégrés au langage ou à l'environnement.

Dans un navigateur il s'appelle window , pour Node.js il est global , pour d'autres environnements il peut avoir un autre nom.

Récemment, globalThis a été ajouté au langage, en tant que nom standardisé pour un objet global, qui devrait être pris en charge dans tous les environnements. Il est pris en charge dans tous les principaux navigateurs.

Nous utiliserons ici window , en supposant que notre environnement est un navigateur. Si votre script peut s'exécuter dans d'autres environnements, il est préférable d'utiliser globalThis à la place.

Toutes les propriétés de l'objet global sont accessibles directement :

 alert("Bonjour");
// est la même chose que
window.alert("Bonjour");

Dans un navigateur, les fonctions et variables globales déclarées avec var (et non let/const !) deviennent la propriété de l'objet global :

 var gVar = 5 ;

alerte(fenêtre.gVar); // 5 (devenu une propriété de l'objet global)

Les déclarations de fonction ont le même effet (instructions avec mot-clé function dans le flux de code principal, pas expressions de fonction).

S'il vous plaît, ne comptez pas là-dessus ! Ce comportement existe pour des raisons de compatibilité. Les scripts modernes utilisent des modules JavaScript là où cela ne se produit pas.

Si nous utilisions let à la place, une telle chose ne se produirait pas :

 soit gLet = 5 ;

alert(window.gLet); // non défini (ne devient pas une propriété de l'objet global)

Si une valeur est si importante que vous souhaitez la rendre disponible globalement, écrivez-la directement en tant que propriété :

 // rend les informations utilisateur actuelles globales, pour permettre à tous les scripts d'y accéder
fenêtre.currentUser = {
  prénom : "Jean"
} ;

// ailleurs dans le code
alert(currentUser.name);  // John

// ou, si nous avons une variable locale avec le nom "currentUser"
// récupère-le explicitement depuis la fenêtre (en toute sécurité !)
alerte (window.currentUser.name); // John

Cela dit, l’utilisation de variables globales est généralement déconseillée. Il devrait y avoir le moins de variables globales possible. La conception du code dans laquelle une fonction obtient des variables « d'entrée » et produit certains « résultats » est plus claire, moins sujette aux erreurs et plus facile à tester que si elle utilise des variables externes ou globales.

Utilisation pour les polyfills

Nous utilisons l'objet global pour tester la prise en charge des fonctionnalités du langage moderne.

Par exemple, testez si un objet Promise intégré existe (ce n'est pas le cas dans les très anciens navigateurs) :

 si (!window.Promise) {
  alert("Votre navigateur est vraiment ancien !");
}

S'il n'y en a pas (par exemple, nous sommes dans un ancien navigateur), nous pouvons créer des « polyfills » : ajouter des fonctions qui ne sont pas prises en charge par l'environnement, mais qui existent dans le standard moderne.

 si (!window.Promise) {
  window.Promise = ... // implémentation personnalisée de la fonctionnalité de langage moderne
}

Résumé

  • L'objet global contient des variables qui devraient être disponibles partout.

    Cela inclut les éléments JavaScript intégrés, tels que Array , et les valeurs spécifiques à l'environnement, telles que window.innerHeight – la hauteur de la fenêtre dans le navigateur.

  • L'objet global a un nom universel globalThis .

    …Mais le plus souvent, il est désigné par des noms spécifiques à l'environnement « à l'ancienne », tels que window (navigateur) et global (Node.js).

  • Nous devons stocker les valeurs dans l'objet global uniquement si elles sont véritablement globales pour notre projet. Et gardez leur nombre au minimum.

  • Dans le navigateur, sauf si nous utilisons des modules, les fonctions globales et les variables déclarées avec var deviennent une propriété de l'objet global.

  • Pour rendre notre code évolutif et plus facile à comprendre, nous devons accéder directement aux propriétés de l'objet global, en tant que window.x .

Articles connexes