JavaScript 是如何运行的？

什么是JavaScript？

咱们来确认一下JavaScript的定义：JavaScript 是一门解释型的动态语言。

解释型语言是相对于编译型语言存在的，源代码不是直接编译为目标代码，而是转成中间代码，再由解释器对中间代码进行解释运行。

主流编程语言有编译型（如 C++）、解释型（如 JavaScript）、和半解释半编译（如 Java）这几大类型。

代码是怎么运行的？

首先咱们来了解一下代码是怎么运行的。

咱们知道，代码是由CPU执行的，而目前的CPU并不能直接执行诸如if…else之类的语句，它只能执行二进制指令。可是二进制指令对人类实在是太不友好了：咱们很难快速准确的判断一个二进制指令1000010010101001表明什么？因此科学家们发明汇编语言。

汇编语言

汇编语言实际上就是二进制指令的助记符。

假设10101010表明读取内存操做，内存地址是10101111，寄存器地址是11111010，那么完整的操做101010101010111111111010就表明读取某个内存地址的值并装载到寄存器，而汇编语言并无改变这种操做方式，它只是二进制指令的映射：

LD:10101010 
id:10101111
R:11111010

这样上述指令就能够表达为LD id R ，大大加强了代码的可读性。

可是这样还不够友好，CPU只能执行三地址表达式，和人的思考方式、语言模式相距甚远。因此伟大的科学家们又发明了高级语言。

高级语言

“代码是写给人看的，不是写给机器看的，只是顺便计算机能够执行而已。”

高级语言之因此称之为“高级”，就是由于它更加符合咱们的思惟和阅读习惯。if…else这种语句看起来要比1010101010舒服的多了。可是计算机并不能直接执行高级语言，因此还须要把高级语言转化为汇编语言/机器指令才能执行。这个过程就是编译。

JavaScript 须要编译吗？

JavaScript毫无疑问是高级语言，因此它确定是须要编译后才能执行。但为何咱们又称之为解释型语言呢？它和编译型语言、半解释半编译型语言又有什么区别呢？咱们先从编译提及。

编译

以前咱们已经了解编译的概念，下面咱们来聊聊平台：一样一份C++代码在Windows上会编译成.obj文件，而在Linux上则生成.o文件，二者不能通用。这是由于一个可执行文件除了代码外还须要操做系统 API、内存、线程、进程等系统资源，而不一样的操做系统其实现也不尽相同。好比咱们熟悉的I/O多路复用（事件驱动的灵魂），在Windows上的实现方案是IOCP方案，在Linux上是epoll。因此针对不一样的平台，编译型语言须要分别编译，甚至须要分别编写，并且生成的可执行文件其格式并不相同。

跨平台

Java在此之上更进一步，它经过引入字节码实现了跨平台运行：不管是在什么操做系统上.java文件编译出的都是.class文件（这就是字节码文件，一种中间形态的目标代码）。而后Java对不一样的系统提供不一样的Java虚拟机用于解释执行字节码文件。解释执行并不生成目标代码，但其最终仍是要转为汇编/二进制指令来给计算机执行的。

假如咱们本身彻底独立的新写一个简单的操做系统，那么它能不能运行Java呢？很显然是不能的，由于并无这个系统相应的JVM。因此Java的跨平台、任何其余语言的跨平台，都是有局限性的。

Java采用半解释半编译的好处就是大大提高了开发效率，然而相应的则下降了代码的执行效率，毕竟虚拟机是有性能损失的。

解释执行

JavaScript则更进一步。它是彻底的解释执行，或者叫作即时编译。它不会有中间代码生成，也不会有目标代码生成。这个过程一般由宿主环境（如浏览器、Node.js）包办。

编译过程

如今咱们确认了，即便是解释执行的语言，也是须要编译的。那么代码是如何编译的呢？咱们来简单了解一下。

词法分析

词法分析会把语句分解成词法单元，即Token。

function square(n){
 return n*n;
}

这个函数会被词法分析器识别为function ，square，(，n，)，{，return，，n ,*，n ，}而且给它们加上标注，表明这是一个变量仍是一个操做。

语法分析

这个过程会把Token转化成抽象语法树（AST）：

{
 type:'function',
    id:{
        type:'id'
        name:'square'
    },
    params:[
        {
            type:'id',
            name:'n'
        }
    ]
    ...
}

优化及代码生成

在这一步编译器会作一些优化工做，好比删除多余运算、删除未用赋值、合并部分变量等等操做，最后生成目标代码。

因为即时编译型语言的编译一般发生在运行前几微秒，因此编译器来不及作太多的优化工做。这也是相比编译型语言，早期JavaScript性能孱弱的缘由之一。不过就如今而言，益于 V8 引擎（相比早期的JavaScript的引擎转换成字节码或解释执行，Node.js能够用 V8 提供的 JS2C 工具将 JavaScript 转译为 C++代码），JavaScript 和其余语言性能上的差距已经不足为道了。

连接及装载

目标代码基本不能独立运行。应用程序通常都会由多个部分（模块）组成 ，好比C++中一个简单的输出就要引入标准库 iostream：

#include <iostream>
using namespace std;
int main(){    
    cout << "Happy Hacking!\n";    
    return 0;
}

编译器须要把多份目标代码（库）连接起来才能生成可执行文件。至此，咱们简单的了解了编译过程。但实际上编译比咱们所讲的要复杂得多，在此就不在展开了。

什么是动态语言，动态类型？

咱们还知道，JavaScript是动态语言。那么什么是动态语言？

一般来讲，这是指在运行时代码能够根据某些条件改变自身结构的语言。好比JavaScript在运行时新的函数、对象、甚至代码均可以被引进（eval）；又好比Objective-C，它也能够在运行时修改对象，但它不能动态建立类，也没有 eval 方法。那Objective-C算是动态语言吗？因此我认为，动态语言是个程度的问题，咱们没必要在这个概念上太过纠结，能够更多的关注其应用。APP中经常使用的热更新功能就是基于动态语言特性而得以实现的。

JavaScript又是一门动态类型的语言，动态类型又是什么？动态类型的定义却是很明确：数据类型不是在编译阶段肯定，而是在运行时肯定。

那么 TypeScript 是什么类型的语言呢？它有静态类型检查，它是静态语言吗？实际上它只是 JavaScript 的一个方言。TypeScript 最终仍是要转译为 JavaScript 才能执行（tsc），就如同咱们使用babel 把 ES6 代码转译为 ES5 同样。这个过程严格上来讲不是编译。

TypeScript 最大的优点就是静态类型检查和类型推断，这是 JavaScript 严重缺失的能力。但实际上若是咱们忽略IDE 给的报错提示强行运行 TS 代码，也仍是有概率可以成功跑起来的。

错误

刚刚咱们提到报错，不妨再扩展说一说错误。一般来讲错误分为如下几种：

• 编译时错误
• 连接时错误
• 运行时错误

是否是和编译过程可以严格对应起来？

编译时错误

编译时错误分为：

• 语法错误

  var str ='s ;

  这就是典型的语法错误，这种代码没法生成AST，在词法分析阶段就会报错。一般咱们这么写代码，IDE 就会报错。这是IDE的优化工做，和词法分析相关。

• 类型错误

  编译器会检查咱们声明的变量和函数的类型，JavaScript中咱们很是熟悉的Type Error:undefined is not object就是此类错误。

连接时错误

在连接阶段发生的异常。这种状况 JavaScript 中比较少见，在编译型语言中比较常见。

运行时错误

这是最难排查的错误了，举例来讲：

int divider(int a,int b){
    return a/b;
}

上面的代码在编辑编译、连接阶段都没问题，也可以正常的生成可执行文件。可是一旦如此使用divider(1,0)就会报错了，这就是典型的运行时错误。一般来讲运行时错误都是程序不够健壮致使的。

JavaScript中最多见的十个错误：

下图是某错误处理平台收集统计的JavaScript Top10 错误，其中7个TypeError，1个 ReferenceError：

显然这 8 种问题，咱们都能用 TypeScript 在编码早期及时应对。

结语

如今咱们已经了解JavaScript是如何运行的。可是了解这些可以帮咱们写出更好的代码吗？

答案是确定的。且不说TypeScript可以帮助咱们完善类型检查和类型推断，JavaScript的做用域、this也是和编译过程强相关的；而目前主流的小程序框架都可以支持一套代码、多个平台，相信读完本文后，你大体也了解了这些技术背后的原理。
Happy Hacking！

顺便给你们推荐一下Fundebug，很好用的BUG监控工具~