Comment fonctionne JavaScript

Cet article vous propose une analyse théorique détaillée des principes de fonctionnement de JavaScript et un partage de points de connaissances. Si cela vous intéresse, veuillez l'apprendre.

JavaScript est un langage de script dynamique faiblement typé basé sur les objets (ci-après dénommé JS). Il s'agit d'un langage interprété. Il est différent des autres langages de programmation, tels que Java/C++ et d'autres langages compilés. Ces langages Avant que le code ne soit exécuté, l'intégralité du code sera compilé et d'abord compilé en bytecode (code machine). Puis exécutez. JS ne fait pas cela. JS n'a pas besoin d'être compilé en code intermédiaire, mais peut être exécuté directement dans le navigateur. Le processus d'exécution de JS peut être divisé en deux étapes, la compilation et l'exécution. (Merci de vous référer au livre JS You Don't Know), lorsque le contrôleur JS bascule sur un morceau de code exécutable (ce code exécutable est généré lors de la phase de compilation), le Contexte d'Exécution correspondant (EC pour court). Le contexte d'exécution peut être compris comme l'environnement d'exécution (le contexte d'exécution ne peut être créé que par l'interpréteur JS et ne peut être utilisé que par l'interpréteur JS. Les utilisateurs ne peuvent pas utiliser « l'objet »).

L'environnement d'exécution en JS est divisé en trois catégories :

• Environnement global : Lorsque le moteur JS entre dans un bloc de code, s'il rencontre La balise < ;script>xxx2cacc6d41bbb37262a98f745aa00fbf0 doit entrer dans un environnement d'exécution global

• Environnement de fonction : lorsqu'une fonction est appelée, un environnement d'exécution de fonction est formé à l'intérieur de la fonction

• eval() : Exécuter la chaîne en tant que code JS seul. Il n'est pas recommandé d'utiliser

Plusieurs contextes d'exécution peuvent être générés dans un morceau de JS. code , en JS, une structure de données telle qu'une pile est utilisée pour gérer le contexte d'exécution. Les caractéristiques de la pile sont "premier entré, dernier sorti, dernier entré, premier sorti". .

Caractéristiques du contexte d'exécution

• Le bas de la pile est toujours le contexte d'exécution global, et il n'y en a qu'un seul

• contexte d'exécution global La pile n'apparaîtra que lorsque le navigateur est fermé

• Il n'y a pas de limite au nombre d'autres contextes d'exécution

• Le haut de la pile est toujours le contexte d'exécution actif actuel, le reste est dans un état d'attente, une fois l'exécution terminée, la pile est immédiatement sautée, puis le contrôle est rendu au contexte d'exécution suivant

• La fonction ne sera appelée qu'à chaque fois. Créez un contexte d'exécution pour elle, qui n'était pas disponible lors de la déclaration de la fonction.

Le contexte d'exécution peut être clairement compris comme un objet JS ordinaire. Le cycle de vie d'un contexte d'exécution se compose grossièrement de deux phases :

Phase de création

Cette phase complète principalement trois événements, 1. Créer un objet variable 2. Établir une chaîne de portée 3. Déterminer ce point

Phase d'exécution

Cette phase complète principalement l'affectation de variables, l'appel de fonction et d'autres opérations

Processus de création d'objet variable (VO)

1 Créez et initialisez l'objet arguments en fonction des paramètres de la fonction, et ajoutez les attributs "0", "1 à. l'objet arguments ", "2", "3" et d'autres attributs, leur valeur initiale n'est pas définie et la valeur arguments.length est définie sur le nombre réel de paramètres transmis.
2. Recherchez la déclaration de fonction et ajoutez des attributs à l'objet variable. Le nom de l'attribut est le nom de la fonction et la valeur de l'attribut est la valeur de référence de la fonction. une avec le même nom, écrasez-la directement
3. Recherchez la déclaration de variable var (lors de la recherche d'une variable, les paramètres de la fonction seront équivalents à la déclaration var, donc la le même attribut que le nom du paramètre sera également ajouté au VO, et la valeur initiale sera également ajoutée non définie), ajoutez un attribut à l'objet variable. Le nom de l'attribut est le nom de la variable et la valeur de l'attribut est indéfinie. déjà un identifiant du même nom, il ne sera pas traité
S'il existe un identifiant (fonction, variable) du même nom ), la fonction peut écraser la variable, et le la fonction a une priorité plus élevée que la variable

L'objet variable (OV) et l'objet d'activation (AO) sont la même chose, deux noms à des moments différents. On l'appelle l'objet variable pendant la période de création et l'objet d'activation pendant la période d'exécution

Prenons comme exemple le code suivant

Phase de compilation

var g_name="tom";
var g_age=20;
function g_fn(num){
 var l_name="kity";
 var l_age=18;
 function l_fn(){
  console.log(g_name + '===' + l_name + '===' + num);
 }
}
g_fn(10);

Quand le Le contrôleur JS passe à ce morceau de code Lorsque le contexte d'exécution est créé, un contexte d'exécution sera créé. La structure du contexte d'exécution G_EC

est à peu près la suivante :

Une fois. le contexte d'exécution est créé, il sera immédiatement poussé dans la pile d'appels de fonction. Expliquez à ce moment-là. L'implémenteur fera tranquillement une chose, qui consiste à ajouter un attribut interne [[scope]] à la fonction dans le VO actuel, ce qui pointe vers la chaîne de portée ci-dessus.

G_EC = {
 VO   : {},
 Scope_chain : [],
 this  : {}
}

/* VO的结构大概 */
VO = {
 g_name : undefined,
 g_age : undefined,
 g_fn : <函数在内存中引用值>
}

/* Scope_chain的大概结构如下 */
Scope_chain = [ G_EC.VO ] // 数组中第一个元素是当前执行上下文的VO，第二个是父执行上下文的VO,最后一个是全局执行上下文的VO,在执行阶段，会沿着这个作用域链一个一个的查找标识符，如果查到则返回，否知一直查找到全局执行上下文的VO

/* this */
this = undefined // 此时this的值是undefined

Phase d'exécution

g_fn.scope = [ global_EC.VO ] // 该scope属性只能被JS解释器所使用，用户无法使用

Exécutez le code ligne par ligne. Lorsqu'une expression est rencontrée, elle recherchera l'objet VO dans la chaîne de portée actuelle. S'il est trouvé, il sera renvoyé. Sinon, continuez à rechercher l'objet VO suivant jusqu'à ce que l'objet VO global soit terminé.

Cette étape peut avoir des affectations de variables, des appels de fonction et d'autres opérations. Lorsque l'interpréteur rencontre g_fn(), il sait qu'il s'agit d'un appel de fonction, puis crée immédiatement un contexte d'exécution de fonction pour celui-ci, fn_EC, qui Le contexte fn_EC comporte également deux phases

à savoir la phase de création et la phase d'exécution.

Dans la phase de création, pour le contexte d'exécution de la fonction, lors de la création de l'objet variable, un objet arguments supplémentaire sera créé, puis des attributs seront ajoutés à l'objet arguments : "0", "1", "2" dont la valeur initiale n'est pas définie,

Rechercher la déclaration de fonction de fonction
Rechercher la déclaration de variable var

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles connexes :

Utilisation de Native dans React pour implémenter des composants de visualisation d'images

Utilisation de vue-cli combinée avec Element-ui dans cropper . Basé sur js, vue est encapsulé pour implémenter la fonction du composant de recadrage d'image

Une série de fonctions telles que l'aperçu local, le recadrage, la compression et le téléchargement d'images sont implémentées dans vue.js <.>

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!