es6模組輸出的值是拷貝的嗎

不是，ES6模組輸出的是值的參照，CommonJS模組輸出的才是一個值的拷貝。在ES6模組中，JS引擎對指令碼靜態分析的時候，遇到模組載入命令import，就會生成一個唯讀參照；等到指令碼真正執行時，再根據這個唯讀參照，到被載入的那個模組裡面去取值。ES6模組是動態參照，ES6模組不會快取執行結果，而是動態地去被載入的模組取值，並且變數總是繫結其所在的模組。

前端（vue）入門到精通課程：進入學習
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API偵錯工具：

本教學操作環境：windows7系統、ECMAScript 6版、Dell G3電腦。

瀏覽器載入

預設情況下，瀏覽器是同步載入 JavaScript 指令碼的，即渲染引擎遇到<script>標籤就會停下來，等到執行完指令碼，再繼續向下渲染。

如果是外部指令碼，還必須加入指令碼下載的時間。

如果指令碼體積很大，下載和執行的時間就會很長，因此造成瀏覽器堵塞，使用者會感覺到瀏覽器「卡死」了，沒有任何響應。這顯然是很不好的體驗，所以瀏覽器允許指令碼非同步載入，下面就是兩種非同步載入的語法。

<script src="path/to/myModule.js" defer></script>
<script src="path/to/myModule.js" async></script>

<script>標籤開啟defer或async屬性，指令碼就會非同步載入。渲染引擎遇到這一行命令，就會開始下載外部指令碼，但不會等它下載和執行，而是直接執行後面的命令。

• defer要等到整個頁面在記憶體中正常渲染結束（DOM 結構完全生成，以及其他指令碼執行完成），才會執行；
• async一旦下載完，渲染引擎就會中斷渲染，執行這個指令碼以後，再繼續渲染。

一句話，defer是「渲染完再執行」，async是「下載完就執行」。另外，如果有多個defer指令碼，會按照它們在頁面出現的順序載入，而多個async指令碼是不能保證載入順序的。

瀏覽器載入 ES6 模組，也使用<script>標籤，但是要加入type="module"屬性。瀏覽器對於帶有type="module"的<script>，都是非同步載入，不會造成堵塞瀏覽器，即等到整個頁面渲染完，再執行模組指令碼，等同於開啟了

<script type="module" src="./foo.js"></script>

如果網頁有多個<script type="module">，它們會按照在頁面出現的順序依次執行。

注意：<script>標籤的async屬性也可以開啟，這時只要載入完成，渲染引擎就會中斷渲染立即執行。執行完成後，再恢復渲染。一旦使用了async屬性，<script type="module">就不會按照在頁面出現的順序執行，而是隻要該模組載入完成，就執行該模組。

對於外部的模組指令碼（上例是foo.js），有幾點需要注意:

• 程式碼是在模組作用域之中執行，而不是在全域性作用域執行。模組內部的頂層變數，外部不可見。
• 模組指令碼自動採用嚴格模式，不管有沒有宣告use strict。
• 模組之中，可以使用import命令載入其他模組（.js字尾不可省略，需要提供絕對 URL 或相對 URL），也可以使用export命令輸出對外介面。
• 模組之中，頂層的this關鍵字返回undefined，而不是指向window。也就是說，在模組頂層使用this關鍵字，是無意義的。
• 同一個模組如果載入多次，將只執行一次。

ES6 模組也允許內嵌在網頁中，語法行為與載入外部指令碼完全一致。

<script type="module">
  import utils from "./utils.js";
  // other code
</script>

ES6 模組與 CommonJS 模組的差異

CommonJS 是同步載入模組，ES6是非同步載入模組

CommonJS規範載入模組是同步的，也就是說，只有載入完成，才能執行後面的操作。由於Node.js主要用於伺服器程式設計，模組檔案一般都已經存在於本地硬碟，所以載入起來比較快，不用考慮非同步載入的方式，所以CommonJS規範比較適用。

但是，如果是瀏覽器環境，要從伺服器端載入模組，這時就必須採用非同步模式。

瀏覽器載入 ES6 模組是非同步載入，不會造成堵塞瀏覽器，即等到整個頁面渲染完，再執行模組指令碼

CommonJS 模組輸出的是一個值的拷貝，ES6 模組輸出的是值的參照。

CommonJS 模組輸出的是值的拷貝，也就是說，一旦輸出一個值，模組內部的變化就影響不到這個值

ES6 模組的執行機制與 CommonJS 不一樣。JS 引擎對指令碼靜態分析的時候，遇到模組載入命令import，就會生成一個唯讀參照。等到指令碼真正執行時，再根據這個唯讀參照，到被載入的那個模組裡面去取值。

換句話說，ES6 的import有點像 Unix 系統的「符號連線」，原始值變了，import載入的值也會跟著變。因此，ES6 模組是動態參照，ES6 模組不會快取執行結果，而是動態地去被載入的模組取值，並且變數總是繫結其所在的模組。

由於 ES6 輸入的模組變數，只是一個「符號連線」，所以這個變數是唯讀的，對它進行重新賦值會報錯。上面程式碼中，main.js從lib.js輸入變數obj，可以對obj新增屬性，但是重新賦值就會報錯。因為變數obj指向的地址是唯讀的，不能重新賦值，這就好比main.js創造了一個名為obj的const變數。

// lib.js
export let obj = {};
// main.js
import { obj } from './lib';
obj.prop = 123; // OK
obj = {}; // TypeError

此外，export通過介面，輸出的是同一個值。不同的指令碼載入這個介面，得到的都是同樣的範例。

CommonJS 模組是執行時載入，ES6 模組是編譯時輸出介面。

因為 CommonJS 載入的是一個物件（即module.exports屬性），該物件只有在指令碼執行完才會生成。

而 ES6 模組不是物件，它的對外介面只是一種靜態定義，在程式碼靜態解析階段就會生成。

【相關推薦：、】

以上就是es6模組輸出的值是拷貝的嗎的詳細內容，更多請關注TW511.COM其它相關文章！