Discutez du processus d'exécution des instructions JavaScript_javascript skills

Sans plus attendre, allons droit au but. Le principe de fonctionnement de javascript se résume ainsi :

1. Exécutez le code javascript dans l'ordre du flux de documents HTML

Le navigateur analyse progressivement la structure de la page et les informations de haut en bas en fonction du flux du document. Le code javascript est un script intégré et un composant du document html, donc l'ordre d'exécution du code javascript lors du chargement est également basé. sur la balise de script 618b8b6446777fc49317c6ca8d857b33, alors il sera également exécuté dans l'ordre dans lequel ses instructions apparaissent, et le processus d'exécution fait partie du chargement du document. L'exécution ne sera pas retardée car il s'agit d'un fichier js externe.

2. La relation entre la précompilation et l'ordre d'exécution

Regardez d'abord le code suivant :

<script type="text/javascript">
function hello() {
alert("hello");
}
hello();
function hello() {
alert("hello world");
}
hello();
</script>

Le résultat de sortie du code js ci-dessus est bonjour tout le monde, bonjour tout le monde, au lieu de sortir bonjour d'abord, puis bonjour tout le monde. En effet, JavaScript n'est pas interprété et exécuté complètement dans l'ordre, mais JavaScript est précompilé avant l'interprétation. Pendant le processus de précompilation, les fonctions définies seront exécutées en premier et toutes les variables var seront créées par défaut. pour améliorer l’efficacité de l’exécution du programme. En d'autres termes, le code ci-dessus est en fait pré-compilé par le moteur JS comme suit :

<script type="text/javascript">
var hello = function() {
alert("hello");
};
hello = function() {
alert("hello world");
};
hello();
hello();
</script>

Vous pouvez clairement voir à partir du code ci-dessus que les fonctions sont en fait des variables et que des valeurs peuvent être attribuées aux fonctions. Afin d'éviter que la situation précédente ne se reproduise, elle peut être définie dans deux fichiers js comme suit :

<script type="text/javascript">
hello();
function hello() {
alert("hello");
}
// hello();
</script>
<script type="text/javascript">
function hello() {
alert("hello world");
}
hello();
</script>

Dans le premier fichier ci-dessus, je mets hello() devant la fonction, et le résultat correct peut être affiché.

<script type="text/javascript">
hello();
var hello = function() {
alert("hello");
};
// hello();
</script>

Si vous utilisez la méthode ci-dessus pour définir la fonction, une erreur sera signalée. Le message d'erreur est tel qu'illustré dans la figure 1 ci-dessous :

L'erreur hello is not a function est signalée ici. En effet, lors de la précompilation, bien que les variables déclarées avec var soient traitées en premier, la valeur de la variable n'est pas définie. Ensuite, lors de l'exécution de hello(), puisque le hello précédent n'est pas défini et que le type n'est pas déterminé, voici hello n'est pas une fonction. Bien que cette fonction soit définie dans le programme, l'emplacement de la définition est placé après l'appel, donc lorsque l'appel est effectué, le programme ne s'exécute pas ici, il est donc inutile.

Regardez le morceau de code suivant :

<script type="text/javascript">
hello();
function hello() {
alert("hello");
}
// hello();
</script>

Bien que le code ci-dessus soit appelé avant la définition de la fonction, il est défini avec le mot-clé function, lorsqu'il est défini avec function, il est différent de var. Lorsque la fonction est définie, la valeur de la fonction est déjà attribuée au. passé, il peut donc être exécuté ici.

Résumé :

Lorsque le moteur JavaScript analyse le script, il traitera toutes les variables et fonctions déclarées lors de la pré-compilation. Le traitement est le suivant :

(1) Une opération de "pré-compilation" similaire sera effectuée avant l'exécution : d'abord, un objet actif dans l'environnement d'exécution actuel sera créé, et les variables déclarées avec var seront définies comme attributs de l'objet actif, mais pour le moment, ces affectations de variables sont toutes indéfinies, et les fonctions définies avec fonction sont également ajoutées en tant que propriétés de l'objet actif, et leurs valeurs sont exactement la définition de la fonction.

(2) Pendant la phase d'interprétation et d'exécution, lorsqu'une variable doit être analysée, elle sera d'abord recherchée à partir de l'objet actif de l'environnement d'exécution actuel si elle n'est pas trouvée et que le propriétaire de l'environnement d'exécution en a le pouvoir. attribut prototype, il sera recherché à partir de la chaîne de prototypes Search, sinon il sera recherché en fonction de la chaîne de portée. Lorsqu'une instruction telle que var a = ... est rencontrée, la variable correspondante se verra attribuer une valeur (remarque : l'affectation de la variable est terminée pendant la phase d'interprétation et d'exécution. Si la variable est utilisée avant cela, sa valeur sera être indéfini).

(3) Pour résumer, le résumé en une phrase est le suivant : la déclaration des variables est dans la période de pré-compilation, et l'initialisation des variables est dans le runtime.

<script type="text/javascript">
alert(a); // 在预编译期间a变量已经加载，但是用var定义，所以赋值为undefined先，故这里输出undefined。
var a = 1; // 这里给前面的没有赋值的a进行赋值为1
alert(a); // 这里输出的a已经是前面赋值过的，所以输出1。
</script>

Pour le code ci-dessus, le résultat de sortie est : undefined est d'abord affiché, puis 1 est affiché. Pour l'analyse, voir les remarques du code.

Bien que les déclarations de variables et de fonctions puissent se trouver n'importe où dans le document, il est recommandé de déclarer les variables et fonctions globales avant tout le code JavaScript, ainsi que d'initialiser et d'attribuer des variables. Dans une fonction, les variables sont d'abord déclarées puis référencées.

3. Exécuter le code javascript en blocs

Le soi-disant bloc de code est un segment de code séparé par des balises 3f1c4e4b6b16bbbd69b2ee476dc4f83a Lorsque l'interpréteur JavaScript exécute un script, il l'exécute par blocs. En termes simples, si le navigateur rencontre une balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a lors de l'analyse du flux de document HTML, l'interpréteur JavaScript attendra que le bloc de code soit chargé, précompilera le bloc de code, puis l'exécutera. Après l'exécution, le navigateur continue d'analyser le flux de document HTML ci-dessous et l'interpréteur JavaScript est prêt à traiter le prochain bloc de code. Étant donné que JavaScript est exécuté par blocs, si vous appelez une variable ou une fonction déclarée dans un bloc suivant dans un bloc JavaScript, une erreur de syntaxe sera générée.

<script>
alert(a);
</script>
<script>
var a = 1;
</script>

上面的这段代码，由于是两个代码块，先执行完第一个代码块，再执行第二个代码块。执行第一个代码块的时候，变量a没有声明，所以报错，报错信息是：a is not defined。

<script>
var a = 1;
</script>
<script>
alert(a);
</script>

虽然说，JavaScript是按块执行的，但是不同块都属于同一个全局作用域，也就是说，块之间的变量和函数是可以共享的。所以，上面的这两个代码块运行的时候，虽然是两个代码块，但是第一段运行以后，a变量就存在了全局作用域中，此时运行到第二个代码块，输出的a变量就可以调用全局作用域中的a，所以没有问题。

4、借助事件机制改变javascript执行顺序

由于JavaScript是按块处理代码，同时又遵循HTML文档流的解析顺序，所以在上面示例中会看到这样的语法错误。但是当文档流加载完毕，如果再次访问就不会出现这样的错误。为了安全起见，我们一般在页面初始化完毕之后才允许JavaScript代码执行，这样可以避免网速对JavaScript执行的影响，同时也避开了HTML文档流对于JavaScript执行的限制。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>javascript</title>
<script>
window.onload = function() {
alert(a);
};
</script>
<script>
var a = 1;
alert("bb");
</script>
</head>
<body>
</body>
<script>
alert("cc");
</script>
</html>

windows.onload = function()表示先在触发事件上加一个函数，并不立即执行，而是在整个页面都加载完成以后再开始执行该事件，及function。所以，在windows.onload执行之前，就已经把一些变量加载到了全局区中，所以没有问题。上面的输出结果是：先输出bb，再输出cc，最后输出a。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>javascript</title>
<script>
window.onload = function() {
alert(a);
};
// 上面的onload不会执行，只会执行下面的onload
window.onload = function() {
alert("onload2");
};
</script>
<script>
var a = 1;
alert("bb");
</script>
</head>
<body>
</body>
<script>
alert("cc");
</script>
</html>

如果在一个页面中存在多个windows.onload事件处理函数，则只有最后一个才是有效的(如上面的代码所示)，为了解决这个问题，可以把所有脚本或调用函数都放在同一个onload事件处理函数中，如下面的代码所示：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>javascript</title>
<script>
window.onload = function() {
// 放到一起
alert(a);
alert("onload2");
};
</script>
<script>
var a = 1;
alert("bb");
</script>
</head>
<body>
</body>
<script>
alert("cc");
</script>
</html>

5、javascript输出脚本的执行顺序

在JavaScript开发中，经常会使用document对象的write()方法输出JavaScript脚本。document.write()方法先把输出的脚本字符串写入到脚本所在的文档位置，浏览器在解析完document.write()所在文档内容后，继续解析document.write()输出的内容，然后才按顺序解析后面的HTML文档。也就是说，JavaScript脚本输出的代码字符串会在输出后马上被执行。请注意，使用document.write()方法输出的JavaScript脚本字符串必须放在同时被输出的3f1c4e4b6b16bbbd69b2ee476dc4f83a标签中，否则JavaScript解释器因为不能够识别这些合法的JavaScript代码，而作为普通的字符串显示在页面文档中。但是，通过document.write()方法输出脚本并执行也存在一定的风险，因为不同JavaScript引擎对其执行顺序不同，同时不同浏览器在解析时也会出现Bug。

以上所述是小编给大家介绍的JavaScript语句的执行过程，希望对大家有所帮助。