recherche

Maison  >  Article  >  interface Web  >  analyse de la séquence d'exécution js

analyse de la séquence d'exécution js

小云云
小云云original
2018-03-07 10:56:011565parcourir

JavaScript est un langage de script descriptif qui est analysé et exécuté dynamiquement par le navigateur. Il existe généralement deux manières de définir des fonctions. Les navigateurs ont des ordres d'analyse différents pour différentes manières. Cet article partage principalement avec vous l'analyse de la séquence d'exécution js, dans l'espoir d'aider tout le monde.

Le code est le suivant : 

//“定义式”函数定义 
function Fn1(){ 
alert("Hello World!"); 
} 
//“赋值式”函数定义 
var Fn2 = function(){ 
alert("Hello wild!"); 
}


Pendant le processus de chargement de la page, le navigateur analysera chaque bloc de code js (ou fichier) sur la page ou s'il est chargé. rencontres Lorsqu'une fonction de définition est atteinte, un prétraitement est effectué (similaire à la compilation de C, etc.). Une fois le traitement terminé, l'exécution commence de haut en bas lorsqu'elle rencontre une fonction d'affectation, la fonction est simplement affectée à une variable sans prétraitement ; (similaire au (principe 1 selon lequel les variables doivent d'abord être définies puis référencées), elles ne seront pas traitées tant qu'elles ne seront pas appelées. Voici un exemple simple :
Le code est le suivant : 

//“定义式”函数定义 
Fn1(); 
function Fn1(){ 
alert("Hello World!"); 
}


Exécutez normalement, affichez "Hello World!", le navigateur prétraite Fn1, puis démarre à partir de Fn1() ; Démarrer l'exécution.
Le code est le suivant : 

//“赋值式”函数定义 
Fn2(); 
var Fn2 = function(){ 
alert("Hello wild!"); 
}


Firebug signale une erreur : Fn2 n'est pas une fonction. Le navigateur ne prétraite pas Fn2 et l'exécute séquentiellement, donc l'erreur Fn2 n'est pas définie. .

3. Traitement des blocs de code et des fichiers js
« Bloc de code » fait référence à une paire de 1d1e6f5ba09a09a27b7e981e53d8300d3fa3f474cbb4b6d948eebecb1be5dde4 Le code js enveloppé dans la balise fait référence au fichier, c'est absurde :D
Le navigateur analyse chaque bloc ou fichier indépendamment, puis exécute le code global de manière séquentielle (mentionné en 2). Ainsi, dans un bloc (fichier), la fonction peut être « définie » après l'appel ; mais dans deux blocs, le bloc dans lequel la fonction est définie doit être avant le bloc dans lequel la fonction est appelée.
C'est très compliqué, il suffit de regarder l'exemple :
Le code est le suivant : 

<script type="text/javascript"> 
Fn(); 
</script> 
<script type="text/javascript"> 
function Fn(){ 
alert("Hello World!"); 
} 
</script> 
// 报错：Fn is notdefined，两个块换过来就对了


Définir à plusieurs reprises une fonction écrasera la définition précédente C'est la même chose que la définition répétée des variables, le code :
Le code est le suivant : 

function fn(){ alert(1); 
} function fn(){ alert(2); 
} fn(); 
// 弹出：“2”
Et si c'est le cas :

Le code est comme suit : 

fn(); 
function fn()
{ alert(1); } 
function fn()
{ alert(2); } 
// 还是弹出：
“2”
Apparaît toujours "2", Pourquoi ? 2 a été expliqué...



5. Exécution de la fonction de chargement du corps et des fonctions internes du corps Les fonctions internes du corps seront exécutées avant la fonction de chargement, code de test :
Le code est le suivant : 

//html head... 
<script type="text/javascript"> 
function fnOnLoad(){ 
alert("I am outside the Wall!"); 
} 
</script> 
<body onload="fnOnLoad();"> 
<script type="text/javascript"> 
alert("I am inside the Wall.."); 
</script> 
</body> 
//先弹出“I am inside the Wall..”; 
//后弹出“I am outside the Wall!”
La condition de déclenchement de l'événement onload du corps est que le contenu du corps est chargé, et le code js dans le corps s'exécutera avant que cet événement ne soit déclenché (pourquoi ? 6 vous le dit...)



6. JavaScript est-il multithread ou monothread ? À proprement parler, JavaScript n'a pas le concept de multi-threading. Tous les programmes sont exécutés "mono-thread" en séquence.
Pour donner un exemple inapproprié : 

function fn1(){ 
var sum = 0; 
for(var ind=0; ind<1000; ind++) { 
sum += ind; 
} 
alert("答案是"+sum); 
} 
function fn2(){ 
alert("早知道了，我就是不说"); 
} 
fn1(); 
fn2(); 

//先弹出：“答案是499500”， 
//后弹出：“早知道了，我就是不说”

Ensuite, vous devez vous demander : l'exécution retardée et le chargement asynchrone Ajax ne sont-ils pas multithread ? Oui, le programme suivant ressemble effectivement à du "multi-threading" :
Le code est le suivant : 

function fn1(){ 
setTimeout(function(){ 
alert("我先调用") 
},1000); 
} 
function fn2(){ 
alert("我后调用"); 
} 
fn1(); 
fn2(); 
// 先弹出：“我后调用”， 
// 1秒后弹出：“我先调用”
Il semble que fn2() et le programme delay soient séparés en deux processus, mais dans en fait, il s'agit du mécanisme de « rappel » dans JavaScript au travail, qui est similaire à « l'interruption et la réponse » dans le système d'exploitation - le programme de retard définit une « interruption » puis exécute fn2() après 1 000 millisecondes. Puis rappelez et exécutez fn1().

De même, la fonction appelée par l'événement onload du corps en 5 utilise également le mécanisme de rappel - une fois le corps chargé, le rappel exécute la fonction fnOnLoad().
Il en va de même pour les fonctions de traitement de données dans les requêtes Ajax.
Pour une discussion plus approfondie sur les problèmes liés aux threads JavaScript, consultez cet article Mon avis sur les threads en JavaScript et l'introduction à la programmation multithread JavaScript sur infoQ.
Je suis fatigué, reparlons de la fonction de rappel.


7. Fonction de rappel A quoi sert la fonction de rappel ? C'est juste une fonction exécutée par rappel, quelle absurdité :D
Comme mentionné en 6, les rappels les plus courants sont les fonctions d'appel des événements du navigateur tels que onclick, onmouseotutorialver, onmousedown, onload, etc. et le traitement asynchrone d'Ajax ; demander des données. Fonction ; exécution retardée setTimeOut, fonction d'exécution de boucle setInterval, etc.
Écrivons simplement une fonction de rappel pure à jouer :
Le code est le suivant : 

function onBack(num){ 
alert("姗姗我来迟了"); 
// 执行num个耳光 
} 
function dating(hours, callBack){ 
var SP= 0; // SP,愤怒值 
//女猪脚在雪里站了hours个钟头 
//循环开始.. 
SP ++; 
//循环结束... 
callBack(SP); 
} 
dating(1, onBack);
Recommandations associées :

À propos des idées de solutions d'ordre d'exécution js

Ordre d'exécution JS dans les compétences page_javascript

Analyse de l'ordre d'exécution JavaScript

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!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Explication graphique détaillée de Switchery.jsArticle suivant：Explication graphique détaillée de Switchery.js

Articles Liés

Voir plus