JavaScript の仕組みについてさらに詳しく

1 V8 エンジンの原理を深く理解する

2 JS実行コンテキスト

3 グローバルコード実行プロセス

4 ファンクションコード実行処理

5 スコープとスコープチェーン

ソースコード -> 抽象構文ツリー -> バイトコード。

関数を実行すると、パラメータの型が同じであるため、バイトコードは最適化された機械語コードになりますが、パラメータの型が変わると、機械語コードを再生成して最適化する必要があります(パフォーマンスが低下します)。

最初に関数が解析され、次に変数が解析されます。下の写真のように正常に動作します。bar という別の変数がある場合、関数はパラメーターによって上書きされ、出力はパラメーター値になります。

次の図は、右側のコードの初期状態のスタック図です (左側はコンテキスト実行スタック ECS、右側は GO、AO など)。

ここで関数 foo を実行すると、AO が作成され、その後、関数内の各行が実行されるプロセスが緑色のブロックで示されます。

値が割り当てられる前に関数コード内のメッセージが出力される場合、このパラメーターが関数内で作成されている限り、スコープ効果が発生します。最初に AO で検索すると、メッセージは未定義として出力されます。

関数はスコープチェーンを通じてパラメータを検索します

スコープチェーンは、オブジェクトを実行する場所ではなく、オブジェクトの作成時に決定されます。

以下の図の foo 関数

関数が関数内にネストされている場合、コンテキストを実行するプロセス

<!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>