Une explication détaillée de la location et de la fermeture dans ES6

Cet article présente principalement une compréhension approfondie de let et de la fermeture dans ES6. Maintenant, je le partage avec vous et vous donne une référence.

Cet article présente une compréhension approfondie de let et de la fermeture dans ES6 et le partage avec tout le monde, comme suit :

Avant de commencer cet article, jetons un œil à un morceau de code

for(var i=0;i<10;i++){
  arr[i]=function(){
    return i;
  }
}
console.log(arr[3]());//10

Évidemment, ce code génère 10, et ne renvoie pas 3 comme prévu. La raison est également très simple (promotion de variable js) lorsque la fonction est appelée, elle accède à i dans une portée globale. temps, la boucle for a été exécutée, et la variable globale i=10;

Dans le standard ES5, si on veut renvoyer le 3 attendu, l'approche habituelle est aussi très simple, qui est de laisser chacun Les fonctions du tableau ont une portée distincte, il nous suffit alors de construire une portée immédiate. Il suffit d'exécuter la fonction (il n'y a pas de portée au niveau du bloc dans js, seules la portée de la fonction et la portée globale sont distinguées) comme suit :

var array=[];
for(var i=0;i<10;i++){
  array[i]=(function(i){
  return function(){
    return i;
    }
  })(i);
}
console.log(array[3]());//3

De cette façon, chaque fonction du tableau est dans un état d'exécution immédiate. Dans la portée fonctionnelle de la fonction, la fonction d'exécution immédiate est passée dans i. En fait, la boucle for exécute le code suivant :

  array[0]=(function(i){
  return function(){
    return i;
    }
  })(0);
  array[1]=(function(i){
  return function(){
    return i;
    }
  })(1);
  array[2]=(function(i){
  return function(){
    return i;
    }
  })(2);
……

De cette façon, chaque fonction du groupe de nombres correspond à une étendue de fonction distincte ((Pour l'exécution immédiate des fonctions) Un total de 10 étendues de fonction sont créées ici. La valeur i dans ces étendues de fonction est le 0. ..9 transmis lors de l'exécution. Lors de l'exécution de

array[3](); La valeur i accessible par la fonction est le i dans la portée de la fonction immédiatement exécutée correspondante, pas la valeur i globale, donc que nous obtenions l'effet escompté.

Cela dit, parlons brièvement des fermetures. Les fermetures peuvent être comprises comme une fermeture qui est une zone de pile qui n'a pas libéré de ressources, et les variables de la zone de pile sont dans un état activé. Dans l'exemple ci-dessus, le système alloue de la mémoire lorsque la boucle for est exécutée. Le thread d'exécution js crée la zone de pile d'exécution. Lors de l'exécution, il est détecté que la variable i dans la fonction d'exécution immédiate est référencée par la fonction interne, donc la. La zone de pile n'est pas libérée dans la mémoire. La fonction (Lorsqu'elle est appelée (élément de tableau), la première chose accessible en fonction de la chaîne de portée est la variable dans la portée de niveau supérieur (exécution immédiate de la fonction).

Les fermetures ne seront pas présentées en détail ici. Si vous souhaitez en savoir plus sur les fermetures, veuillez lire le chapitre 7 de « Programmation avancée Javascript »

Comme mentionné précédemment, il n'y a pas de niveau de bloc. scope dans js, seulement Distinguer la portée globale et la portée de la fonction. Dans ES6, ajoutons en fait une nouvelle portée au niveau du bloc à js. Par exemple, le code suivant permet aux fonctions de chaque tableau d'accéder aux valeurs dans leurs portées respectives. créer une portée de fonction :

let arr=[];
for(let i=0;i<10;i++){
  arr[i]=function(){
    return i;
  }
}
console.log(arr[3]());//3

Vous pouvez voir que nous n'avons pas besoin de construire une portée de fonction comme avant pour obtenir l'effet souhaité. Après avoir introduit la portée au niveau du bloc, il est plus pratique pour nous de le faire. Écrivez et comprenez le code. La boucle for dans le code ci-dessus Le {} après est une portée au niveau du bloc. Chaque fonction renvoyée fait référence à la variable de sa portée de bloc correspondante pendant chaque boucle.

let arr=[];
for(let i=0;i<10;i++){
  let k=i;
  arr[k]=function(){
    return k;
  }
}
console.log(arr[3]());//3

Visible ES6 Après avoir introduit la portée du bloc, il nous est plus pratique de construire des fonctions de fermeture.

Je ne décrirai pas grand-chose sur let et const ici. Si vous n'avez jamais été exposé à ES6 auparavant, je vous suggère de lire "Introduction aux normes ES6" par le professeur Ruan Yifeng.

Encore une chose à mentionner ici. Après avoir lu le concept, la première impression de beaucoup de gens est : « const représente une valeur immuable, alors que let est utilisé pour remplacer la var d'origine. Plusieurs fois, let est utilisé comme une valeur immuable. » remplacez var. Utilisez let lors de la déclaration de variables. Vous écrirez probablement le code suivant : ) est différent ; l'objet défini par const peut toujours modifier ses propriétés après définition.

 // 定义常量
const REG_GET_INPUT = /^\d{1,3}$/;

// 定义配置项
let config = {
 isDev : false,
 pubDir: './admin/'
}

let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let CleanWebpackPlugin = require('clean-webpack-plugin');

Donc en fait, ses scénarios d'utilisation sont très larges, incluant les constantes, les éléments de configuration et les composants référencés, "la plupart" des variables intermédiaires définies, etc., tous doivent être définis avec un coût. En revanche, en ce qui concerne let, ses scénarios d'utilisation devraient être relativement peu nombreux. Nous ne l'utiliserons que dans des boucles (boucles for, while) et un petit nombre de variables qui doivent être redéfinies.

Conjecture : en termes d'efficacité d'exécution, puisque const ne peut pas être réaffecté, davantage d'optimisations peuvent être effectuées en termes d'analyse de syntaxe statique, ce qui entraîne une efficacité d'exécution plus élevée.

Donc, dans le code ci-dessus, toutes les parties qui utilisent let doivent en fait utiliser const.

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

Articles associés :

Description détaillée de l'utilisation d'axios pour résoudre les problèmes de requête http dans vue2 (tutoriel détaillé)

En utilisant vue Quoi sont les méthodes pour introduire des graphiques highcharts dans le projet ?

Utilisation de @HostBinding() et @HostListener() dans Angular (tutoriel détaillé)

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!