討論 JS 的 import 工作機制，多次 import 是否會產生同名不同實例？是否和 Python 一致

這個問題在群里討論過是沒有太大問題的，放個截圖。

親自測試的結果如下，大致對 JS 的 import 有些准確的認識了，可以放心在項目中使用拉！

代碼樣本如下：

• c.js

var c = {}

// module.exports = { c : c }

export default c

• a.js

import c from "./c"

c[2] = 2

// console.log(c)

module.exports = { c: c }

• b.js

import c from "./c"

c[1] = 1

// console.log(c)

module.exports = { c: c }

最后 index.js 調用情況如下

import * as a from './a';

console.log(a.c)

import * as b from './b';

console.log(b.c)

a.c[3] = 3

console.log(b.c)

import * as c from './c';

console.log(c)

運行結果有：

[nodemon] restarting due to changes...
[nodemon] starting `babel-node app.js --presets es2015,stage-2`
{ '1': 1, '2': 2 }
{ '1': 1, '2': 2 }
{ '1': 1, '2': 2, '3': 3 }
{ default: { '1': 1, '2': 2, '3': 3 } }

看得懂的就懂，看不懂就算了，描述一下結論就是。

• module.exports 和 export default 不同的地方在於前者會將對象包裝到對象中，嵌套生成對外的變量 { default: { '1': 1, '2': 2, '3': 3 } }，所以我的 c 沒有使用 module.exports。

• 在 a.js 和 b.js 時調用的 c 的對象變量均為同一個變量，說明是指針引用關系，而非單純淺拷貝。

• 這樣就可以放心的在不同頁面中大膽的互相引用了。

還有一個疑問就是是否會重新執行全局語句，實際驗證的情況來看，是和 Python 的 import 機制一樣的。

當我改 a.js 為如下代碼的時候，並重新 import 了一遍 a 。

import c from "./c"

console.log('a.js', c)

if (c[1] != undefined) {
    c[1] += 1
} else {
    c[1] = 1
}

// console.log(c)

module.exports = { c: c }

在 index.js 中的最后再次 import a.js 了

import * as d from './a';

console.log(d.c)

實測后，並沒有重新執行一遍全局語句，而是單純的提供了變量的引用。

那么，如果想讓它重新執行又該怎么做呢？

暫時還不知道，但根據 Python 的設計理念來看，重新 import 得清理 global 的變量重新 import 才會導入。

測試完畢，可以放心 import 了。