Apprenez les variables globales javascript avec les compétences me_javascript

1. Utilisez le moins possible les objets globaux

Le problème avec les variables globales est que tout le code de votre application JavaScript et de vos pages Web partage ces variables globales. Elles vivent dans le même espace de noms global, donc lorsque deux parties différentes du programme définissent le même nom mais ont des fonctions différentes lors de l'utilisation. variables globales, les conflits de noms sont inévitables.

Il est également courant que les pages Web contiennent du code qui n'a pas été écrit par le développeur de la page, par exemple :

• Bibliothèque JavaScript tierce
• Code du script de l'annonceur
• Code de script de suivi et d'analyse des utilisateurs tiers
• Différents types de widgets, drapeaux et boutons

Par exemple, le script tiers définit une variable globale appelée result ; puis définit également une variable globale nommée result dans votre fonction. Le résultat est que les dernières variables écrasent les précédentes et que le script tiers rote soudainement !

Parce que si vous modifiez accidentellement la variable globale quelque part dans le code, cela provoquera des erreurs dans d'autres modules qui dépendent de la variable globale. De plus, la cause de l’erreur est difficile à déboguer et à trouver.

De plus, l'objet window doit être utilisé pour exécuter la page Web et le moteur du navigateur doit à nouveau parcourir les propriétés de la fenêtre, ce qui entraîne une réduction des performances.

• Les variables globales sont le lien entre les différents modules. Les modules ne peuvent accéder aux fonctions fournies les uns par les autres que via des variables globales
• N'utilisez jamais de variables globales lorsque vous pouvez utiliser des variables locales

var i,n,sum//globals
function averageScore(players){
 sum =0;
 for(i = 1, i = player.length; i<n; i++){
  sum += score(players[i]);
 }
 return sum/n;
}

Gardez ces variables locales et utilisez-les uniquement dans le cadre du code qui doit les utiliser.

function averageScore(players){
var i,n,sum;
 sum =0;
 for(i = 1, i = player.length; i<n; i++){
  sum += score(players[i]);
 }
 return sum/n;
}

Dans le navigateur, le mot-clé this pointera vers l'objet fenêtre global
L'espace de noms global de JavaScript est également exposé en tant qu'objet global accessible dans la portée globale du programme, qui sert de valeur initiale du mot-clé this. Dans les navigateurs Web, les objets globaux sont liés à la variable globale window. L'ajout ou la modification d'une variable globale met automatiquement à jour l'objet global.

this.foo; //undefined
foo ="global foo"; //"global foo"
this.foo; //"global foo"

De même, la mise à jour de l'objet global mettra automatiquement à jour l'espace de noms global :

var foo ="global foo";
this.foo; //"global foo"
this.foo ="changed";
foo; //"changed"

Deux façons de modifier l'objet global, en le déclarant via le mot-clé var et en définissant les attributs sur l'objet global (via le mot-clé this)

Utilisez des objets globaux pour effectuer la détection de fonctionnalités (Feature Detection) pour l'environnement d'exécution actuel. Par exemple, ES5 fournit un objet JSON pour exploiter les données JSON, vous pouvez alors utiliser if (this.JSON) pour déterminer si l'environnement d'exécution actuel. le prend en charge.

if(!this.JSON){
 this.JSON ={
  parse:...,
  stringify:...
 }
}

2. Comment éviter les variables globales

Méthode 1 : Créer une seule variable globale.

MYAPP.stooge = {
 "first-name": "Joe",
 "last-name": "Howard"
};

MYAPP.flight = {
 airline: "Oceanic",
 number: 815,
 departure: {
  IATA: "SYD",
  time: "2004-09-22 14:55",
  city: "Sydney"
 },
 arrival: {
  IATA: "LAX",
  time: "2004-09-23 10:42",
  city: "Los Angeles"
 }
};

Méthode 2 : Utiliser le mode module

var serial_maker = function ( ) {

// Produce an object that produces unique strings. A
// unique string is made up of two parts: a prefix
// and a sequence number. The object comes with
// methods for setting the prefix and sequence
// number, and a gensym method that produces unique
// strings.

 var prefix = '';
 var seq = 0;
 return {
  set_prefix: function (p) {
   prefix = String(p);
  },
  set_seq: function (s) {
   seq = s;
  },
  gensym: function ( ) {
   var result = prefix + seq;
   seq += 1;
   return result;
  }
 };
}( );

var seqer = serial_maker( );
seqer.set_prefix = 'Q';
seqer.set_seq = 1000;
var unique = seqer.gensym( ); // unique is "Q1000"

Le soi-disant

mode module consiste à créer une fonction, qui comprend des variables privées et un objet privilégié. Le contenu de l'objet privilégié est que les variables privées sont accessibles. en utilisant la fonction de fermeture, et renvoie enfin l'objet privilégié.

Tout d'abord, la deuxième méthode peut non seulement être utilisée comme variable globale, mais peut également être utilisée pour déclarer des variables globales localement. Parce que même si vous modifiez le seqer dans un endroit inconnu, une erreur sera immédiatement signalée car il s'agit d'un objet et non d'une chaîne.

Méthode 3 : Zéro variable globale

Les variables globales nulles sont en fait une méthode de traitement de variables locales adoptée pour s'adapter à une petite section de code fermé et ne conviennent que pour une utilisation dans certains scénarios spéciaux. Les plus courants sont des scripts complètement indépendants auxquels d’autres scripts n’ont pas accès.

Pour utiliser zéro variable globale, vous devez utiliser une fonction d'exécution immédiate. L'utilisation est la suivante.

( function ( win ) {

 'use strict' ;
 var doc = win.document ;
 //在此定义其他的变量并书写代码
} )

3. Variables globales inattendues

En raison de deux caractéristiques de JavaScript, il est étonnamment facile de créer inconsciemment des variables globales. Premièrement, vous pouvez utiliser des variables sans même les déclarer ; deuxièmement, JavaScript a le concept de variables globales implicites, ce qui signifie que toute variable que vous ne déclarez pas devient une propriété d'objet globale. Référez-vous au code ci-dessous :

function sum(x, y) {
 // 不推荐写法: 隐式全局变量
 result = x + y;
 return result;
}

Le résultat dans ce code n'est pas déclaré. Le code fonctionne toujours correctement, mais après avoir appelé la fonction, vous vous retrouvez avec un espace de noms global supplémentaire, ce qui peut être source de problèmes.

La règle générale est de toujours utiliser var pour déclarer les variables, comme le démontre la fonction sum() améliorée :

function sum(x, y) {
 var result = x + y;
 return result;
}

Un autre contre-exemple de création de variables globales implicites consiste à utiliser des chaînes de tâches pour les déclarations var partielles. Dans l'extrait suivant, a est une variable locale mais b est une variable globale, ce qui n'est probablement pas ce que vous souhaitez :

// 反例，勿使用
function foo() {
 var a = b = 0;
 // ...
}

此现象发生的原因在于这个从右到左的赋值，首先，是赋值表达式b = 0，此情况下b是未声明的。这个表达式的返回值是0，然后这个0就分配给了通过var定义的这个局部变量a。换句话说，就好比你输入了：

var a = (b = 0);
如果你已经准备好声明变量，使用链分配是比较好的做法，不会产生任何意料之外的全局变量，如：

function foo() {
 var a, b;
 // ... a = b = 0; // 两个均局部变量
}

然而，另外一个避免全局变量的原因是可移植性。如果你想你的代码在不同的环境下（主机下）运行，使用全局变量如履薄冰，因为你会无意中覆盖你最初环境下不存在的主机对象

  总是记得通过var关键字来声明局部变量

 使用lint工具来确保没有隐式声明的全局变量

以上就是对javascript的全局变量介绍，希望对大家的学习有所帮助。