import default究竟引入的是什么？

我们都知道，在ECMAScript模块中，我们可以通过export和import进行模块化。

基本用法：

export模块：使用export const func=()=>{}
import模块：使用import {fun} from './myModule'

export

export 主要有三种用法：

分别暴露：

ini 复制代码

export let a=1;
export let b=2;

统一暴露：

ini 复制代码

let a=1;
let b=2;
export {a,b}

默认暴露：

arduino 复制代码

export default {
  a:1,
  b:2
}

而引入也有三种，部分可以混合使用：

javascript 复制代码

import * as m1 from './src/js/main.js'  //通用引入
import {a as A,b as B} from './src/js/main.js'		//解构赋值
import m1 from '...'	//默认导入

import 的是什么

export 从模块中导出函数、对象和原始值，而其他程序可以通过 import 语句使用它们。

在我们 import 引入的时候，其实获取的是一个文件对象：

javascript 复制代码

let data = {
  name: "fat",
  age: 18,
};
export {data}
//引入
import * as f from "./xxx.js";
console.log(f)

我们可以看到控制台打印：

是一个 Module 对象，包含属性 data

也就是当我们 import 的时候，获取的是这个文件对象。

当我们什么都不暴露的时候：

javascript 复制代码

没在文件中写入export之后引入
//引入
import * as f from "./xxx.js";
console.log(f)

可以看到是一个空对象，也就是默认是空对象，我们不能访问到引用文件中的任何变量：

当我们使用 default 暴露时：

javascript 复制代码

let data = {
  name: "fat",
  age: 18,
};
export default data;
//引入
import * as f from "./xxx.js";
console.log(f)

我们可以看到 Module 对象出现了 default 属性，其内容就是我们暴露出去的 data 对象

也就是从表面上看，我们通过export default data的结果类似于export {data as default}(仅作类比)

但实际上两者也有区别，其主要体现在我们通过 export {data}这种形式导出的值是 data 的引用，而通过 export default data导出的则已经是 data 的具体值了。

又因为使用import被导入的变量与原变量绑定/引用的，可以理解为import导入到变量无论是否是基本类型都是引用传递的。

假如引用文件中的 data 的值（这里指地址）发生了改变，那么我们通过具名导出的形式是可以检测到的，但是通过默认暴露检测不到。

将默认暴露和统一暴露一起写：

javascript 复制代码

let data2 = {
  name: "fatfat",
  age: 90,
};
export default data2;
export { data };
//引入
import * as f from "./xxx.js";
console.log(f)

结果：

我们可以下结论，在 import 中获得的是一个文件对象，而对象里面的属性由 export 决定，如果是分别暴露就加上对应的属性，如果是默认暴露就加在 default 属性上。

但是通过 export default 添加的属性都是一个值而非具体的变量。

import default 的内容

import default 得到的内容其实就是该文件对象里 default 属性上的值：

javascript 复制代码

let data2 = {
  name: "fatfat",
  age: 90,
};
export default data2;
//引入
import fat from "./xxx.js";
import * as f from "./xxx.js";
console.log("fat", fat);
console.log("f", f);

控制台打印：

我们来确认一下是否相等：

javascript 复制代码

import fat from "./xxx.js";
import * as f from "./xxx.js";
console.log(fat === f.default);

控制台打印：

也就是import fat from "./xxx.js"这种写法其实和import {default as fat} from "./xxx.js"这种解构赋值的写法是等价的。

而且 import default不会像 export default导出的始终是一个值，import default 就是单纯地拿出 Module.default 里的值。

我们看下面这个例子：

javascript 复制代码

let a = 0;
setInterval(() => {
  a += 1;
}, 500);
export { a as default };
//引入
import f from "./mineTest.js";
t = setInterval(() => {
console.log(f);
}, 500);

从控制台我们可以看出输出的结果是持续在+1 的：

结论

1.从表面上看，export default data的结果类似于export {data as default}，但 export default导出的是数值，export {data}导出的变量

2.import fat from "./xxx.js"这种写法和import {default as fat} from "./xxx.js"这种解构赋值的写法是等价的

如有错误，请指正（光速滑跪）