JavaScriptの仕組みを詳しく解説

#JavaScript とは何ですか?

JavaScript の定義を確認しましょう。JavaScript は解釈された動的言語です。

インタープリタ言語は、コンパイル言語に対して相対的に存在し、ソース コードがターゲット コードに直接コンパイルされるのではなく、中間コードに変換され、インタープリタがその中間コードを解釈して実行します。

主流のプログラミング言語には、コンパイル型 (C など)、インタープリター型 (JavaScript など)、セミインタープリターおよびセミコンパイル型 (Java など) があります。

[関連コースの推奨事項: JavaScript ビデオ チュートリアル ]

コードはどのように実行されますか?

まず、コードがどのように実行されるかを理解しましょう。

コードは CPU によって実行されることがわかっていますが、現在の CPU は if...else などのステートメントを直接実行できず、バイナリ命令のみを実行できます。しかし、バイナリ命令は人間にとって非常に不親切です。バイナリ命令 1000010010101001 が何を表しているのかを迅速かつ正確に判断するのは困難です。そこで科学者たちはアセンブリ言語を発明しました。

アセンブリ言語

アセンブリ言語は、実際にはバイナリ命令のニーモニックです。

10101010 がメモリ読み取り操作を表し、メモリ アドレスが 10101111、レジスタ アドレスが 11111010 であると仮定すると、操作は完了します。 101010101010111111111010 は、特定のメモリ アドレスの値を読み取ってレジスタにロードすることを意味します。アセンブリ言語ではこの操作方法は変更されません。これは、バイナリ命令のマッピングにすぎません。

LD:10101010 
id:10101111
R:11111010

この例では、このように、上記の命令は LD id R として表現でき、コードの可読性が大幅に向上します。

しかし、これは十分に親切ではなく、CPU は 3 つのアドレスの式しか実行できず、人間の思考や言語パターンからはかけ離れています。そこで偉大な科学者たちは高級言語を発明しました。

高級言語

"コードは、機械が読むためではなく、人が読むために書かれています。

高級言語が「高度な」と呼ばれる理由は、それが私たちの思考や読書の習慣により一致しているからです。 if…elseこの種のステートメントは、1010101010 よりもはるかに快適に見えます。ただし、コンピュータは高級言語を直接実行できないため、高級言語を実行する前にアセンブリ言語/機械語に変換する必要があります。このプロセスがコンパイルです。

JavaScript をコンパイルする必要がありますか?

JavaScript は間違いなく高級言語であるため、実行する前に必ずコンパイルする必要があります。しかし、なぜそれをインタプリタ型言語と呼ぶのでしょうか?コンパイル言語、半インタープリタ言語、半コンパイル言語との違いは何ですか?コンパイルから始めましょう。

コンパイル

コンパイルの概念についてはすでに理解しました。プラットフォームについて話しましょう。同じ C コードが Windows 上でコンパイルされます。これは .obj ファイルになりますが、Linux では .o ファイルが生成されます。この 2 つは汎用的に使用することはできません。これは、実行可能ファイルにはコードに加えて、オペレーティング システムの API、メモリ、スレッド、プロセスなどのシステム リソースも必要であり、オペレーティング システムによって実装も異なるためです。たとえば、私たちがよく知っている I/O 多重化 (イベント駆動の魂)、Windows での実装ソリューションは IOCP ソリューション、Linux では epoll です。したがって、コンパイルされた言語は、プラットフォームごとに個別にコンパイルするか、さらには個別に記述する必要があり、生成される実行可能ファイルの形式は異なります。

クロスプラットフォーム

Java は、バイトコードを導入することでさらに一歩進んで、クロスプラットフォーム操作を実現します。コンパイルされたすべての .java ファイルは関係ありません。オペレーティング システム上には .class ファイルがあります (これはバイトコード ファイルであり、ターゲット コードの中間形式です)。次に、Java は、バイトコード ファイルを解釈して実行するために、さまざまなシステムにさまざまな Java 仮想マシンを提供します。解釈と実行ではオブジェクト コードは生成されませんが、最終的にはコンピューター実行用のアセンブリ/バイナリ命令に変換されます。

単純なオペレーティング システムを完全に独立して作成した場合、Java を実行できるでしょうか?このシステムには対応する JVM がないため、明らかに不可能です。したがって、Java のクロスプラットフォームと他の言語のクロスプラットフォームには制限があります。

セミインタープリットおよびセミコンパイルを使用する Java の利点は、開発効率が大幅に向上しますが、それに応じてコードの実行効率が低下することです。結局のところ、仮想マシンのパフォーマンスが低下します。

#説明と実行

コンパイルプロセス

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

词法分析

词法分析会把语句分解成词法单元，即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 つの問題にタイムリーに対処できることは明らかです。

#結論

ハッピーハッキング!

js チュートリアル 列からのものです。ぜひ学習してください。

以上がJavaScriptの仕組みを詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。