Comment les navigateurs analysent-ils JavaScript ? Introduction aux principes analytiques

Comment le navigateur analyse-t-il JavaScript ? Cet article vous présentera le principe de l'analyse du navigateur JavaScript. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. [Tutoriel vidéo recommandé : Tutoriel vidéo JavaScript]

Fonctionnalités principales de l'analyse du navigateur JavaScript :

1.

2. Il n'est pas nécessaire de définir un type de données lors de la définition de JavaScript faiblement typé. Le type de données est déterminé en fonction de la valeur de la variable

var a = 10; //数字类型
var a = true //boolean类型

(Type fort : vous devez le faire. définir une variable lors de la définition d'une variable Type : Par exemple, int a = 10 boolean a = true en java, C#, détermine directement le type de données)

3. Interpréter et exécuter, exécuter ligne par ligne.

Processus d'exécution Javascript

1. Détection de la grammaire

Il s'agit de voir si vous avez des erreurs grammaticales de base, telles que Chinois, erreurs de mots clés...

2. Analyse lexicale (pré-compilation)

Exécution ligne par ligne

Analyse lexicale.

Pré-compilation Le processus (deux situations)

1. Global (directement le code dans la balise script, hors exécution de fonction) <. 🎜>

Prenons comme exemple la démo suivante :

 console.log(a); console.log(b)
 var a = 100;
 console.log(a) var b = 200 var c = 300 function a(){
                
 } function fun(){
                
 }

Avant l'exécution :

1), générez d'abord un objet GO (objet global), qui ne peut pas être vu, mais peut être simulé pour l'analyse

GO = {                //自带的属性都不写
    }

2 ), analyser

déclaration de variable , le nom de la variable est le nom de l'attribut, la valeur n'est pas définie　

GO = {
                    a : undefined,
                    b : undefined,
                    c : undefined
    }

3) , analysez la déclaration de fonction, le nom de la fonction est le nom de l'attribut, la valeur est le corps de la fonction, si la fonction Si le nom est le même que le nom de la variable, elle sera écrasée impitoyablement

GO = {
    a : function a(){
                
    },
    b : undefined,
    c : undefined,
    fun : function fun(){
                
    }
}

. À ce stade, GO est le dernier objet précompilé et l'analyse lexicale est terminée.

4), exécuter ligne par ligne, analyser (déclaration de variable, déclaration de fonction), ne vous inquiétez pas, attribuez simplement une valeur (affectation de variable)

a赋了一次值,值改变为100
      GO = {
          a : 100,
          b : undefined,
          c : undefined,
          fun : function fun(){
                
             }
        }

2 , Partiel (lorsque la fonction est exécutée)

Prenons cette démo comme exemple :

 num = 100510)

1), une fois précompilée

GO = {
       num : undefined,
       fun : function
    }

2 ), processus d'exécution

GO = {
                num : 100,
                fun : function
            }

3), l'appel de fonction générera également sa propre portée (AO : objet actif), AO objet actif Lorsque la fonction est appelée, elle l'est. généré au moment avant l'exécution. Si lorsque plusieurs fonctions sont appelées, plusieurs AO

ⅰ seront générés au moment avant l'exécution de la fonction, un objet actif AO

fun.AO = {
                
            }

ⅱ sera généré. être généré.Analysez les paramètres et les paramètres formels en tant qu'objets. Nom de l'attribut, le paramètre réel est utilisé comme valeur d'attribut de l'objet

fun.AO = {
                num : 5
            }

ⅲ Le nom de la variable est le nom de l'attribut et. la valeur n'est pas définie. Si l'attribut sur l'objet AO a le même nom, aucune modification ne sera apportée

fun.AO = {
                num : 5
            }

ⅳ Analysez la déclaration de la fonction. corps de la fonction. Si l'attribut sur l'objet AO a le même nom, il sera écrasé impitoyablement (il n'y a pas de déclaration de fonction ici, ignorez-la)

4) Exécuter ligne par ligne

---

Exemple :

Nous examinons ici plusieurs exemples :

Exemple 1 :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            console.log(test);                //function
            function test(test){
                console.log(test);           //function
                var test = 123;
                console.log(test);            //123
                function test(){
                    
                }
                console.log(test);            //123
                var test = function(){}
                console.log(test);            //function
            }
            test(10);
            var test = 456;
            
            /*1.分析变量
            GO={
                test:undefined
            }
            2.分析函数{
                test:function
            }
            3.逐行执行
            第21行函数的调用    
                3.1test.AO={}
                3.2参数
                test.AO={
                    test:10
                }
                3.3变量声明
                test.AO={
                    test:10
                }
                3.4函数的声明
                test.AO={
                    test:function
                }
                4逐行执行
                */
        </script>
    </body>
</html>

---

Exemple 2 :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            function test(){
                console.log(b);   //undefined
                if(a){    //undefined转换成false
                    var b = 100;
                }
                c = 123;
                console.log(c);    //123
            }
            var a;
            test();
            a = 20;
            test();
            console.log(c);   //123
            
//            1.生成GO
//            GO = {
//                
//            }
//            2.var
//            GO = {
//                a : undefined
//            }
//            3.函数声明
//            GO = {
//                a : undefined,
//                test : function
//            }
//            4.逐行执行
//                4.1.1    18行,test调用,生成test.AO ={}
//                4.1.2    参数 没有,跳过
//                4.1.3    var 
//                test.AO = {
//                    b : undefined
//                }
//                4.1.4    函数声明    没有,跳过
//                4.1.5    结果
//                test.AO = {
//                    b : undefined
//                }
//                4.1.6    逐行执行
//                    14行,改变GO
//                    GO = {
//                        a : undefined,
//                        test : function,
//                        c : 123
//                    }
//                    
//                4.2   19行   a值发生了改变
//                GO = {
//                    a : 20,
//                    test : function,
//                    c : 123
//                }
//                
//                4.3  20行,test调用   生成test.AO={}
//                4.3.1 参数 没有
//                4.3.2 变量声明
//                test.AO = {
//                    b : undefined
//                }
//                4.3.3 函数声明  没有
//                4.3.4 结果
//                test.AO = {
//                    b : undefined
//                }
//                4.3.5 逐行执行
//                test.AO = {
//                    b : 100
//                }
        </script>
    </body>
</html>

Ce qui précède est l'intégralité du contenu de cet article, j'espère que cela pourra être utile à l'étude de chacun. Pour un contenu plus passionnant, vous pouvez prêter attention aux colonnes de didacticiels pertinentes du site Web PHP chinois ! ! !

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!