js模塊間引用的一處疑惑

本人小白，最近在學習 vue-router，看源碼的時候加了些輸出語句如下所示。
index.js 和 install.js 在同一個目錄下，index.js 中引用 install.js。

//index.js
console.log('index line 2');
import { install } from './install'
console.log('index line 4');

//install.js
console.log('install line 3');
//略
console.log('install line 56');

按照我的理解，應該是最先打印index line 2，然后打印install line 3，install line 56，最后打印index line 4。但是在瀏覽器里執(zhí)行，結(jié)果如下所示。搞不懂
圖片描述

回答

編輯回答

薄荷綠

javascript模塊化發(fā)展
這個問題說來話長，完整了解需要從javascript這門語言天生缺少模塊（module）化機制說起。下面長話短說.

最早，在ES6之前，社區(qū)制定了一些模塊加載方案，最主要的有 CommonJS 和 AMD 兩種。
然后ES6 在語言標準的層面上，實現(xiàn)了模塊功能，而且實現(xiàn)得相當簡單，完全可以取代 CommonJS 和 AMD 規(guī)范。

ES6 模塊的設計思想
ES6設計盡量的靜態(tài)化，使得編譯時就能確定模塊的依賴關系，以及輸入和輸出的變量。而CommonJS 和 AMD 模塊，都只能在運行時確定這些東西。比如，CommonJS 模塊就是對象，輸入時必須查找對象屬性，基本上是整體加載一個模塊。
而ES6模塊不是對象，而是通過export命令顯式指定輸出的代碼，再通過import命令輸入，請認真記住并好好理解這句話。
ES6 可以在編譯時就完成模塊加載，也稱為靜態(tài)加載。

import命令提升效果
針對你的疑惑，其實了解一下import的命令機制就好了。
import命令具有提升效果，會提升到整個模塊的頭部，首先執(zhí)行。
比如，下面的寫法并不會報錯，就是因為提升效果