En savoir plus sur le fonctionnement de JavaScript

1 Principe approfondi du moteur V8

2 Contexte d'exécution JS

3 Processus global d'exécution du code

4 Processus d'exécution du code de fonction

5 Portée et chaîne de portée

Code source->Arbre de syntaxe abstraite->bytecode.

Lorsque la fonction est exécutée, le bytecode a optimisé le code machine car les types de paramètres sont les mêmes. Cependant, si le type de paramètre change, le code machine doit être régénéré puis optimisé (les performances diminuent).

Les fonctions seront analysées en premier, suivies des variables. Il peut toujours fonctionner normalement comme sur l'image ci-dessous. S'il existe une autre variable appelée bar, la fonction sera écrasée par les paramètres et la sortie sera la valeur du paramètre.

L'image suivante est un diagramme de pile de l'état initial du code à droite (la gauche est la pile d'exécution de contexte ECS ; la droite est GO, AO, etc.)

Lorsque la fonction foo est exécutée ici, AO sera créé, puis le bloc vert indique le processus d'exécution de chaque ligne de la fonction.

Si le message dans le code de fonction est imprimé avant que la valeur ne soit attribuée, alors tant que ce paramètre est créé dans la fonction, l'effet de portée se produira. Recherchez-le d'abord dans AO et le message sera imprimé comme non défini.

La fonction recherche les paramètres via la chaîne de portée

La chaîne de portées est déterminée lors de la création de l'objet, et non à l'endroit où vous l'exécutez.

La fonction foo dans la figure ci-dessous

Lorsqu'une fonction est imbriquée dans une fonction, le processus d'exécution du contexte

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script>

    // 1.面试题一:
    // var n = 100
    // function foo() {
    //   n = 200
    // }
    // foo()

    // console.log(n)

    // 2.面试题二:
    // var n = 100
    // function foo() {
    //   console.log(n)
    //   var n = 200
    //   console.log(n)
    // }

    // foo()

    // 3.面试题三:
    // var n = 100

    // function foo1() {
    //   console.log(n)
    // }
    // function foo2() {
    //   var n = 200
    //   console.log(n)
    //   foo1()
    // }
    // foo2()

    // 4.面试题四:
    // var n = 100
    // function foo() {
    //   console.log(n)
    //   return
    //   var n = 200
    // }
    // foo()

    // 5.在开发中可能会出现这样错误的写法,在函数里面定义了全局变量
    //这个变量在全局都能用。
    // function foo() {
    //   message = "Hello World"
    // }
    // foo()
    // console.log(message)

    // 6.面试题五: 这里的b相当于上面5的写法，虽然在函数里面定义了变量，却能在
    //全局使用这个变量。原因是没有声明这个变量。
    function foo() {
      var a = b = 100
    }
    foo()
    console.log(b)

  </script>

</body>
</html>

Le fonctionnement de js ici est très compliqué et des objets sont créés à tout moment, car des conditions sont fournies pour les fermetures ultérieures .

En savoir plus sur le fonctionnement de JavaScript

Je suppose que tu aimes