Dans une page, toutes les fonctions offertes par le navigateur doivent bien être posées quelque part. setTimeout, alert, fetch ne sortent pas du langage lui-même : elles appartiennent à un objet.
Cet objet, c'est window, et il est si central qu'on peut presque toujours oublier de l'écrire.
Définition
window est l'objet global d'un onglet de navigateur. Il représente la fenêtre qui affiche la page, et il porte à la fois les interfaces du navigateur et les variables globales du script. Toute propriété de window est utilisable sans préfixe.
window.setTimeout(() => console.log("une seconde"), 1000);
setTimeout(() => console.log("pareil"), 1000);
console.log(window.document === document); // trueLes deux écritures désignent la même fonction. Le préfixe ne se justifie que pour lever une ambiguïté, par exemple quand une variable locale porte le même nom.
Ce qu'il porte
| Propriété | Ce qu'elle donne |
|---|---|
window.location | L'adresse affichée, et de quoi naviguer ailleurs |
window.innerWidth | La largeur utile de la fenêtre, en pixels |
window.history | L'historique de navigation de l'onglet |
window.navigator | Des informations sur le navigateur et l'appareil |
window.localStorage | Le stockage persistant du site, décrit par localStorage |
S'y ajoutent les événements propres à la fenêtre : resize, scroll, load, et beforeunload juste avant la fermeture.
Variables globales et window
Dans un script classique, une déclaration var au premier niveau crée une propriété de window. Ce n'est le cas ni de let ni de const, qui vivent dans une portée séparée.
var ancien = 1;
let moderne = 2;
console.log(window.ancien); // 1
console.log(window.moderne); // undefinedDans un module ES, chargé avec type="module", même var reste local au fichier. C'est une des raisons pour lesquelles les modules ne polluent pas la portée globale.
globalThis, la version portable
window n'existe que dans une page. Sous Node.js, dans un Web Worker ou dans un environnement de test, le référencer lève une ReferenceError. globalThis désigne l'objet global quel que soit l'endroit.
const enNavigateur = typeof window !== "undefined";
globalThis.compteurAppels = 0; // fonctionne partout
console.log(enNavigateur);Questions fréquentes
Faut-il écrire window. devant chaque appel ?
Non, et le code courant ne le fait pas. Le préfixe reste utile dans deux cas : quand un nom local masque le nom global, et quand on teste l'existence d'une interface récente avant de l'utiliser. Écrire window.location plutôt que location est aussi plus lisible pour un relecteur.
window.location et document.location, est-ce pareil ?
Oui, les deux propriétés donnent le même objet Location, et la comparaison stricte le confirme. La forme window.location est la plus répandue, celle passant par document est un héritage des premières versions du langage.
Comment savoir si le code tourne dans un navigateur ?
Le test typeof window !== "undefined" est le plus sûr, car typeof ne lève jamais d'erreur sur un nom inconnu. Ce contrôle est indispensable dans un code rendu côté serveur, où le même fichier s'exécute une fois sans fenêtre puis une fois dans le navigateur.