Notes d'étude Javascript - Fonctions (6) : Portée et connaissances de base de l'espace de noms

Dans l'introduction précédente, nous savons déjà que Javascript n'a pas de portée au niveau du bloc, seulement une portée au niveau de la fonction.

Copier le code Le code est le suivant :

function test() { // une portée
for(var i = 0; i < 10; i ) { // pas une portée
             // compte
>
console.log(i); // 10
>

Il n'y a pas non plus d'espaces de noms explicites en Javascript, ce qui signifie que tout est défini dans la portée globale. Chaque fois qu'une variable est référencée, Javascript parcourra toute la portée globale jusqu'à ce qu'il trouve la variable. Si la variable n'est pas trouvée après avoir parcouru toute la portée globale, une ReferenceError est levée.

Veuillez saisir la description de l'image

Variables globales implicites

Copier le code Le code est le suivant :

//script A
foo = '42';
//script B
var foo = '42'

Les deux exemples ci-dessus produisent des effets différents. Le premier définira la variable foo dans la portée globale, tandis que le second définira la variable foo dans la portée actuelle.
Il faut noter que ne pas utiliser le mot clé var aura des effets inattendus.

Copier le code Le code est le suivant :

// portée globale
var foo = 42;
fonction test() {
// portée locale
foo = 21;
>
test();
foo; // 21

Étant donné que var n'est pas utilisé pour définir la variable foo dans le test de fonction, la variable globale foo en dehors de la fonction sera écrasée. Même si cela ne semble pas être un gros problème, lorsqu'il y a des milliers de lignes de code, cela peut être un bug difficile à détecter.

Copier le code Le code est le suivant :

// portée globale
var items = [/* une liste */];
pour (var je = 0; je < 10; je ) {
subLoop();
>
fonction subLoop() {
// portée de subLoop
for(i = 0; i < 10; i ) { // instruction var manquante
              // fais des trucs incroyables !
>
>

Dans l'exemple ci-dessus, la boucle externe s'arrêtera la première fois qu'elle sera exécutée, car la variable i à l'intérieur de la fonction de sous-boucle écrasera la variable globale externe i. Il suffit d'ajouter un var à l'intérieur de la fonction pour éviter cette erreur, il ne faut donc pas oublier d'ajouter le mot-clé var lors de la définition des variables. À moins que nous voulions vraiment affecter des variables globales externes.

Variables locales

Les variables locales en Javascript ne peuvent être générées que de deux manières, l'une consiste à les déclarer via le mot-clé var et l'autre en tant que paramètre formel d'une fonction.

Copier le code Le code est le suivant :

// portée globale
var foo = 1;
var barre = 2;
var je = 2;
test de fonction (i) {
// portée locale de la fonction test
je = 5;
var foo = 3;
barre = 4;
>
test(10);

À l'heure actuelle, les variables i et foo à l'intérieur de la fonction test sont des variables locales, et bar écrasera la variable globale externe bar.

Levage

Javascript hissera les déclarations de variables, ce qui signifie que les expressions var et les déclarations de fonctions seront hissées en haut de la portée.

Copier le code Le code est le suivant :

barre();
var barre = fonction() {};
var uneValeur = 42;
test();
test de fonction (données) {
Si (faux) {
         goo = 1;
} autre {
      var goo = 2;
>
pour (var je = 0; je < 100; je ) {
      var e = données[i];
>
>

Avant d'exécuter le code ci-dessus, l'expression var et la déclaration de la fonction test seront promues en haut, donc le programme fonctionnera normalement et aucune erreur ne sera signalée.

Copier le code Le code est le suivant :

// Les instructions var ont été déplacées ici
var bar, someValue ; // par défaut : "non défini"
// la déclaration de fonction a également été déplacée
test de fonction (données) {
var goo, i, e; // la portée du bloc manquant les déplace ici
Si (faux) {
         goo = 1;
} autre {
         goo = 2;
>
pour (je = 0; je < 100; je ) {
         e = données[i];
>
>
bar(); // échoue avec une TypeError puisque bar est toujours 'indéfini'
someValue = 42; // les affectations ne sont pas affectées par le levage
barre = fonction() {};
test();

Étant donné que Javascript n'a pas de portée au niveau du bloc, cela élèvera non seulement l'expression var, mais rendra également la structure if moins intuitive.
Dans l'exemple ci-dessus, bien qu'il semble que if opère sur la variable globale goo, en fait, parce que la variable goo est promue, c'est une variable locale qui est modifiée.
Sans comprendre les règles de levage, vous pourriez penser que le code suivant générera une ReferenceError.

Copier le code Le code est le suivant :

// vérifie si SomeImportantThing a été initialisé
si (!SomeImportantThing) {
var Une chose importante = {};
>

Bien sûr, le code ci-dessus est sans erreur car l'expression var a été promue en haut avant l'exécution du code.

Copier le code Le code est le suivant :

var Une chose importante ;
// un autre code pourrait initialiser SomeImportantThing ici, ou pas
// assurez-vous qu'il est là
si (!SomeImportantThing) {
QuelqueImportantThing = {};
>

Je voudrais recommander le billet de blog de @nightire Fan Ge "Comprendre JavaScript (2)", qui explique l'amélioration de manière très détaillée.
Ordre de résolution de nom

Lorsque vous essayez d'accéder à une variable foo dans la portée d'une fonction, Javascript apparaîtra dans l'ordre suivant :

S'il existe une définition de var foo dans la portée actuelle.
S'il existe une variable foo dans le paramètre de fonction.
Si la fonction elle-même est nommée foo.
Accédez au domaine externe et effectuez une recherche à partir de la première partie.
Espace de noms

L'un des problèmes les plus courants est celui des conflits de noms, provoqués par le fait que Javascript n'a qu'une seule portée globale. Mais ce problème peut être résolu par des fonctions externes anonymes.

Copier le code Le code est le suivant :

(fonction() {
// un "espace de noms" autonome
window.foo = fonction() {
                // une fermeture exposée
};
})(); // exécute la fonction immédiatement

Les fonctions anonymes dans l'exemple ci-dessus sont considérées comme des expressions, elles seront donc exécutées.

Copier le code Le code est le suivant :

( // évalue la fonction entre parenthèses
fonction() {}
) // et renvoie l'objet fonction
() // appelle le résultat de l'évaluation

Bien sûr, nous pouvons également appeler des expressions de fonction d'autres manières, avec des structures différentes, mais avec le même effet.

Copier le code Le code est le suivant :

// Quelques autres styles pour invoquer directement le
!function(){}()
fonction(){}()
(function(){}());
// et ainsi de suite...

Résumé

Il est recommandé d'utiliser des fonctions externes anonymes pour encapsuler le code dans un espace. Cela peut non seulement résoudre les conflits d'espace de noms, mais également faciliter la modularisation du programme.
De plus, l’utilisation de variables globales n’est pas une bonne pratique, car elles sont coûteuses à maintenir et sujettes aux erreurs.

Les types d'espaces de noms, les fonctions, les variables, les modèles, etc. appartiennent tous à des entités.
La principale chose que les entités ont en commun est qu’elles peuvent avoir des noms. (De plus, une étiquette peut aussi avoir un nom, mais ce n'est pas une entité.)
La portée de l'espace de noms est un terme général désignant un type de portée, ainsi que la portée du bloc, la portée de la classe, la portée du prototype de fonction et la portée de la fonction (valable uniquement pour les étiquettes). Les noms déclarés dans un espace de noms sont dans la portée de l'espace de noms. Les noms globaux sont considérés comme faisant partie de la portée implicite de l'espace de noms global.

Le rôle d'un espace de noms est bien une portée, mais il est différent d'une simple portée. Vous pouvez déclarer le même espace de noms plusieurs fois à plusieurs endroits, mais le contenu ne peut pas être redéfini. Ils seront finalement combinés en un seul nom. Espace, tout comme std, définitions de macros partout