es6運行機制借鑑整理

假設咱們有m.js與n.js以下：

// m.js
import {a} from './n';
console.log('3');
console.log(a);
複製代碼

// n.js
console.log('1');
export const a = 'a';
console.log('2');
複製代碼

輸出結果：

->1
->2
->3
->a
複製代碼

接下來吧conlole.log(a)去掉後再次看一下輸出結果：

->1
->2
->3
複製代碼

思考：爲何會出現這種狀況呢？

在阮一峯老師的《ECMAScript 6 入門》裏講到：ES6模塊的運行機制與CommonJS不同，它遇到模塊加載命令import時，不會去執行模塊，而是隻生成一個動態的只讀引用。等到真的須要用到時，再到模塊裏面去取值，換句話說，ES6的輸入有點像Unix系統的「符號鏈接」，原始值變了，import輸入的值也會跟着變。

但是按照上面說的，那有console.log(a)的時候，應該是輸出3,1,2的順序，而不是1,2,3的順序呀。我猜想是上面講的不細緻的緣由，應該分爲編譯時和運行時來講。ES6的這種加載稱爲編譯時加載或者靜態加載，即 ES6 能夠在編譯時就完成模塊加載，在編譯的時候，發現了後面有使用到a的地方，就在運行時遇到import的地方直接執行了模塊的代碼。