一次让你了解全部JavaScript的作用域

前言

作用域决定了变量的生命周期和可见性，变量在作用域范围之外是不可见的。

JavaScript 的作用域包括：模块作用域，函数作用域，块作用域，词法作用域和全局作用域。

全局作用域

在任何函数、块或模块范围之外定义的变量具有全局作用域。可以在程序的任意位置访问全局变量。
当启用模块系统时，创建全局变量会变得困难，但仍然可以做到这一点。可以在 HTML 中定义一个变量，这个变量需要在函数之外声明，这样就可以创建一个全局变量：

<script>let GLOBAL_DATA = { value : 1};</script>console.log(GLOBAL_DATA);

当没有模块系统时，创建全局变量会容易很多。在任何文件中的函数外声明的变量都是全局变量。
全局变量贯穿于程序的整个生命周期。

另一种创建全局变量的方法是在程序的任意位置使用 window 全局对象：

window.GLOBAL_DATA = { value: 1 };

这样 GLOBAL_DATA 变量会随处可见。

console.log(GLOBAL_DATA)

不过你也知道这种做法是不好的。

模块作用域

如果不启用模块，在所有函数之外声明的变量是全局变量。在模块中，在函数外部声明的变量都是隐藏的，除非显式导出，否则不可用于其他模块。

导出使函数或对象可用于其他模块。在这个例子中，我从模块文件 sequence.js 中导出了一个函数：

// in sequence.jsexport { sequence, toList, take };

当前模块可以通过导入来使用其他模块的函数或对象成。

import { sequence, toList, toList } from "./sequence";

在某种程度上，我们可以认为模块是一个自动执行的函数，它将 import 的数据作为输入，然后返回 export 的数据。

函数作用域

函数作用域意味着在函数中定义的参数和变量在函数内的任何位置都可见，但是在函数外部不可见。

下面是一个自动执行的函数，被称为IIFE。

(function autoexecute() {let x = 1;})();console.log(x);//Uncaught ReferenceError: x is not defined

IIFE 的意思是立即调用函数表达式，是一个在定义后立即运行的函数。

用 var 声明的变量只有函数作用域。更重要的是，用 var 声明的变量被提升到其作用域的顶部。通过这种方式，可以在声明之前访问它们。看看下面的代码：

function doSomething(){console.log(x);var x = 1;}doSomething(); //undefined

这种事不会发生在 let 中。用 let 声明的变量只能在定义后访问。

function doSomething(){console.log(x);let x = 1;}doSomething();//Uncaught ReferenceError: x is not defined