Compréhension de la promotion et de la fermeture des variables JavaScript

Cet article vous donne une analyse détaillée des points de connaissances pertinents sur la promotion et la fermeture des variables JavaScript. Les amis qui sont intéressés par cela peuvent s'y référer.

Regardons d'abord une question :

<script>
 console.log(typeof a)//undefined
 var a=&#39;littlebear&#39;;
 console.log(a)//littlebear 
</script>
<script>
 console.log(typeof a)//string
 var a=1;
 console.log(a)//1
</script>

Dans le premier script, vous pouvez voir que var a est promu au sommet et a = 'littlebear' est maintenu en place.

La raison pour laquelle le deuxième script n'imprime pas undefined en premier est parce que a a été déclaré par var ci-dessus, donc var a ne sera plus promu.

Regardez une autre question :

<script>
  console.log(a)//function a(){}
  var a=1;
  console.log(a)//1
  function a(){}
  console.log(a)//1
</script>

Vous pouvez voir que la fonction a(){} est promue au sommet. Description de la fonction de levage Levage variable

1. Levage variable

Avant ES6, JavaScript n'avait pas de portée au niveau du bloc (une paire d'accolades {} , c'est-à-dire une portée au niveau du bloc), avec uniquement une portée globale
et une portée de fonction. Le levage de variable hisse une déclaration de variable au début de sa portée.
L'exemple du CV précédent est :

console.log(global); // undefined
var global = 'global';
console.log(global); // global

function fn () {
　　console.log(a); // undefined
　　var a = 'aaa';
　　console.log(a); // aaa
}
fn();

La raison pour laquelle le résultat d'impression ci-dessus est due à la promotion variable de js, en fait, le code ci-dessus est exécuté comme suit :

var global; // 变量提升，全局作用域范围内，此时只是声明，并没有赋值
console.log(global); // undefined
global = 'global'; // 此时才赋值
console.log(global); // 打印出global
 
function fn () {
　　var a; // 变量提升，函数作用域范围内
　　console.log(a);
　　a = 'aaa';
　　console.log(a);
}
fn();

2. Promotion de fonction

Il existe deux façons de créer des fonctions en js : la déclaration de fonction et la fonction littérale. Le levage de fonctions n'existe que pour les déclarations de fonctions ! Par exemple :

console.log(f1); // function f1() {}  
console.log(f2); // undefined 
function f1() {}
var f2 = function() {}

La raison pour laquelle les résultats ci-dessus sont imprimés est que la fonction de promotion dans js entraîne l'exécution du code comme suit :

function f1() {} // 函数提升，整个代码块提升到文件的最开始
console.log(f1);  
console.log(f2);  
var f2 = function() {}

3. Qu'est-ce qu'une fermeture

Une fermeture est une fonction qui a accès à une variable dans la portée d'une autre fonction.

En termes simples, Javascript permet l'utilisation de fonctions internes --- c'est-à-dire que les définitions de fonction et les expressions de fonction sont situées dans le corps de fonction d'une autre fonction. De plus, ces fonctions internes ont accès à toutes les variables locales, paramètres et autres fonctions internes déclarées dans la fonction externe dans laquelle elles existent. Une fermeture est formée lorsqu'une de ces fonctions internes est appelée en dehors de la fonction externe qui la contient.

4. Portée des variables

Pour comprendre les fermetures, vous devez d'abord comprendre la portée des variables.

La portée des variables n'est rien de plus que deux types : les variables globales et les variables locales.

La particularité du langage Javascript est que les variables globales peuvent être lues directement à l'intérieur de la fonction.

La fonction interne peut accéder aux variables de la fonction externe car la chaîne de portée de la fonction interne inclut la portée de la fonction externe

peut également être comprise comme : la portée de l'interne ; function Radiation atteint la portée de la fonction externe ;

var n=999;
function f1(){
　alert(n);
}
f1(); // 999

En revanche, les variables locales au sein de la fonction ne peuvent pas être lues en dehors de la fonction.

function f1(){
　var n=999;
}
alert(n); // error

Il y a quelque chose à noter ici. Lorsque vous déclarez des variables dans une fonction, vous devez utiliser la commande var. Si vous ne l'utilisez pas, vous déclarez en fait une variable globale !

function f1(){
　 n=999;
}
f1();
alert(n); // 999

5. Comment écrire et utiliser des fermetures

var Circle={ 
  "PI":3.14159, 
  "area":function(r){ 
    return this.PI * r * r; 
  } 
}; 
alert( Circle.area(1.0) );//3.14159

Je n'avais pas réalisé au début qu'écrire des objets comme celui-ci est aussi une sorte de fermeture . Je reviendrai aujourd'hui Pensez-y, c'est l'utilisation classique des fermetures !

6. Points à noter lors de l'utilisation des fermetures

1) Étant donné que les fermetures entraîneront le stockage des variables de la fonction en mémoire, la consommation de mémoire est très importante, les fermetures ne peuvent donc pas être abusées, sinon cela entraînerait des problèmes de performances sur la page Web et pourrait provoquer des fuites de mémoire dans IE. La solution consiste à supprimer toutes les variables locales inutilisées avant de quitter la fonction.

2) La fermeture modifiera la valeur de la variable à l'intérieur de la fonction parent en dehors de la fonction parent. Par conséquent, si vous utilisez la fonction parent comme objet, la fermeture comme méthode publique et les variables internes comme valeur privée, vous devez faire attention à ne pas modifier librement la valeur de la variable à l'intérieur de la fonction parent.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles connexes :

Méthode de chargement du fichier js personnalisé

Instance d'exécution de la fonction après avoir quitté la page vue

Utilisation du plug-in vue carrousel vue-concise-slider

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!