JavaScript 작동 방식에 대한 자세한 설명

자바스크립트란 무엇인가요?

JavaScript의 정의를 확인해 보겠습니다. JavaScript는 해석된 동적 언어입니다.

컴파일된 언어에 비해 해석된 언어가 존재합니다. 소스 코드는 직접 타겟 코드로 컴파일되지 않고 중간 코드로 변환된 후 인터프리터에 의해 해석되고 실행됩니다.

주요 프로그래밍 언어에는 컴파일(예: C++), 해석(예: JavaScript), 반해석 및 반컴파일(예: Java)이 포함됩니다.

[관련 강좌 추천: JavaScript 동영상 튜토리얼]

코드는 어떻게 실행되나요?

먼저 코드가 어떻게 실행되는지 이해해 봅시다.

우리는 코드가 CPU에 의해 실행된다는 것을 알고 있으며, 현재 CPU는 if...else와 같은 명령문을 직접 실행할 수 없으며 바이너리 명령어만 실행할 수 있습니다. 하지만 이진 명령어는 인간에게 정말 비우호적입니다. 이진 명령어 1000010010101001가 나타내는 것이 무엇인지 빠르고 정확하게 판단하기가 어렵습니다. 그래서 과학자들은 어셈블리 언어를 발명했습니다. if…else之类的语句，它只能执行二进制指令。但是二进制指令对人类实在是太不友好了：我们很难快速准确的判断一个二进制指令1000010010101001代表什么？所以科学家们发明汇编语言。

汇编语言

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

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

LD:10101010 
id:10101111
R:11111010

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

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

高级语言

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

高级语言之所以称之为“高级”，就是因为它更加符合我们的思维和阅读习惯。if…else这种语句看起来要比1010101010

어셈블리 언어

“코드는 사람이 읽을 수 있도록 작성된 것이지 기계가 읽을 수 있도록 작성된 것은 아닙니다.”

컴파일

Cross-platform

现在我们确认了，即使是解释执行的语言，也是需要编译的。那么代码是如何编译的呢？我们来简单了解一下。

词法分析

词法分析会把语句分解成词法单元，即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 <p>编译器需要把多份目标代码（库）链接起来才能生成可执行文件。至此，我们简单的了解了编译过程。但实际上编译比我们所讲的要复杂得多，在此就不在展开了。</p>
<p><strong><span style="font-size: 18px;">什么是动态语言，动态类型？</span></strong></p>
<p>我们还知道，JavaScript是动态语言。那么什么是动态语言？</p>
<p>通常来说，这是指在运行时代码可以根据某些条件改变自身结构的语言。比如JavaScript在运行时新的函数、对象、甚至代码都可以被引进（eval）；又比如Objective-C，它也可以在运行时修改对象，但它不能动态创建类，也没有 eval 方法。那Objective-C算是动态语言吗？所以我认为，动态语言是个程度的问题，我们不必在这个概念上太过纠结，可以更多的关注其应用。APP中常用的热更新功能就是基于动态语言特性而得以实现的。</p>
<p>JavaScript又是一门动态类型的语言，动态类型又是什么？动态类型的定义倒是很明确：数据类型不是在编译阶段确定，而是在运行时确定。</p>
<p>那么 TypeScript 是什么类型的语言呢？它有静态类型检查，它是静态语言吗？实际上它只是 JavaScript 的一个方言。TypeScript 最终还是要转译为 JavaScript 才能执行（tsc），就如同我们使用babel 把 ES6 代码转译为 ES5 一样。这个过程严格上来说不是编译。</p>
<p>TypeScript 最大的优势就是静态类型检查和类型推断，这是 JavaScript 严重缺失的能力。但实际上如果我们忽略IDE 给的报错提示强行运行 TS 代码，也还是有几率能够成功跑起来的。</p>
<p><span style="font-size: 18px;"><strong>错误</strong></span></p>
<p>刚刚我们提到报错，不妨再扩展说一说错误。通常来说错误分为以下几种：</p>
<ul>
<li>编译时错误</li>
<li>链接时错误</li>
<li>运行时错误</li>
</ul>
<p>是不是和编译过程能够严格对应起来？</p>
<p><strong>编译时错误</strong></p>
<p>编译时错误分为：</p>
<ul>
<li>
<p>语法错误</p>
<pre class="brush:php;toolbar:false">var str ='s ;

这就是典型的语法错误，这种代码无法生成AST，在词法分析阶段就会报错。通常我们这么写代码，IDE 就会报错。这是IDE的优化工作，和词法分析相关。

链接时错误

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

运行时错误

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

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

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

JavaScript中最常见的十个错误：

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

분명히 TypeScript를 사용하면 코딩 초기 단계에서 이러한 8가지 문제를 적시에 처리할 수 있습니다.

결론

이제 우리는 JavaScript가 어떻게 작동하는지 이해했습니다. 하지만 이것을 이해하면 더 나은 코드를 작성하는 데 도움이 될까요?

답은 그렇습니다. TypeScript가 유형 검사 및 유형 추론을 개선하는 데 도움이 될 수 있다는 점은 말할 것도 없고, JavaScript의 범위와 범위도 컴파일 프로세스와 밀접하게 관련되어 있으며 현재 주류 소규모 프로그램 프레임워크는 하나의 코드 세트와 여러 플랫폼을 지원할 수 있다고 믿습니다. 이 기사를 읽은 후 마지막으로 이러한 기술의 기본 원리를 전반적으로 이해하게 되었습니다.
해킹을 즐겨보세요!

이 기사는 js tutorial 칼럼에서 가져온 것입니다. 배우신 것을 환영합니다!

위 내용은 JavaScript 작동 방식에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!