Comment faire fonctionner l'ordre d'exécution du code dans JS

Cette fois, je vais vous montrer comment faire fonctionner l'ordre d'exécution du code en JS, et quelles sont les précautions concernant l'ordre d'exécution du code d'opération JS. Ce qui suit est un cas pratique, jetons un coup d'oeil.

1. js--->Fil unique

 À proprement parler, javascript n'a pas le concept de plusieurs threads, et tous les programmes sont exécutés séquentiellement par un seul thread.

  1. Qu'est-ce qu'un seul fil ?

Pour faire plus simple, lorsque le code est en cours d'exécution, si un autre morceau de code veut être exécuté, il doit attendre que l'exécution du code en cours soit terminée. Prenons un morceau de code pour l'expliquer

 for(var i=1;i<=3;i++){
   setTimeout(function(){
     console.log(i); //输出：4,4,4
   },0)
 }

Jetons un coup d'œil au code ci-dessus. Puisque le temps de retard est défini sur 0, la boucle doit être exécutée une fois et un i doit être imprimé immédiatement, mais le résultat final de l'impression est : 4, 4, 4. La raison pour laquelle les résultats ci-dessus se produisent est précisément parce que le code js est une application monothread.

Pendant le processus d'exécution, la boucle for est rencontrée en premier et la boucle for entre en premier dans le thread. Lorsque i=1, une fois que la boucle atteint setTimeOut, la boucle for n'a pas encore terminé son exécution et setTimeOut sera placé dans un endroit (pool de threads) pour attendre l'exécution. A ce moment, la boucle for continue de s'exécuter. Lorsque i=2, l'exécution de la boucle for n'est pas encore terminée. À ce moment, setTimeOut sera toujours placé dans le pool de threads en attente d'exécution... et ainsi de suite, jusqu'à ce que la boucle for continue de s'exécuter. La boucle for se termine 3 fois, la boucle for une fois l'exécution terminée, le thread est inactif à ce moment-là. Le setTimeOut en attente d'exécution dans le pool de threads s'exécute et imprime i en séquence, une fois l'exécution de la boucle for terminée, i devient 4. , donc trois 4 sont imprimés.

  2. Si vous souhaitez modifier la situation ci-dessus, vous pouvez utiliser le code suivant

//将var变为let
for(let i=1; i<=3; i++){
  setTimeOut(function(){
    console.log(i); //输出的结果为1，2，3
  },0);
}
//用自执行函数进行包裹
for(var i=1; i<=3; i++){
  !function(i){
    setTimeOut(function(){
      console.log(i); //输出的结果为1，2，3
    },0);
  }(i)
}

2. Portée de la fonction et exécution du code en js

  >>>Portée de la fonction

Comprenons d'abord les concepts suivants :

　　1. Dans le langage js, il n'y a pas de portée au niveau du bloc similaire au langage c.

 2. La portée de niveau supérieur dans le langage js se situe dans la portée de l'objet fenêtre, qui est appelée portée globale. Les variables déclarées dans la portée globale sont des variables globales.

   3. Les variables dans le cadre d'une fonction js ne peuvent être utilisées qu'à l'intérieur de la fonction et ne peuvent pas être utilisées en dehors de la fonction.

　　4. Les fonctions JS peuvent être imbriquées. L'imbrication de plusieurs fonctions constitue l'imbrication couche par couche des étendues. C'est ce qu'on appelle la chaîne de portées dans JS.

 5. Règles d'accès aux variables de la chaîne de portée JS :

(1) Lorsque la variable à laquelle accéder existe dans la portée actuelle, la variable dans la portée actuelle est utilisée.

      (2) Lorsque la variable à laquelle accéder n'existe pas dans la portée actuelle, elle sera recherchée dans la portée de niveau supérieur jusqu'à la portée globale.

  >>>Ordre d'exécution

  L'exécution du code JS est divisée en deux parties :

  1. Phase de vérification et de chargement du code (phase de précompilation). Dans cette phase, les variables et les fonctions sont déclarées, mais les variables ne reçoivent pas de valeurs. La valeur par défaut des variables n'est pas définie.

  2. La phase d'exécution du code. Dans cette phase, les variables se voient attribuer des valeurs et les fonctions sont déclarées.

Après avoir examiné certains des concepts spécifiques ci-dessus, prenons un morceau de code pour illustrer :

var a=1; //声明了一个全局变量
function func(){
  console.log(a); //输出：undefined。打印a，而在func这个作用域中已经声明了a变量，按照js的执行顺序，此时的a并未被赋值。
  var a=1;
  console.log(a); //输出：1。
}
func();

 Regardez le code ci-dessus : le premier a génère un résultat indéfini. Raison : selon les règles d'accès de la chaîne de portée js, la variable a à laquelle accéder existe dans la portée actuelle, donc la variable dans la portée actuelle est utilisée. Selon l'ordre d'exécution du code js, a à ce moment-là est uniquement déclaré mais non attribué. La valeur par défaut est indéfinie, donc indéfini est affiché.

  Et le second a produit 1. C'est précisément parce que a a été déclaré et attribué une valeur à ce moment-là, donc a produit 1.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Réponses techniques pour créer une plateforme de gestion de livres avec vue.js

Résumé des instructions couramment utilisées dans vue.js

Explication détaillée de la désactivation et de l'activation des boutons JS

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!