JavaScript学习笔记

# 一.编译阶段

前言

词法分析是将字符流（char steam）转换为记号流（token stream）。把输入的字符串分解为一些对编程语言有意义的代码块（词法单元）

javaScript 代码运行前有一个类似编译的过程即词法分析，词法分析主要有三步：

  • 分析参数

  • 分析变量的声明

  • 分析函数的声明

  • 案例代码

var answer = 6 * 7
1

# 1.词法分析（分词）

将 js 代码中的字符串分割为有意义的代码块，这些代码块我们可以称为“词法单元”。案例 (opens new window)

;[
  {
    type: "Keyword",
    value: "var",
  },
  {
    type: "Identifier",
    value: "answer",
  },
  {
    type: "Punctuator",
    value: "=",
  },
  {
    type: "Numeric",
    value: "6",
  },
  {
    type: "Punctuator",
    value: "*",
  },
  {
    type: "Numeric",
    value: "7",
  },
  {
    type: "Punctuator",
    value: ";",
  },
]
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

# 2.语法分析（解析）

将词法单元流转换成一颗抽象语法树（AST）。案例 (opens new window)

{
  "type": "Program",
  "body": [
    {
      "type": "VariableDeclaration",
      "declarations": [
        {
          "type": "VariableDeclarator",
          "id": {
            "type": "Identifier",
            "name": "answer"
          },
          "init": {
            "type": "BinaryExpression",
            "operator": "*",
            "left": {
              "type": "Literal",
              "value": 6,
              "raw": "6"
            },
            "right": {
              "type": "Literal",
              "value": 7,
              "raw": "7"
            }
          }
        }
      ],
      "kind": "var"
    }
  ],
  "sourceType": "script"
}
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

# 3.代码生成

将上述代码包装成可以运行的代码

总结

将上一步的词法单元集合分析合并，最终转换为一个由元素逐级嵌套所组成的代表了程序语法结构的树，即抽象语法树（AST）

← 二.执行栈 →