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

不是，ES6模組輸出的是值的引用，CommonJS模組輸出的才是一個值的拷貝。在ES6模組中，JS引擎對腳本靜態分析的時候，遇到模組載入指令import，就會產生一個只讀引用；等到腳本真正執行時，再根據這個只讀引用，到被載入的那個模組裡面去取值。 ES6模組是動態引用，ES6模組不會快取運行結果，而是動態地去被載入的模組取值，變數總是綁定其所在的模組。

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

瀏覽器載入

預設情況下，瀏覽器是同步載入JavaScript 腳本的，也就是渲染引擎遇到3f1c4e4b6b16bbbd69b2ee476dc4f83a標籤就會停下來，等到執行完腳本，再繼續向下渲染。

如果是外部腳本，也必須加入腳本下載的時間。

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

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

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

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

一句話，defer是“渲染完再執行”，async是“下載完就執行”。另外，如果有多個defer腳本，會按照它們在頁面出現的順序加載，而多個async腳本是不能保證加載順序的。

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

a907279e6cf2b736e22e16a7121cae332cacc6d41bbb37262a98f745aa00fbf0

如果網頁有多個e91f03099790807ac093726dd6cff003，它們會依照在頁面出現的順序依序執行。

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

對於外部的模組腳本（上例是foo.js），有幾點要注意:

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

---

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

3acaf50c6526a47d62726f112635bc51
  import utils from "./utils.js";
  // other code
2cacc6d41bbb37262a98f745aa00fbf0

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 模块不是对象，它的对外接口只是一种静态定义，在代码静态解析阶段就会生成。

【相关推荐：javascript视频教程、编程视频】

以上是es6模組輸出的值是拷貝的嗎的詳細內容。更多資訊請關注PHP中文網其他相關文章！