首先楣号，JavaScript確實(shí)是一門(mén)編譯型語(yǔ)言，與C等典型編譯型語(yǔ)言相比怒坯，區(qū)別在于JavaScript的編譯過(guò)程（通常）是在實(shí)際執(zhí)行前進(jìn)行的炫狱，而且并不會(huì)產(chǎn)生可移植的編譯結(jié)果。

一剔猿、編譯過(guò)程

通常的編譯過(guò)程：

通常的編譯過(guò)程分為以下三步

1. 分詞與詞法分析：

把輸入的字符串分解為一些對(duì)編程語(yǔ)言有意義的代碼塊（詞法單元）视译。

2. 解析與語(yǔ)法分析：

將上一步的詞法單元集合分析并最終轉(zhuǎn)換為一個(gè)由元素逐級(jí)嵌套所組成的代表了程序語(yǔ)法結(jié)構(gòu)的樹(shù)，稱(chēng)為抽象語(yǔ)法樹(shù)（Abstract Syntax Tree归敬，AST）酷含。

3. 代碼生成：

將上一步的AST轉(zhuǎn)換為可執(zhí)行代碼。

JavaScript的編譯過(guò)程：

JavaScript具體的編譯過(guò)程如下

1. 分詞／詞法分析：

這個(gè)過(guò)程會(huì)將字符串分割為有意義的代碼塊汪茧，這些代碼塊稱(chēng)之為詞法單元椅亚。例如變量的聲明：

var a = 2;

這行代碼會(huì)被分為以下詞法單元：var、a陆爽、=什往、2(空格算不算詞法單元取決于空格對(duì)于該編程語(yǔ)言是否具有意義)；這些零散的詞法單元會(huì)組成一個(gè)詞法單元流（數(shù)組）進(jìn)行解析慌闭。

2. 解析／與法分析：

這個(gè)過(guò)程會(huì)將詞法單元流轉(zhuǎn)換成一棵抽象語(yǔ)法樹(shù)(Abstract Syntax Tree别威，AST）在線(xiàn)解析工具。
"var a = 2;"的詞法單元流就會(huì)被解析為下面的AST：

`var a = 2;`對(duì)應(yīng)的AST

3. 代碼生成：

將AST轉(zhuǎn)化為可執(zhí)行的代碼驴剔。

二省古、JavaScript編譯特點(diǎn)：

JavaScript引擎中的編譯器做的事情與上述類(lèi)似，但是由于編譯就在代碼執(zhí)行前丧失，所以JavaScript編譯執(zhí)行效率就比一般靜態(tài)語(yǔ)言敏感得多豺妓，故而也非常復(fù)雜。
JavaScript引擎在這部分做了許多優(yōu)化：

• 一是對(duì)語(yǔ)法分析和代碼生成階段進(jìn)行優(yōu)化（例如針對(duì)冗余元素進(jìn)行優(yōu)化），目的是提高編譯后的執(zhí)行效率琳拭。
• 二是對(duì)編譯過(guò)程進(jìn)行優(yōu)化（如JIT训堆，延遲編譯或者重編譯），目的是縮短編譯過(guò)程白嘁，保證性能最佳坑鱼。

JavaScript 中的編譯器、引擎和作用域

• 編譯器：負(fù)責(zé)語(yǔ)法分析和代碼生成絮缅。
• 引擎:負(fù)責(zé)整個(gè)過(guò)程中JavaScript的編譯及執(zhí)行過(guò)程鲁沥。瀏覽器不同，其引擎也不同耕魄，比如Chrome采用的是v8画恰，Safari采用的是SquirrelFish Extreme。
• 作用域：負(fù)責(zé)收集并維護(hù)所有的標(biāo)識(shí)符（變量）簡(jiǎn)析JavaScript中的作用域與作用域鏈吸奴。

JavaScript編譯過(guò)程具體分析

1. 一個(gè)具體的例子：

var a = 2;

首先進(jìn)行詞法分析允扇，然后將詞法單元流交給編譯器生成AST，再有編譯器生成可執(zhí)行的代碼奄抽。

1. 編譯器遇到 var a;蔼两，編譯器詢(xún)問(wèn)：同一作用域集存在同名變量 ? 忽略該聲明，繼續(xù)編譯 : 要求作用域在當(dāng)前作用域的集合生命一個(gè)名為a的新變量逞度。

2. 編譯器會(huì)為引擎的運(yùn)行生成一系列代碼，這些代碼用于為變量a進(jìn)行賦值操作妙啃。引擎會(huì)詢(xún)問(wèn)：當(dāng)前作用域存在這個(gè)變量 ? 進(jìn)行賦值操作 : 查找這個(gè)變量（從當(dāng)前作用域向上查找档泽，直到全局作用域，如果還是沒(méi)有揖赴，就會(huì)拋出一個(gè)異常)馆匿。

3. LHS和RHS,當(dāng)引擎執(zhí)行編譯器給的代碼（賦值操作）時(shí),會(huì)通過(guò)查找這個(gè)變量來(lái)判斷這個(gè)變量是否已經(jīng)聲明，這個(gè)過(guò)程需要作用域的協(xié)助燥滑，而查找的方式分為兩種：LHS(“賦值操作的目標(biāo)是誰(shuí)”)和RHS(”誰(shuí)是賦值操作的源頭“）渐北。

   • LHS：賦值操作的左側(cè)，試圖查找到變量的容器本身铭拧，從而可以對(duì)其賦值赃蛛，即找到復(fù)制操作的目標(biāo)。

   • RHS：另外一種查找搀菩，可以簡(jiǎn)單理解為復(fù)制操作的右側(cè)呕臂，其查找目標(biāo)為取到目標(biāo)的源值，即找到這個(gè)變量具體的值而非容器肪跋。
     LHS與RHS舉例：

     var a;  //RHS引用
     a = 2;  //LHS引用
     alert(a);  //RHS引用
     /** 這段代碼塊既有RHS引用也有LHS引用歧蒋，
       * 2被當(dāng)作函數(shù)參數(shù)傳遞給foo()時(shí)，
       * 2會(huì)被分配給變量a(a = 2);
       */
     function foo(a){
       alert(a);
     }
     foo(2);
     

   區(qū)分RHS和LHS也很重要，尤其分析異常時(shí)谜洽。例如下面：

    function foo(a){
      alert(a + b); 
      b = a;
    }
    foo(2);
   

   第一次對(duì)b進(jìn)行RHS查詢(xún)會(huì)查詢(xún)不到這個(gè)變量萝映，因?yàn)樗且粋€(gè)未聲明的變量，在所有作用域都無(wú)法找到var b;;此時(shí)引擎會(huì)拋出一個(gè)異常（ReferenceError)阐虚。在非嚴(yán)格模式下序臂，當(dāng)引擎進(jìn)行LHS查詢(xún)查詢(xún)不到某個(gè)變量時(shí)，全局作用域會(huì)創(chuàng)建一個(gè)同名的變量交給引擎敌呈，當(dāng)然這個(gè)變量具有全局作用域;而在嚴(yán)格模式下贸宏，引擎會(huì)拋出ReferenceError異常】暮椋總結(jié)一下就是：

   • RHS未找到：引擎會(huì)拋出錯(cuò)誤RefrenceError吭练。
   • LHS未找到：引擎（或引擎中的編譯器）會(huì)幫你在頂層作用域聲明一個(gè)具有該名稱(chēng)的變量。（嚴(yán)格模式除外）析显。

   舉個(gè)例子：

   var a;//LHS 尋找a,未找到鲫咽，通知作用域聲明一個(gè)新變量，命名為a
   a=2;//LHS 找到a并給其賦值2
   console.log(a);//RHS找到a的值2谷异，并將其輸出
   

2. 關(guān)于詞法作用域：

JavaScript其根據(jù)一套規(guī)則來(lái)管理變量的查找與引用分尸，詞法作用域就是其使用的規(guī)則，在編譯器進(jìn)行詞法化時(shí)歹嘹，會(huì)根據(jù)你寫(xiě)代碼時(shí)將變量和塊作用域?qū)懺谀睦锫嵘埽瑏?lái)決定規(guī)則的內(nèi)容。這其中又包含了塊作用域這個(gè)概念尺上，不展開(kāi)講材蛛，只要記住ES6之前沒(méi)有塊作用域，只有函數(shù)有作用域怎抛，即：函數(shù)內(nèi)部是一個(gè)獨(dú)立的塊作用域卑吭。(有個(gè)特例：catch語(yǔ)句塊內(nèi)也是獨(dú)立的作用域。)

3. 關(guān)于變量提升：

明白了編譯器和引擎執(zhí)行之間的分工马绝，其實(shí)你應(yīng)該就不會(huì)覺(jué)得變量提升是如此之詭異了豆赏，因?yàn)橐婺玫酱a的時(shí)候，編譯器已經(jīng)做了一些轉(zhuǎn)換富稻，編譯器干嘛要干這個(gè)事情掷邦？因?yàn)樗诘谝徊骄驼业剿械穆暶鳎⑶矣煤线m的作用域?qū)⑺麄冴P(guān)聯(lián)起來(lái)唉窃，這也正是詞法作用域的核心耙饰。表現(xiàn)為： 包括變量和函數(shù)在內(nèi)的所有聲明都會(huì)在當(dāng)前塊作用域內(nèi)被首先處理，即類(lèi)似于提升到最前面聲明纹份，但是復(fù)制處理操作因?yàn)槭窃趫?zhí)行階段苟跪，因此編譯階段他們?cè)卮却龍?zhí)行廷痘。

• 變量和函數(shù)在內(nèi)的聲明都在任何代碼執(zhí)行前被處理。聲明操作在編譯階段時(shí)進(jìn)行的件已，而賦值操作是在等到執(zhí)行階段才執(zhí)行笋额。

  //代碼塊1
  var a = 2;
  alert(a);  //  輸出2
  //代碼塊2 
  b = 2;
  var b;
  alert(b);  //輸出2
  //代碼塊3
  alert(c);  //輸出undefined
  var c = 2;
  //代碼塊4
  var d;
  alert(d); //輸出undefined
  d = 2;
  

  代碼塊2，4等價(jià)于代碼塊1篷扩，3（除了變量名不同兄猩，內(nèi)存地址不同）；這個(gè)過(guò)程就好像變量和函數(shù)聲明的代碼被移動(dòng)到了最上面鉴未，這個(gè)過(guò)程就叫提升枢冤。

• 函數(shù)聲明可以提升，函數(shù)表達(dá)式不能提升铜秆。

  //函數(shù)聲明可以提升
  foo();  // 輸出2淹真；
  function foo(){
    alert(2); 
  }
  //函數(shù)表達(dá)式不可提升
  bar();  // TypeError
  var bar = function f1(){
    alert(2);
  }
  

• 函數(shù)聲明優(yōu)先于變量聲明提升,出現(xiàn)在后面的函數(shù)聲明可以覆蓋之前的聲明。

  foo();  // 輸出3
  function foo(){
    alert(1);
  }
  var foo = function bar(){
    alert(2);
  }
  function foo(){
    alert(3);
  }
  

三连茧、三兄弟合作

第一版

下面我們以一個(gè)最簡(jiǎn)單的例子var a = 2;來(lái)進(jìn)行分析：

1. 編譯器出馬核蘸，先進(jìn)行詞法分析，將該賦值操作拆分：var a;/a=2;啸驯。第一步 var a客扎，編譯器可以處理，他會(huì)先詢(xún)問(wèn)變量管家——作用域：存在一個(gè)該名稱(chēng)的變量 ? 繼續(xù)編譯 : 通知作用域聲明一個(gè)新變量罚斗，命名為a徙鱼。
2. 編譯器繼續(xù)為引擎進(jìn)行代碼生成，這些代碼主要用來(lái)處理a=2這個(gè)賦值操作针姿。
3. 引擎拿到可執(zhí)行代碼疆偿，然后詢(xún)問(wèn)作用域：當(dāng)前有一個(gè)叫a的變量嗎 ? 使用這個(gè)變量，賦值給他 : 繼續(xù)往上級(jí)作用域查找搓幌。如果到根作用域仍然找不到，引擎直接報(bào)錯(cuò)拋異常迅箩。

第二版

有了上面的基礎(chǔ)知識(shí)溉愁，我們把三兄弟的合作再細(xì)化一下，例子也升級(jí)一下饲趋，用上面賦值并輸出的例子拐揭。

1. 編譯器：作用域，我需要對(duì)a進(jìn)行LHS查找奕塑，你見(jiàn)過(guò)么堂污？
2. 作用域：我這找到根都沒(méi)看到啊，要不咱聲明一個(gè)吧龄砰！
3. 編譯器：好盟猖，建好了讨衣，那我生成代碼了，引擎式镐，給你你要的代碼反镇。
4. 引擎：收到，咦娘汞，需要一個(gè)a啊歹茶，作用域，幫我LHS找一下有沒(méi)有你弦？
5. 作用域： 找到了惊豺，編譯器已經(jīng)幫忙聲明了。
6. 引擎：好的禽作，那我對(duì)它賦值尸昧。
7. 引擎：作用域，不要意思领迈，我碰到一個(gè)console彻磁，需要RHS引用。
8. 作用域： 找到了狸捅，是個(gè)內(nèi)置對(duì)象衷蜓，拿走不謝。
9. 引擎： 好的作用域尘喝，對(duì)了能在幫我確認(rèn)一下a的RHS么磁浇？
10. 作用域：確認(rèn)好了，沒(méi)變朽褪，拿去用吧置吓，他的值是2
11. 引擎：好咧，我把2傳遞給log(..)

四缔赠、關(guān)于JavaScript引擎

講講虛擬機(jī)與引擎

1. 虛擬機(jī)是什么衍锚？

JavaScript通常被稱(chēng)為虛擬機(jī)。虛擬機(jī)是指在既定的計(jì)算機(jī)系統(tǒng)中運(yùn)用軟件模擬的具有完整硬件系統(tǒng)功能的計(jì)算機(jī)系統(tǒng)嗤堰。根據(jù)虛擬機(jī)的模擬以及代替現(xiàn)實(shí)計(jì)算機(jī)的精確度戴质，它們被分為了很多種類(lèi)型。其中流程虛擬機(jī)的功能性較低踢匣，只能運(yùn)行一道程序或流程告匠。比如，Wine就是一種可以讓你在Linux計(jì)算機(jī)上運(yùn)行Windows運(yùn)用程序的流程虛擬機(jī)离唬，但它并不能提供一套完整的Windows操作系統(tǒng)后专。
JavaScript引擎是一種為解釋和執(zhí)行JavaScript代碼而專(zhuān)門(mén)設(shè)計(jì)的流程虛擬機(jī)。
注解：將通過(guò)布局網(wǎng)頁(yè)使瀏覽器運(yùn)行的布局引擎和解釋?zhuān)瑘?zhí)行代碼的較低水平的JavaScript引擎作對(duì)比是相當(dāng)重要的输莺。以下是一些比較到位的闡述戚哎。

2. JavaScript引擎完成了什么事裸诽？

JavaScript的基本工作就是將開(kāi)發(fā)者寫(xiě)的JavaScript代碼轉(zhuǎn)換成能被瀏覽器理解甚至能在應(yīng)用程序上運(yùn)用的最優(yōu)化的快捷代碼。事實(shí)上建瘫，JavaScriptCore稱(chēng)自己是優(yōu)化的虛擬機(jī)崭捍。
更確切地說(shuō)，每一個(gè) JavaScript 引擎都實(shí)現(xiàn)了ECMAScript的一種版本啰脚，而JavaScript 是它的一種方言叫法殷蛇。JavaScript引擎會(huì)隨著ECMAScript的發(fā)展而進(jìn)步，因?yàn)槿绱硕嗖煌囊娑家c不同的瀏覽器一起運(yùn)作橄浓，如headless browser（如PhantomJS）, 或者像Node.js這樣的執(zhí)行環(huán)境粒梦。
通過(guò)以上對(duì)虛擬機(jī)的定義，將JavaScript引擎稱(chēng)為流程虛擬機(jī)也就是理所當(dāng)然的了荸实。因?yàn)樗ㄒ坏哪康木褪且x取和編譯JavaScript代碼匀们。然而這并不意味著它只是一種簡(jiǎn)單的引擎。舉個(gè)例子准给，JavaScriptCore有6個(gè)分區(qū)來(lái)分析泄朴、翻譯、優(yōu)化以及垃圾收集JavaScript代碼露氮。

3. JavaScript引擎是如何運(yùn)作的祖灰？

這取決于引擎。WebKit的JavaScriptCore以及谷歌的V8引擎之所以能引起我們的興趣是因?yàn)镹ativeScript對(duì)它們起了杠杠作用畔规。這兩種引擎不同程度地掌握著過(guò)程碼局扶。
JavaScriptCore是通過(guò)一系列的步驟去編譯和優(yōu)化腳本。
它會(huì)對(duì)詞匯進(jìn)行分析叁扫，將其分解成一系列的記號(hào)三妈，或附上某些既定的意義。這些記號(hào)之后會(huì)被分析程序理出句法莫绣，并嵌入句法樹(shù)畴蒲。之后4個(gè)JIT（及時(shí)）程序開(kāi)始運(yùn)行、分析和執(zhí)行那些分析程序產(chǎn)生的字節(jié)碼对室。
簡(jiǎn)單講饿凛，JavaScript引擎將你的源代碼分解成串（又叫做分詞），再將那些串轉(zhuǎn)換成為編譯器能夠理解的字節(jié)碼软驰，然后將其執(zhí)行。
用C++編寫(xiě)的谷歌的V8引擎也能編譯和解釋JavaScript源代碼心肪，掌握內(nèi)存記憶配置且可垃圾回收殘留物锭亏。
它由2個(gè)能夠?qū)⒃创a直接轉(zhuǎn)換成計(jì)算機(jī)代碼的編譯器組成。

• Full-codegen：輸出非優(yōu)化代碼的快速編譯器硬鞍。
• Crankshaft：輸出快速慧瘤，優(yōu)化代碼的慢速編譯器戴已。

如果Crankshaft認(rèn)為由Full-codegen產(chǎn)生的不夠優(yōu)化的代碼需要優(yōu)化，它將會(huì)取而代之锅减，這就是“crankshafting”流程糖儡。
有趣的事實(shí)：”機(jī)軸“是運(yùn)用在自動(dòng)化產(chǎn)業(yè)中內(nèi)部氧化引擎里的一個(gè)完整的部分。這種眾所周知的引擎在更高級(jí)的載體也就是V8中有所運(yùn)用怔匣。
若計(jì)算機(jī)代碼是由編譯過(guò)程產(chǎn)生的握联，那么這個(gè)引擎就會(huì)在瀏覽器中顯示出所有的ECMA標(biāo)準(zhǔn)規(guī)定的數(shù)據(jù)類(lèi)型、操作員每瞒、客體和功能金闽，或者任何需要用到它們的運(yùn)行環(huán)境，如NativeScript.

4. JavaScript引擎有哪些剿骨？

在編譯器中代芜，差不多有37%是由市場(chǎng)因素組成的，品牌重塑是你在編輯器上可以做的不多的事情之一浓利，因此引擎被賦予了迎合市場(chǎng)的名字：SquirrelFish, Nitro, SFX…
在市場(chǎng)因素對(duì)為引擎進(jìn)行命名以及重命名有著重要影響的情況下挤庇，對(duì)JavaScript引擎發(fā)展史上的重大事件做記錄是很有必要的。

* JavaScriptCore被重寫(xiě)為SquirrelFish贷掖，也被重塑成SquirrelFishExtreme品牌嫡秕，又叫做Nitro。然而羽资，在WebKit安裝啟用下的JavaScript的確也被稱(chēng)為JavaScript引擎（如Safari）淘菩。
** iOS開(kāi)發(fā)者應(yīng)該認(rèn)識(shí)到Mobile Safari包含Nitro，但UIWebView并不包括JIT編譯器屠升，所以這個(gè)過(guò)程會(huì)比較慢潮改。然而，有了iOS8系統(tǒng)腹暖，開(kāi)發(fā)者可以運(yùn)用包含Nitro的WKWebView來(lái)大幅度加速這個(gè)運(yùn)行速度汇在。Hybrid App的開(kāi)發(fā)者應(yīng)該會(huì)覺(jué)得比較輕松。
*** 之所以有做出將io.js從Node.js中分離出來(lái)的一個(gè)因素是和可以支持這個(gè)項(xiàng)目的V8版本有關(guān)脏答。這將會(huì)是一個(gè)挑戰(zhàn)糕殉，就像這邊所列出來(lái)的一樣。

五殖告、關(guān)于作用域

作用域范圍

傳統(tǒng)的類(lèi)C的語(yǔ)言作用域是塊級(jí)作用域block-level scope阿蝶，一個(gè)花括號(hào)就是一個(gè)作用域，而對(duì)于JavaScript來(lái)講黄绩，作用域是函數(shù)級(jí)的function-level scop羡洁。JavaScript語(yǔ)言的作用域僅存在于函數(shù)范圍中。

• 全局作用域

  在JavaScript代碼中的任何地方都有定義的變量被稱(chēng)為全局變量爽丹，其也擁有全局作用域筑煮。一般來(lái)說(shuō)辛蚊，不在任何函數(shù)體內(nèi)定義的變量以及未定義就直接賦值的變量擁有全局作用域。事實(shí)上真仲，JavaScript默認(rèn)擁有一個(gè)全局對(duì)象window袋马，聲明一個(gè)全局變量，就是為window對(duì)象的同名屬性賦值秸应。如下面代碼所示虑凛。

  function fun1(){ }
  var a = 1;
  console.log(window.a);//1
  console.log(window.fun1); // function fun1(){}
  

• 函數(shù)級(jí)作用域

  在JavaScript中，任何定義在函數(shù)體內(nèi)的變量或者函數(shù)都將處于函數(shù)作用域中灸眼，這些變量也無(wú)法被在函數(shù)外部使用卧檐。函數(shù)內(nèi)部聲明的所有變量在函數(shù)體內(nèi)始終是可見(jiàn)的，在JavaScript函數(shù)定義中焰宣，JavaScript在預(yù)編譯階段中會(huì)先掃描整個(gè)函數(shù)體的語(yǔ)句霉囚，將所有聲明的變量“提升”到函數(shù)頂部。

  function test(o) {
    var i = 0; //  i在整個(gè)函數(shù)體內(nèi)均是有定義的
    console.log(j); //j在里面有定義匕积，但是沒(méi)有賦值
    console.log(k); //k在里面有定義盈罐，但是沒(méi)有賦值。
    if (typeof o == "object") {
      var j = 0;
      for (var k = 0; k < 10; k++) {
        console.log(k);
      }
      console.log(k); // 輸出10;
    };
    console.log(j); //若o為對(duì)象類(lèi)型闪唆，則為0盅粪；否則為undefined
  };
  

  當(dāng)函數(shù)體內(nèi)局部變量和函數(shù)體外的變量重名的話(huà)，內(nèi)部局部變量將會(huì)遮蓋同名的全局變量悄蕾。

  var scope = "global";
  
  function f() {
    console.log(scope); //undefined
    var scope = "local";
    console.log(scope); //local;
  }
  //如前面所說(shuō)的票顾，“變量提升”，所有的變量將會(huì)預(yù)先編譯帆调，且賦值為undefined奠骄。
  

  JavaScript函數(shù)內(nèi)的嵌套函數(shù)可以訪(fǎng)問(wèn)外層函數(shù)的變量，但是外層函數(shù)訪(fǎng)問(wèn)不了嵌套函數(shù)的變量番刊。

  var a = 1;
  
  function fun4() {
    var b = 1;
    console.log(a);
    console.log(c); //報(bào)錯(cuò) 
    function fun5() {
      console.log(a); //1
      console.log(b); //1
      var c = 3;
    }
  }
  fun4();
  

  事實(shí)上含鳞，無(wú)論是函數(shù)作用域中的覆蓋問(wèn)題還是變量的訪(fǎng)問(wèn)權(quán)限，起作用的是作用域鏈芹务。

作用域鏈

在JavaScript的全局變量和函數(shù)中都有一個(gè)與之關(guān)聯(lián)的作用域鏈蝉绷，這個(gè)作用域鏈?zhǔn)且粋€(gè)對(duì)象列表或是鏈表，其中定義了變量或函數(shù)的作用域中的變量枣抱，并且作用域鏈的作用就是用來(lái)解析標(biāo)識(shí)符熔吗。在ECMA-262標(biāo)準(zhǔn)第三版中，[[scope]]這個(gè)內(nèi)部屬性包含了該鏈表佳晶，其決定了變量的訪(fǎng)問(wèn)權(quán)限磁滚。先創(chuàng)建一個(gè)全局函數(shù)：

function add(a,b){
  var sum = a + b;
  return sum;
}

全局函數(shù)sum()創(chuàng)建的時(shí)候，實(shí)際上其只保存一個(gè)作用域鏈，其作用域鏈會(huì)插入一個(gè)Global object（全局對(duì)象）垂攘，該全局對(duì)象擁有所有的全局變量和函數(shù)，包括window,document,sum()等等：

函數(shù)創(chuàng)建時(shí)的作用域鏈

執(zhí)行的時(shí)候淤刃，每個(gè)執(zhí)行上下文都有自己的作用域鏈晒他，當(dāng)執(zhí)行上下文被創(chuàng)建的時(shí)候，作用域鏈會(huì)被初始化為當(dāng)前運(yùn)行函數(shù)的[[scope]]屬性中的對(duì)象逸贾。這些值會(huì)按照出現(xiàn)在函數(shù)的順序被復(fù)制到執(zhí)行上下文的作用域鏈上陨仅，該過(guò)程一旦完成，一個(gè)被稱(chēng)之為活動(dòng)對(duì)象的新對(duì)象就為執(zhí)行上下文創(chuàng)建好了铝侵∽粕耍活動(dòng)對(duì)象作用函數(shù)運(yùn)行時(shí)的變量對(duì)象，包含了所有的局部變量咪鲜，命名函數(shù)狐赡，參數(shù)集合以及this。然后該對(duì)象被推入作用域鏈的最前端疟丙。

所以當(dāng)sum函數(shù)執(zhí)行的時(shí)候颖侄，即var total = sum(5,10)的時(shí)候，其全新的作用域鏈將如下圖所示：

函數(shù)add執(zhí)行時(shí)的作用域鏈

對(duì)于嵌套函數(shù)而言享郊，其作用域鏈上至少有三個(gè)對(duì)象览祖，一個(gè)為嵌套函數(shù)的調(diào)用對(duì)象，一個(gè)為外部函數(shù)的調(diào)用對(duì)象炊琉，還有一個(gè)為全局對(duì)象展蒂。同時(shí)由于每次執(zhí)行函數(shù)時(shí)，其執(zhí)行上下文都是獨(dú)一無(wú)二的苔咪，所以在每次調(diào)用外部函數(shù)的時(shí)候锰悼，嵌套函數(shù)的作用域鏈也是不同的。

同時(shí)在函數(shù)執(zhí)行的時(shí)候悼泌，每次遇到變量松捉，其都會(huì)進(jìn)行標(biāo)識(shí)符的解析以此來(lái)決定從哪里獲取或存儲(chǔ)數(shù)據(jù)。在這個(gè)過(guò)程中馆里，其會(huì)首先搜索執(zhí)行上下文的作用域鏈隘世，從作用域鏈的頭部開(kāi)始，再到作用域鏈的底部結(jié)束鸠踪。如果在這個(gè)過(guò)程中找到了變量丙者，則使用該變量；如果沒(méi)有找到营密，則會(huì)拋出異常械媒；如果有同名的變量存在作用域鏈不同的位置，那以先獲取到的變量為準(zhǔn)。

作用域提升

• 變量提升

  對(duì)JavaScript解釋器而言纷捞，所有的函數(shù)和變量聲明都會(huì)被提升到最前面, 并且變量聲明永遠(yuǎn)在前面痢虹，賦值在聲明過(guò)程之后。比如:

  var x = 10;
  function x(){};
  console.log(x); // 10
  

  實(shí)際上被解釋為:

  var x;
  function x(){};
  x = 10;
  console.log(x); // 10主儡、
  

• 函數(shù)提升

  函數(shù)的聲明方式主要由兩種：聲明式和變量式奖唯。聲明式會(huì)自動(dòng)將聲明放在前面，并且執(zhí)行賦值過(guò)程糜值。而變量式則是先將聲明提升丰捷，然后到賦值處再執(zhí)行賦值。比如:

  function test() {
    foo(); // TypeError "foo is not a function"
    bar(); // "this will run!"
    var foo = function () { // function expression assigned to local variable 'foo'
      alert("this won't run!");
    }
    function bar() { // function declaration, given the name 'bar'
      alert("this will run!");
    }
  }
  test();
  

  實(shí)際上等價(jià)于:

  function test() {
    var foo;
    var bar;
    bar = function () { // function declaration, given the name 'bar'
      alert("this will run!");
    }
    foo(); // TypeError "foo is not a function"
    bar(); // "this will run!"
    foo = function () { // function expression assigned to local variable 'foo'
      alert("this won't run!");
    }
  }
  test();
  

  主要注意的地方：帶有命名的函數(shù)變量式聲明寂汇，是不會(huì)提升到作用域范圍內(nèi)的病往，比如:

  var baz = function spam() {};
  baz(); // vaild
  spam(); // ReferenceError "spam is not defined"
  

參考資料：

• 簡(jiǎn)析JavaScript中的編譯原理和提升
• 聊聊JavaScript 編譯器，引擎骄瓣，作用域
• JavaScript引擎——小白使用指南
• javaScript基礎(chǔ)詳解-作用域
• JavaScript作用域解析