每執行一行JavaScript代碼,你知道除了引擎還有誰參與了嗎？

做爲一名前端開發，天天都會花大量的時間去編寫 JavaScript 代碼。可是你真的知道 JavaScript 是如何執行的嗎？

比起那些編譯過程只有三個步驟的語言的編譯器，JavaScript就要複雜得多。

好比咱們執行程序

var a = 2;
console.log(a);
複製代碼

在執行這兩行命令的過程當中不只僅只有引擎參與，其實也有不少其餘的小夥伴參與了。

1. 編譯器

   負責語法分析及代碼生成。

2. 做用域

   負責收集並維護由全部聲明的標識符組成的一系列查詢，而且實施一套很是嚴格的規則等等。

3. 引擎

   一直參與整個JavaScript程序的編譯及執行過程。

舉個例子

function getName(Name) {
  console.log(Name, age);
}

var name = 'Andy';
var age = 22;
getName(name);
複製代碼

上面的代碼看起來是否是很是簡單，只是簡單的去聲明瞭一個函數，兩個基本類型參數，而後調用了一下這個函數。可是實際上在執行這幾行代碼過程當中既有編譯器的參與也有做用域的限制以及引擎的執行。

如今我根據上面的這個例子，好好的講解一下編譯器、做用域、引擎他們每一個小夥伴作了什麼

1. 首先確定是咱們的編譯器先參與進來，它首先要看看咱們的做用域中有沒有 name、age這些變量，若是有，編譯器會忽視此次聲明，繼續編譯。若是沒有，那麼它會要求咱們的做用域在當前做用域中去聲明他們。
2. 肯定好咱們的變量後，咱們的編譯器小夥伴又要繼續幹活。它要爲" = 'Andy' 、= 22 "等等賦值命令準備所須要的代碼。
3. 第三步就是咱們的引擎上場了，引擎會拿到編譯器已經準備好的代碼，而後去問咱們的做用域，是否是存在一個叫作 name 的變量，若是有，引擎就會使用它，對 name 進行賦值。不然就會繼續查找（這裏的繼續查找就是往上層遍歷，一直到全局做用域爲止），若是找不到，引擎就會拋出異常。

在這裏插入一個小插曲

其實在執行咱們的第三部分的時候，咱們會引入一個 'LHS' 和 'RHS' 的概念。

LHS 的含義是賦值操做的左側，RHS的含義是賦值操做的右側。可是這樣可能很差理解，因此我我的認爲你能夠這樣去理解，LHS就是對變量進行修改賦值操做，RHS就是拿到變量。

咱們仍是拿上面的代碼例子來說解一下 LHS 和 RHS

在上面的例子中，LHS 操做一共有三處（= 'Andy'、= 2二、對形參賦值）; RHS 就比較多了，有var name 、var age、 getName() 、(name)、console 、log、Name 、age；

一門語言每每博大精深，咱們不能只知足於使用它來完成任務，更要去了解清楚計算機每一步作了什麼。一直懷着一顆好奇的心，那麼技術確定會愈來愈好。

PS:你們看了後以爲對本身有幫助能夠三連留言,歡迎提出寶貴意見，也歡迎各位對相關技術有興趣的開發者（由團隊開發人員微信號x118422邀請）入羣，在線解答討論數據可視化、優化圖表性能等方面的技術問題~