[Day 1] JavaScript 的运行

在了解 JavaScript 如何运行前，首先要先知道，我们所撰写的 JavaScript 是无法直接被电脑读取的，必须先将程序语言转换成机器语言，让电脑读懂後，才可以运作，而我们所撰写的程序语言又依照翻译的方式，被分为编译语言与直译语言。

编译语言(Compiled Language)

编译语言会在程序执行前先经过编译器将程序码编译成机器语言後才运行，也因可在预先在编译时除错，所以效能较好，而属於编译语言的有 C++、C#、Swift...等

直译语言 (Interpreted Language)

直译语言与编译语言一样，也会将程序码编译成机器语言给电脑运行，但直译语言是在执行时利用直译器将原始码一行一行翻译并立即运行，而编译语言则是将全部程序码读完才翻译然後再执行，直译语言的优点是弹性高、也因一边编译一边执行，所以除错效率高，开发速度快，属於直译语言的有 JavaScript、Python、Ruby...等

JavaScript 直译器转换过程

而 JavaScript 是直译语言，需使用直译器将程序码转译後才能运行，以下利用 Esprima 工具 ，来了解 JavaScript 直译器的转换过程，转换步骤如下：

1. 语法单元化 (Tokenizing)
2. 抽象结构数 AST (Abstract Syntax Tree)
3. 代码生成

并以以下 范例1 来说明：

let name = 'Carol';

语法单元化 (Tokenizing)

语法单元化会将 JavaScript 内的标点符号、词汇一一解析出来。

// Tokens

[
    {
        // let 被解析为关键字
        "type": "Keyword",
        "value": "let"
    },
    {
        // name 被解析为标识符，此时并未知道是变数
        "type": "Identifier",
        "value": "name"
    },
    {
        // = 被解析为标点符号，此时并未知道是赋予的意思
        "type": "Punctuator",
        "value": "="
    },
    {
        // = 被解析为字串
        "type": "String",
        "value": "'Carol'"
    },
    {
        // ; 被解析为标点符号
        "type": "Punctuator",
        "value": ";"
    }
]

抽象结构树 AST (Abstract Syntax Tree)

接下来会透过抽象结构树将整个原始码结构定义出来
注意：此时只是定义结构树，还未运行程序码

// Tree

  type: Program
- body
  - #1
      // 变数宣告
      type: VariableDeclaration
    - declarations
      - #1
          // 变数宣告
          type: VariableDeclarator
        - id
            type: Identifier
            // 变数的名称
            name: name
        - init
            type: Literal
            // 赋予的值
            value: Carol
            raw: 'Carol'
      // 定义变数的方法
      kind: let
  sourceType: script

也可以用抽象结构树来了解程序码意思，范例2 如下：

name = 'Carol';

虽然 范例2 与 范例1 只差了 "let"，但可在抽象结构树了解到两者是完全不同意思。
范例1 是宣告一个变数并赋予值，而范例2 只是指派一个值到变数上

// Tree

  type: Program
- body
  - #1
      // 表达式语句
      type: ExpressionStatement
    - expression
      - #1
          // 赋值表达式
          type: AssignmentExpression
        - left
            type: Identifier
            // 变数的名称
            name: name
        - right
            type: Literal
            // 赋予的值
            value: Carol
            raw: 'Carol'
      // 定义变数的方法
      kind: let
  sourceType: script

代码生成

代码生成会因执行的环境有些许差异，且在代码生成後才会运行程序码

参考文献

六角学院 - JavaScript 核心篇

以上是今天的内容，第一次参加 IT 铁人赛，期望能顺顺利利完成~