Explication détaillée d'exemples de portée de variable JavaScript, de mémoire, de fuites DOM et d'autres problèmes

Portée

La variable n'est pas déclarée dans la fonction ou déclarée sans var, c'est une variable globale et a une portée globale. Toutes les propriétés de l'objet window ont une portée globale. ; in Le code est accessible n'importe où. Les variables déclarées dans une fonction et modifiées avec var sont des variables locales et ne peuvent être utilisées que dans le corps de la fonction. Bien que les paramètres de la fonction n'utilisent pas var, ce sont toujours des variables locales.

Aucune portée au niveau du bloc

// if语句：

<script type="text/javascript">
if(true){            //if语句的花括号没有作用域的功能。

var box = "trigkit4";
}
alert(box);//弹出 trigkit4
</script>

La même chose est vraie pour l'instruction de boucle for.

Requête variable

Dans la requête variable, l'accès aux variables locales est plus rapide que les variables globales, il n'est donc pas nécessaire de rechercher la chaîne de portée.
L'exemple suivant :

<script type="text/javascript">
   var name = "Jack";
   function setName(){
      var name = "trigkit4";
      return name; //从底层向上搜索变量
  }
  alert(setName());   
</script>

Problème de mémoire

javascript dispose d'un mécanisme automatique de récupération de place, une fois les données n'est plus utilisé , vous pouvez le mettre à "null" pour libérer la référence

Référence circulaire

Un exemple très simple : un objet DOM est référencé par un Javascript objet, et en même temps Si le même objet Javascript ou un autre objet Javascript est à nouveau référencé, cet objet DOM peut provoquer une fuite de mémoire. La référence à cet objet DOM ne sera pas récupérée par le garbage collector à l'arrêt du script. Pour rompre un cycle de référence, l'objet référençant l'élément DOM ou une référence à l'objet DOM doit se voir attribuer la valeur null.

Fermeture

Lorsqu'une variable en dehors de la fermeture est introduite dans la fermeture, l'objet ne peut pas être récupéré (GC) à la fin de la fermeture.

var a = function() {
 var largeStr = new Array(1000000).join('x');
 return function() {
  return largeStr;
 }
}();

Fuite DOM

Lorsque le COM d'origine est supprimé, la référence du nœud enfant n'est pas supprimée. Elle ne peut pas être recyclée. .

var select = document.querySelector;
var treeRef = select('#tree');
//在COM树中leafRef是treeFre的一个子结点
var leafRef = select('#leaf'); 
var body = select('body');
body.removeChild(treeRef);
//#tree不能被回收入，因为treeRef还在
//解决方法:
treeRef = null;
//tree还不能被回收，因为叶子结果leafRef还在
leafRef = null;
//现在#tree可以被释放了。

Fuites de minuterie des minuteries

Les minuteries sont également un endroit courant où des fuites de mémoire se produisent :

for (var i = 0; i < 90000; i++) {
 var buggyObject = {
  callAgain: function() {
   var ref = this;
   var val = setTimeout(function() {
    ref.callAgain();
   }, 90000);
  }
 }
 buggyObject.callAgain();
 //虽然你想回收但是timer还在
 buggyObject = null;
}

Débogage de la mémoire

L'outil de débogage de la mémoire intégré à Chrome peut facilement visualiser l'utilisation de la mémoire et les fuites de mémoire :
Cliquez sur Enregistrer dans la chronologie - > Mémoire :

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!