JavaScript的运作方式

程式语言有两种编译的方式，「直译式语言」和「编译式语言(Compiled language)」，

我们的JavaScript属于直译式语言 (Interpreted language)。

其特性就是会一行一行的将程式码透过直译(Interpret)成机器码(machine language)，

然后执行它(因为到这阶段机器才看得懂它)，且多半以动态语言(dynamic language)为主。

这种语言的的执行段效能会相较编译式来说稍微慢些。

但是它的优势是具有 : 灵活的型别处理、动态生成、程式弹性的特性。

直译式语言不会预先除错，所以错误会直接被带出来…

编译式语言多半会是静态语言(static language)，它们会事先定义的型别、型别检查 (type check) 与拥有高效能的执行速度等特性。

直译器的转换过程

语法基本单元化(Tokenizing)
将词彙一一解析出来

抽象结构树AST(Abstract Syntax Tree)
定义原始码的结构

代码生成
生成机器看得懂的东西

<script>var genius='Eason';</script>

我们用编译器观察，这段程式码会变成甚么样子吧。
各位会看到Tokens里面，这段程式码被拆解，并没有赋予任何文字或符号意义。

[    {        "type": "Keyword", // 定义var 是个 关键字keyword        "value": "var" //值是var    },    {        "type": "Identifier",        "value": "genius"    },    {        "type": "Punctuator",        "value": "="    },    {        "type": "String",        "value": "'Eason'"    },    {        "type": "Punctuator",        "value": ";"    }]

结构树中会定义这些是甚么意思:

补充:此时程式码也还没执行喔，要到运行阶段才会执行。

{  "type": "Program",  "body": [    {      "type": "VariableDeclaration",      "declarations": [        {          "type": "VariableDeclarator",          "id": {            "type": "Identifier",            "name": "genius"          },          "init": {            "type": "Literal",            "value": "Eason",            "raw": "'Eason'"          }        }      ],      "kind": "var"    }  ],  "sourceType": "script"

结构树的样貌

参考资料:

编译语言 VS 直译语言

编译器:https://esprima.org/demo/parse.html#
连载:Eason的前端笔记

六角学院 JavaScript核心篇