JavaScript模块全局变量变更的可见性及调用逻辑疑问

问题描述 #

在JavaScript模块中，当某一函数修改了模块内的全局变量后，模块内的其他函数能否看到这一变更？

参考示例代码：

data = null

function read_data() {
    // 读取文件并将内容赋值给data
    data = "文件内容示例"; // 模拟赋值操作
}

function print() {
    console.log(data)
}

如果从其他脚本中先调用read_data，再调用print，会输出null吗？还是每次打印都需要调用read_data？

解答 #

模块内的其他函数完全可以看到这个变量的变更，具体到你的场景：

• 先调用read_data再调用print，不会输出null，而是输出read_data赋值后的文件内容。
• 不需要每次打印都调用read_data，只要read_data已经执行过并修改了data的值，后续任何时候调用print，都会读取到data的最新值。

原因很简单：在同一个JavaScript模块的作用域下，所有顶层变量和函数都共享这个作用域。示例中的data是模块的顶层变量，属于模块级的全局变量，read_data对它的修改是直接改变这个变量的实际存储值，后续任何访问data的函数（比如print）都会获取到更新后的结果。

内容的提问来源于stack exchange，提问作者Juliana Restrepo