深入理解ES6中的导入与导出

1. 写在前面

常见的ES6导入与导出用到export和import关键字以及多种多样的方式，本文以export{ } 和 import{ }进行举例
补充说明：因为ES6的导入与导出发生在JS引擎对代码操作的解析阶段，也就是下图所示的parse阶段，并没有到涉及到对象代码运行的运行阶段，所以在ES6导入导出的时候，{}表示的并不是一个对象。

2. 解析

ES6中内置一个功能叫模块环境记录，它的作用是实时绑定导出内容，每当导出内容变化，它会删除旧的绑定内容，重新绑定一个新的内容。
foo.js index.js和模块环境中变量的对应关系如上图所示，根据图示，export和import中的变量实际为环境记录模块中的同一个变量，所以当foo.js中导出变量发生变化的时候，环境记录模块会删除旧变量，绑定新变量，index.js中的导入也随之变化。测试如下图所示
foo.js:

let name = 'Bob'
let age = 18
let info = {
    message: 'Hello'
}
setTimeout(() => {
    name = 'Tom'
},1000)
export {
    name,
    age,
    info
}

index.js:

import {name, age, info} from "./module/foo.js";

console.log(name);//Bob
setTimeout(() => {
    console.log(name);//Tom
}, 2000)

既然是同一个变量，这时可能有人就要问了，要是在index.js里修改name，foo.js里会不会有变化？
答案是不会，因为在模块环境变量中实时绑定赋值用的是const，name字符串作为值类型，在const声明后不能被再次修改。
有人可能又要问，那为什么foo.js里可以修改？
答案上面说过了，因为在模块环境变量中实时绑定时，方式是删除旧变量，重新赋值新变量，所以可以。
那如果index.js里修改的是info呢？
答案是可以的，它会引起foo.js里的变化，因为对象是引用类型，模块环境记录里info存储的实际上是一个内存地址，index.js里实际可以通过内存地址找到其中的属性进行修改，又因为index.js里和foo.js里导入和导出的是同一个对象，其中保存的是同一个地址，所以，index.js对info的更改也会反映到foo.js中。
测试代码：
index.js:

import {name, age, info} from "./module/foo.js";


setTimeout(() => {
   info.message = 'change'
}, 1000)

foo.js:

let name = 'Bob'
let age = 18
let info = {
    message: 'Hello'
}
setTimeout(() => {
    console.log(info.message)//change
},2000)
export {
    name,
    age,
    info
}