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 :

76c82f278ac045591c9159d381de2c57
100db36a723c770d327fc0aef2ce13b1
    93f0f5c25f18dab9d176bd4f6de5d30e
        a80eb7cbb6fff8b0ff70bae37074b813
        b2386ffb911b14667cb8f0f91ea547a76e916e0f7d1e588d4f442bf645aedb2f
    9c3bca370b5104690d9ef395f2c5f8d1
    6c04bd5ca3fcae76e30b72ad730ca86d
        8019067d09615e43c7904885b5246f0a
            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逐行执行
                */
        2cacc6d41bbb37262a98f745aa00fbf0
    36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

---

Exemple 2 :

76c82f278ac045591c9159d381de2c57
100db36a723c770d327fc0aef2ce13b1
    93f0f5c25f18dab9d176bd4f6de5d30e
        a80eb7cbb6fff8b0ff70bae37074b813
        b2386ffb911b14667cb8f0f91ea547a76e916e0f7d1e588d4f442bf645aedb2f
    9c3bca370b5104690d9ef395f2c5f8d1
    6c04bd5ca3fcae76e30b72ad730ca86d
        8019067d09615e43c7904885b5246f0a
            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
//                }
        2cacc6d41bbb37262a98f745aa00fbf0
    36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

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!