iT邦幫忙

2021 iThome 鐵人賽

DAY 8
0
Modern Web

舌尖上的JS系列 第 8

D8 - 你不知道Combo : 甜點用一杯 Mojito 解釋 直譯器、編譯器

前言

吃了前菜、主餐,沒有飯後甜點怎麼可以呢!
你不知道 Combo 套餐系列最後一道,以一杯 Mojito 解釋 JavaScript 到底是 Compiled 編譯 還是 Intepreted 直譯語言?

圖片來源 CLEANPNG

直譯器 Interpreter編譯器 Compiler

介紹 JavaScript 時會稱它為 直譯語言 Interperted Language,但在前幾章解釋引擎解讀程式碼的行為時,明明是先進行了編譯的動作,那這樣還算直譯語言嗎?

先說說,其實電腦是無法直接閱讀 JavaScript 的,需要引擎透過某種方式來翻譯成電腦看得懂的語言,方式有兩種,可以透過 直譯器 Interpreter 或是 編譯器 Compiler 進行翻譯,使用編譯器翻譯的語言就稱為編譯語言,直譯器翻譯的語言則是直譯語言。

比較一下兩者是怎麼進行翻譯的
讓我用調製一杯 Mojito 來告訴你什麼是 直譯器 Interpreter編譯器 Compiler
(參考自 JavaScript — is it Compiled or Interpreted?

製作一杯 Mojito

Mojito 需要的材料有:

· 白蘭姆酒 45ml
· 新鮮檸檬汁 30ml
· 薄荷葉 8~10 小片
· 糖或糖漿 30ml
· 蘇打水

來看看兩位 Bartender 編譯器 及 直譯器 怎麼製作

編譯器:首先掃描過一次菜單,看看需要哪些材料,準備白萊姆酒 45ml、擠出檸檬汁、摘幾片薄荷葉、糖漿 30ml,最後蘇打水也準備好,一切材料都擺放在桌上,現在可以拿出杯子,將材料通通倒入混合,結束。

直譯器:我的做法就不一樣了,直接拿出杯子,然後依照菜單一個步驟一個步驟進行,第一個從櫃子上拿出萊姆酒倒入杯中,再來需要檸檬,於是走到冰箱拿出檸檬,切片擠出檸檬汁倒入,接著走到陽台取薄荷葉,搗碎放入,再依序是糖漿、蘇打水,最後還需要一小片薄荷葉裝飾,再走到陽台,摘下,放上,完成。

看得出兩位調製上的差異嗎

編譯器花較久的前製期在準備材料,但開始調製後只需將材料混合,製作時間比較快!

直譯器很快開始製作,沒有進行前置作業,馬上就從第一步開始執行,但製作上花比較久的時間,重複做同樣的步驟,如走到陽台摘取薄荷葉。

好的,看到這裡是不是有點概念了
不要告訴我你學到的只是 Mojito 的調製步驟

JavaScript 到底是 Compiled 還是 Intepreted 語言?

好的,具備以上概念後可以來解答了
答案是:JavaScript 是 Interpreted Language !

讓我們再仔細來看看 Wikipedia 內的直譯器介紹,重點已幫您畫起來,目光放到第 3 點

JIT (Just-in-time)Compilation 名為 即時編譯 的一種技術

簡單來說,這個技術結合了傳統編譯器的速度與傳統直譯器的靈活度,更動態的進行編譯的動作,因此適用在動態的程式語言,被主流瀏覽器像 V8 等採用。
V8? 就是被應用在 Chrome 和 Node.js 環境的那位 JavaScript 引擎大大

Stanford 的一份 JavaScript 介紹文檔中也提到 JavaScript 就是個直譯語言,瀏覽器使用 JIT 技術轉譯成電腦可解讀的代碼。

我想,若要比喻的話,JIT 應該就是位知道要把麻煩的東西準備好,像是摘好薄荷葉,然後可以邊調邊看菜單的肖連 bartender 吧

結語

你不知道 Combo 系列終於結束啦~~ 我的中秋假期都泡在這 (ಥ_ಥ),但找資料的過程又重新釐清一些以前模模糊糊的知識點,尤其是直譯器與編譯器,Mojito 那篇比喻文太對我胃口,立馬決定點心就是你了!!

希望這個份量滿滿的 Combo 有符合各位的胃口 (90度鞠躬)
/images/emoticon/emoticon41.gif

Reference:

JavaScript — is it Compiled or Interpreted?
編譯語言 - Wikipeida
直譯語言 - Wikipeida
直譯器 - Wikipedia
編譯器 - Wikipedia
V8 engine - Wikipedia
JIT Compilation
Stanford.edu
JavaScript Just In Time compilation - StackOverflow
[調酒教學] Mojito 莫希托 -清涼系飲品的不敗經典 - 認真找了 Mojito 的比例來舉例,是不是該試試
A crash course in just-in-time (JIT) compilers - 另外推薦這篇文章,以電影 Arrival 異星入境  與外星人溝通的過程來解釋直譯器與編譯器,還附有手繪圖,也是超級可愛又好懂哦!


上一篇
D7 - 你不知道Combo: 第二主菜 Execution Context
下一篇
D9 - 酸 V 啊酸 V8 引擎
系列文
舌尖上的JS30
0
MJ
iT邦新手 5 級 ‧ 2021-09-23 12:37:50

豪想喝Sherry姊姊做的Mojito/images/emoticon/emoticon07.gif

Hooo iT邦新手 5 級 ‧ 2021-09-23 15:44:56 檢舉

完賽那天來喝~~

1
Chiahsuan
iT邦新手 4 級 ‧ 2021-09-23 12:39:21

比喻超棒~~~最喜歡用生活化比喻理解專業術語了/images/emoticon/emoticon32.gif

Hooo iT邦新手 5 級 ‧ 2021-09-23 15:45:51 檢舉

推推繼續看用異星入境比喻那篇文,也棒棒

0
南國ㄟ安迪
iT邦新手 5 級 ‧ 2021-09-23 19:27:58

安安,想來份老闆娘特調
/images/emoticon/emoticon31.gif

Hooo iT邦新手 5 級 ‧ 2021-09-28 10:35:47 檢舉

等你追到JS小姊姊再說

0
wendy
iT邦新手 4 級 ‧ 2021-09-23 21:46:05

不愧是你!!

Hooo iT邦新手 5 級 ‧ 2021-09-28 10:36:08 檢舉

不愧是 Wendy!

我要留言

立即登入留言