Maison interface Web js tutoriel Résumé des connaissances de base de JavaScript (8) Processus d'exécution de pré-compilation

Résumé des connaissances de base de JavaScript (8) Processus d'exécution de pré-compilation

Mar 10, 2018 pm 01:31 PM
javascript js 编译

Cette fois, je vais vous apporter un résumé des connaissances de base en JavaScript Il y a un total de onze points de connaissances Résumé des connaissances de base en JavaScript (8) Voici un cas pratique. jetez un oeil.

JS Running Trilogy

Première étape : Analyse syntaxique

Deuxième partie : Précompilation

Troisième partie : Interprétation et exécution

Pré- compilation

L'analyse syntaxique est également appelée analyse sémantique. L'analyse syntaxique est un processus qui est exécuté tout au long de l'article. Par exemple, j'ai écrit de nombreuses lignes de code. Lorsque ces codes sont exécutés, ils sont interprétés et exécutés ligne par ligne. Mais avant l'exécution, la première étape de l'exécution du système sera de l'analyser pour voir s'il y a des erreurs de grammaire de bas niveau, telles que des crochets manquants, l'ajout de caractères chinois, etc. le texte entier, mais il n'est pas exécuté. Ce processus d'analyse du texte entier est appelé analyse syntaxique. Après l'analyse du texte entier, il sera pré-compilé, puis exécuté ligne par ligne après interprétation, c'est-à-dire interprétation et exécution.

Prélude de pré-compilation

1

2

3

imply global 暗示全局变量: 即任何变量,如果变量未经声明就赋值,自变量就位全局对象所有

eg : a = 123;

eg : var a = b = 123;

Copier après la connexion

Toutes les variables globales déclarées sont les attributs de window

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

  eg:var a = 123;===> window.a = 123;

//例子:

   function test (){        console.log("a");

   

   test();//成功打印出a,

   box();//写在方法之前也成功打印出a,为什么能执行就是有预编译的过程

   function box (){        console.log("a");

   }   

   var a =123;    console.log(a);//输出123

   console.log(a);//输出undefined,不报错;

    var a = 123;   

    //但是如果直接打印会报错;

    console.log(b)//报错

    //也是预编译的效果

     

    //如果想偷懒记住两句话

    //函数声明整体提升

    //变量 声明提升

Copier après la connexion

Expliquez le sujet d'amélioration de la déclaration de fonction : Si vous écrivez une déclaration de fonction, peu importe où vous l'écrivez, le système le fera toujours. Il amènera cette fonction au premier plan de la logique, donc peu importe où vous l'appelez, qu'elle soit appelée au-dessus ou en dessous, c'est essentiellement appelée sous la fonction, et elle promouvra toujours la déclaration de fonction au niveau logique pour vous. La déclaration de variable avant

est promue, par exemple,

var a = 123;//In. en fait, il s'agit de deux parties de var a;//Déclarez d'abord la variable
a = 123;//Dans Affectation de variable

Ainsi, la variable promue par le système n'est pas promue avec le valeur, donc dans l'exemple a imprime undefined ;

Notez que ces deux phrases ne sont pas omnipotentes

Par exemple

1

2

3

4

function a(a){    var a = 123;    var a = function(){       

    }

    a();

}var a = 123;

Copier après la connexion

Cela ne peut pas être résolu par ces deux-là. phrases

Avant d'expliquer ce qui précède, nous devons d'abord comprendre ce qu'est impiy global

imply globa : implique des variables globales : c'est-à-dire n'importe quelle variable Si la variable reçoit une valeur sans être déclarée, la variable indépendante sera dans l'objet global.

ex: a = 123;

ex: var a = b = 123;

a = 10;console.log (a);//Imprimez 10 puis ayez awindow.a//10var b = 20;//Vous avez déclaré window et l'avez également bwindow est le domaine global

Pré-compilé et formalisé

Créez un objet AO

Recherchez les paramètres formels et les déclarations de variables, et utilisez les noms de variables et de paramètres formels comme noms d'attributs AO La valeur n'est pas définie

Unifiez la valeur réelle du paramètre. et le paramètre formel

Recherchez la déclaration de fonction dans le corps de la fonction et attribuez la valeur au corps de la fonction

1

2

3

4

5

6

7

function fn (a){    console.log(a);   

    var a = 123;    console.log(a);   

    function a (){};    console.log(a);   

    var b = function (){       

    }    console.log(b);       

}

fn(1);

Copier après la connexion

Cet exemple, les paramètres, les variables, les noms de fonctions sont tous appelés a.Tout d'abord, il est certain qu'un phénomène d'écrasement va certainement se produire. C'est très contradictoire. Comme mentionné précédemment, la pré-compilation de la fonction est exécutée juste avant l'exécution de la fonction. prend ces La contradiction a été réconciliée.

Première pré-compilation

La première étape : Créer un objet AO, le nom complet est Objet d'activation, qui est la portée, également appelée contexte d'exécution

1

2

AO{   

}

Copier après la connexion

Étape 2 : Recherchez les paramètres formels et les déclarations de variables, utilisez les noms de variables et de paramètres formels comme noms d'attributs AO, et la valeur n'est pas définie

1

2

3

AO{    a : undefined

    b : undefined

}

Copier après la connexion

Étape 3 : Unifiez le paramètre réel valeurs et paramètres formels

1

2

AO{    a : 1;    b : undefined

}

Copier après la connexion

Étape 4 : Recherchez la déclaration de fonction dans le corps de la fonction et attribuez la valeur au corps de la fonction

1

2

3

4

5

6

7

AO{    a : 1,    b : undefined,    //b是是函数表达式,不是函数声明,所以不变

    //然后有a了 有b了,然后将这个函数声明的名作为AO对象挂起来

    d :

}//然后值赋予函数体,也就是把a和b的属性值,变成函数体//覆盖掉a 和b的的属性值//也就变成下面的//因为第四步的优先级最高AO{    a : function a () {}

    b : undefined,    //b是是函数表达式,不是函数声明,所以不变

    d : function d () {}

}

Copier après la connexion

À ce stade, le pré -le processus de compilation se termine, l'exécution du code commence et la fonction

Ensuite, nous regardons l'exemple ci-dessus

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

//预编译结果AO{    a : function a () {}

    b : undefined,    d : function d () {}

}//开始执行代码function fn (a){    //第一步开始打印a

    //根据上面预编译的结果,

    //所以打印结果是function a () {}

    console.log(a);   

    //第二步执行 var a = 123;

    //因为在预编译的第二步里面,变量已经提升了

    //所以第二步只执行的赋值

    //a = 123;去AO对象里面去找a

    //也就变成

    //AO{

        //a : 123   这个才是a的存储值

        //b : undefined,

        //d : function d () {}

    //}

    var a = 123;    //所以打印出123

    console.log(a);    //因为这句在话在预编译的时候系统已经看了

    //所以不在看这句话

    function a (){};    //所以下面的console.log(a)

    //还是打印123;

    console.log(a);    //一样下面的var b这句话在预编译的时候已经看了,所以不在看

    //AO{

        //a : 123  

        //所以b的值变成function(){}

        //b : function(){}

        //d : function d () {}

    //}

    var b = function (){

         

    }    //所以打印出function(){}

    console.log(b);

         

}

Copier après la connexion

fn(1);

Nous regardons un exemple

1

2

3

4

5

function test(a , b){    console.log(a);

    c = 0;    var c;

    a = 3;

    b = 2;    console.log(b);    function b () {}    console.log(b);

}//这下我们就很快的得出打印的东西//a-->1//b-->2//b-->2

Copier après la connexion

La précompilation n'est pas seulement dans le corps de la fonction, elle se produira également dans le global

La première étape du global consiste à générer l'objet global GO, les autres sont les mêmes

GO === fenêtre

alors La question est de savoir s'il faut exécuter GO en premier ou AO en premier

La réponse est d'exécuter GO en premier

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 connexe :

Résumé des connaissances de base de JavaScript (6) Fonctions, portée initiale (Partie 1)

Bases Résumé des connaissances JavaScript (6) Fonctions, portée initiale (Partie 2)

Résumé des connaissances de base en JavaScript (7) Récursion

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 de ce site Web
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

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
4 Il y a quelques semaines By DDD
Musée à deux points: toutes les expositions et où les trouver
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Outils essentiels pour l'analyse boursière : découvrez les étapes pour dessiner des graphiques en bougies avec PHP et JS Outils essentiels pour l'analyse boursière : découvrez les étapes pour dessiner des graphiques en bougies avec PHP et JS Dec 17, 2023 pm 06:55 PM

Outils essentiels pour l'analyse boursière : découvrez les étapes pour dessiner des graphiques en bougies en PHP et JS. Des exemples de code spécifiques sont nécessaires. Avec le développement rapide d'Internet et de la technologie, le trading d'actions est devenu l'un des moyens importants pour de nombreux investisseurs. L'analyse boursière est une partie importante de la prise de décision des investisseurs, et les graphiques en bougies sont largement utilisés dans l'analyse technique. Apprendre à dessiner des graphiques en bougies à l'aide de PHP et JS fournira aux investisseurs des informations plus intuitives pour les aider à prendre de meilleures décisions. Un graphique en chandeliers est un graphique technique qui affiche les cours des actions sous forme de chandeliers. Il montre le cours de l'action

Recommandé : Excellent projet de détection et de reconnaissance des visages open source JS Recommandé : Excellent projet de détection et de reconnaissance des visages open source JS Apr 03, 2024 am 11:55 AM

La technologie de détection et de reconnaissance des visages est déjà une technologie relativement mature et largement utilisée. Actuellement, le langage d'application Internet le plus utilisé est JS. La mise en œuvre de la détection et de la reconnaissance faciale sur le front-end Web présente des avantages et des inconvénients par rapport à la reconnaissance faciale back-end. Les avantages incluent la réduction de l'interaction réseau et de la reconnaissance en temps réel, ce qui réduit considérablement le temps d'attente des utilisateurs et améliore l'expérience utilisateur. Les inconvénients sont les suivants : il est limité par la taille du modèle et la précision est également limitée ; Comment utiliser js pour implémenter la détection de visage sur le web ? Afin de mettre en œuvre la reconnaissance faciale sur le Web, vous devez être familier avec les langages et technologies de programmation associés, tels que JavaScript, HTML, CSS, WebRTC, etc. Dans le même temps, vous devez également maîtriser les technologies pertinentes de vision par ordinateur et d’intelligence artificielle. Il convient de noter qu'en raison de la conception du côté Web

WebSocket et JavaScript : technologies clés pour mettre en œuvre des systèmes de surveillance en temps réel WebSocket et JavaScript : technologies clés pour mettre en œuvre des systèmes de surveillance en temps réel Dec 17, 2023 pm 05:30 PM

WebSocket et JavaScript : technologies clés pour réaliser des systèmes de surveillance en temps réel Introduction : Avec le développement rapide de la technologie Internet, les systèmes de surveillance en temps réel ont été largement utilisés dans divers domaines. L'une des technologies clés pour réaliser une surveillance en temps réel est la combinaison de WebSocket et de JavaScript. Cet article présentera l'application de WebSocket et JavaScript dans les systèmes de surveillance en temps réel, donnera des exemples de code et expliquera leurs principes de mise en œuvre en détail. 1. Technologie WebSocket

Conseils de développement PHP et JS : maîtrisez la méthode de création de graphiques en bougies boursières Conseils de développement PHP et JS : maîtrisez la méthode de création de graphiques en bougies boursières Dec 18, 2023 pm 03:39 PM

Avec le développement rapide de la finance sur Internet, l'investissement en actions est devenu le choix de plus en plus de personnes. Dans le trading d'actions, les graphiques en bougies sont une méthode d'analyse technique couramment utilisée. Ils peuvent montrer l'évolution des cours des actions et aider les investisseurs à prendre des décisions plus précises. Cet article présentera les compétences de développement de PHP et JS, amènera les lecteurs à comprendre comment dessiner des graphiques en bougies boursières et fournira des exemples de code spécifiques. 1. Comprendre les graphiques en bougies boursières Avant de présenter comment dessiner des graphiques en bougies boursières, nous devons d'abord comprendre ce qu'est un graphique en bougies. Les graphiques en chandeliers ont été développés par les Japonais

Tutoriel JavaScript simple : Comment obtenir le code d'état HTTP Tutoriel JavaScript simple : Comment obtenir le code d'état HTTP Jan 05, 2024 pm 06:08 PM

Tutoriel JavaScript : Comment obtenir le code d'état HTTP, des exemples de code spécifiques sont requis Préface : Dans le développement Web, l'interaction des données avec le serveur est souvent impliquée. Lors de la communication avec le serveur, nous devons souvent obtenir le code d'état HTTP renvoyé pour déterminer si l'opération a réussi et effectuer le traitement correspondant en fonction de différents codes d'état. Cet article vous apprendra comment utiliser JavaScript pour obtenir des codes d'état HTTP et fournira quelques exemples de codes pratiques. Utilisation de XMLHttpRequest

Comment obtenir facilement le code d'état HTTP en JavaScript Comment obtenir facilement le code d'état HTTP en JavaScript Jan 05, 2024 pm 01:37 PM

Introduction à la méthode d'obtention du code d'état HTTP en JavaScript : Dans le développement front-end, nous devons souvent gérer l'interaction avec l'interface back-end, et le code d'état HTTP en est une partie très importante. Comprendre et obtenir les codes d'état HTTP nous aide à mieux gérer les données renvoyées par l'interface. Cet article explique comment utiliser JavaScript pour obtenir des codes d'état HTTP et fournit des exemples de code spécifiques. 1. Qu'est-ce que le code d'état HTTP ? Le code d'état HTTP signifie que lorsque le navigateur lance une requête au serveur, le service

La relation entre js et vue La relation entre js et vue Mar 11, 2024 pm 05:21 PM

La relation entre js et vue : 1. JS comme pierre angulaire du développement Web ; 2. L'essor de Vue.js en tant que framework front-end ; 3. La relation complémentaire entre JS et Vue ; Vue.

L'ère de l'IA de JS est arrivée ! L'ère de l'IA de JS est arrivée ! Apr 08, 2024 am 09:10 AM

Introduction à JS-Torch JS-Torch est une bibliothèque JavaScript d'apprentissage en profondeur dont la syntaxe est très similaire à celle de PyTorch. Il contient un objet tensoriel entièrement fonctionnel (peut être utilisé avec des dégradés suivis), des couches et des fonctions d'apprentissage en profondeur et un moteur de différenciation automatique. JS-Torch convient à la recherche sur l'apprentissage profond en JavaScript et fournit de nombreux outils et fonctions pratiques pour accélérer le développement de l'apprentissage profond. Image PyTorch est un framework d'apprentissage profond open source développé et maintenu par l'équipe de recherche de Meta. Il fournit un riche ensemble d'outils et de bibliothèques pour créer et former des modèles de réseaux neuronaux. PyTorch est conçu pour être simple, flexible et facile à utiliser, et ses fonctionnalités de graphique de calcul dynamique font

See all articles