ES6模块导出的问题

问题描述

问 题

a.js中，用export导出模块：

var count = 30;
var increaseAge = function () {
    count = count + 1;
}

export {count, increaseAge};

b.js中引入模块a.js:

import {count , increaseAge} from "./a";
console.log(count); // 30
increaseAge();
console.log(count); // 31

两次输出count分别为30和31，这个可以理解，因为引入的是一个模块对象，属性分别为count和increaseAge。

但是，当尝试用export default改写这个例子时，结果完全不同。
a.js如下：

var count = 30;
var increaseAge = function () {
    count = count + 1;
}
export default {count, increaseAge};

b.js如下：

import A from './a';
console.log(A.count); // 30
A.increaseAge();
console.log(A.count); // 30

为什么count第二次输出还是30？
求大神解答，万分感谢！

解决方案

export default只能导出一个module,你并没有导出count

export default {count, increaseAge}是应用了es6的对象属性简写语法
而export {count, increaseAge}则是应用了export多个值的语法
两者的语义完全不同

扩展开的话，两者分别是这样

//等同于export {count, increaseAge}
export count
export increaseAge

//等同于export default {count, increaseAge}
let defaultModule = {
    count: count,
    increaseAge: increaseAge
}
export default defaultModule

在default的情况下,export出去的是defaultModule，上面有一个count属性,在赋值给defaultModule之后，就和原count没有关系了，而increaseAge改变的是闭包内的原count，你打印defaultModule.count自然不会有变化

这篇关于ES6模块导出的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！