Expliquer le mécanisme de gestion de la mémoire JS et la vérification

javascriptLa colonne présente le mécanisme de gestion de la mémoire et la vérification

Recommandé (gratuit) : JavaScript (Vidéo)

Portée

Les variables JavaScript sont restreintes par portée Si cela est le cas. devient hors de portée, la variable ne peut plus être utilisée. L'avantage de ceci est :

• Cela peut éviter que la variable actuelle soit convertie en variable globale
• Limiter efficacement le rôle. de la variable Area

et de la variable scope produiront également des portées différentes selon le mode de déclaration :

• Non déclaré : variable globale
• var Déclaration : la portée est dans la fonction
• let, const déclaration : la portée est dans {}

var déclaration Variables

La portée des variables déclarées dans une fonction sera limitée à la pile d'appels de la fonction, et les variables dans la portée ne pourront pas être obtenues directement de l'extérieur. Dans l'exemple ci-dessous, les variables de la fonction fn ne peuvent pas être visualisées globalement.

function fn() {
  var a = 1;
}
fn();
console.log(a); // 无法得到 fn 函数內的 a 变量

Les "fonctions immédiates" sont donc souvent utilisées pour limiter la portée des variables, principalement pour éviter la génération de variables globales.

(function() {
  var b = 1;
})();
console.log(b); // 无法得到 fn 函数內的 b 变量

let, const variables déclarées

Les portées let et const nouvellement ajoutées après ES6 sont différentes du passé et utilisent {} à la place. un moyen de limiter la portée, cela permet d'utiliser des boucles et certaines syntaxes pour éviter de générer des variables redondantes qui affectent la portée. La différence entre

et var est que la portée des variables définies par const est limitée à {}. Ainsi, la variable c dans cet exemple peut obtenir sa valeur de manière externe, mais d ne le peut pas.

{
  var c = 1;
  const d = 1;
}
console.log(c); // 1
console.log(d); // Uncaught ReferenceError: d is not defined，无法取到变量 d

Mécanisme de gestion de la mémoire

Chaque fois que nous ajoutons une variable, un emplacement sera occupé dans la mémoire pour enregistrer sa valeur afin qu'elle puisse être exécutée plus tard dans le programme Peut être utilisé plusieurs fois.

Le code suivant ouvrira un a espace en mémoire pour stocker la valeur du chiffre 1.

var a = 1

Le processus est le suivant :

1. Ouvrez un espace mémoire pour stocker les variables a, mais il n'y a pas encore d'affectation (pour les raisons, veuillez vous référer à : Levage)

1. attribue une valeur à a.

Toutes les variables occuperont de l'espace mémoire. De plus, les objets, les attributs de tableau et les paramètres de fonction occuperont également de l'espace mémoire en utilisant le même concept. Lorsqu'une fonction est appelée, la portée de chaque fonction occupera également la mémoire à plusieurs reprises. À mesure que les applications deviennent plus complexes, la mémoire peut être épuisée si elle continue à occuper de la mémoire sans la libérer correctement.

Le moteur JavaScript dispose d'un mécanisme de recyclage de mémoire qui libérera la mémoire variable qui n'est plus utilisée. Le concept de base est le suivant : la mémoire sera libérée lorsqu'aucune référence ne la pointe.

Depuis MDN : collectable s'il n'y a aucune référence pointant vers lui.

Vérification de la libération de mémoire

Ce qui suit utilise un exemple pour illustrer et vérifier mémoire Le mécanisme de libération utilise d'abord une fonction pour générer une chaîne très longue. Les chaînes longues occuperont beaucoup d'espace mémoire.

Après avoir appelé la fonction randomString, une très longue chaîne sera renvoyée :

function randomString(length) {
  var result = '';
  var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
  var charactersLength = characters.length;
  for (var i = 0; i <h4>Cas 1 : Conserver la variable dans un état référençable (la mémoire ne sera pas libérée) </h4><p>Définissez une variable globale <code>demoData</code>, qui continuera à être référencée. </p><pre class="brush:php;toolbar:false">var demoData = []; // 全局变量
function getData() {
  for (let i = 0; i <p>Après avoir exécuté ce code, entrez dans la page Mémoire dans Chrome DevTools. Cette fonction peut obtenir l'état de la mémoire occupée par la page actuelle. Cliquez ensuite sur le bouton "Prendre un instantané". </p><p><img src="https://img.php.cn/upload/image/189/951/684/1609320713198525.png" title="1609320713198525.png" alt="Expliquer le mécanisme de gestion de la mémoire JS et la vérification"></p><p>Vous pouvez voir qu'après l'exécution de ce code, il occupe actuellement 6,2 Mo d'espace mémoire (remarque : tout environnement de navigateur et plug-ins affectera l'état de la mémoire occupée). </p><p><img src="https://img.php.cn/upload/image/742/181/269/1609320718742831.png" title="1609320718742831.png" alt="Expliquer le mécanisme de gestion de la mémoire JS et la vérification"></p><h4>Cas 2 : Rendre la variable incapable d'être référencée à nouveau (libérer de la mémoire après l'exécution) </h4><p>Limiter la portée de la variable afin que la variable ne puisse plus être référencée ne soient plus référencés en externe. </p><p>Ce code exécutera toujours la fonction et attribuera la valeur à la variable, mais la valeur de <code>demoData</code> ne pourra plus être référencée en externe. </p><pre class="brush:php;toolbar:false">function getData() {
  var demoData = []; // 局部变量
  for (var i = 0; i <p>然后回到 Memory 页点击 "Take snapshot" 重新取得内存的状态，接下来会得到与前面不同的结果，这次只占用了 1.2MB 的内存（其中 5MB 被释放掉了）</p><p><img src="https://img.php.cn/upload/image/148/641/618/1609320723163241.png" title="1609320723163241.png" alt="Expliquer le mécanisme de gestion de la mémoire JS et la vérification"></p><p><strong>总结</strong></p><p>通过前面的例子，我们知道了作用域以及内存之间的关系，而内存管理也是前端打工人必须要掌握的知识（除了控制内存的使用大小，还需在必要时保留而不被释放）。</p>

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!