JavaScript 作用域

作用域的作用主要是保证我们声明的变量在指定的区域内其效果，并且不会发生被随意修改的情况发生。

全局作用域

全局作用域主要是脚本模式下运行时才会起效。并且全局变量要放在引入的第一个 JS 文件中。具体是如下：

<script src="global.js"></script>
<script src="demoFunction.js"></script>

// glob.js
const global = "全局变量";

// demoFunction.js
console.log(global);

function fn1() {
  console.log(global1); // 函数内部调用全局变量
}
fun1();

全局变量在使用的时候需要注意代码的全局污染，因为当删除全局的变量后，引用了全局变量的 JS 文件就会产生错误，这样就会导致系统的异常，所以我们在使用全局作用域的时候需要做一个全局考虑。

模块作用域

模块作用域主要是使用 export 来导出的变量，只有在引入模块后才能使用其变量。具体实例如下：

// modelFunction.js
const modelInVal = "模块内部变量";
export const modelOutVal = "模块对外暴露的变量";

// runFunction.js
import { modelOutVal } from "./modelFunction.js";
console.log("modelOutVal");

函数作用域

函数作用域主要是变量声明在函数内部或者表达式内。具体实例如下：

const v1 = 1;

function run() {
  const v2 = 2;

  console.log(v1);
  console.log(v2);

  if (true) {
    const v3 = 3;

    console.log(v1);
    console.log(v2);
    console.log(v3);
  }

  console.log(v1);
  console.log(v2);
  console.log(v3); // 报错，因v3变量是在if表达式中声明的，作用域只在if块中使用
}

run();
console.log(v1);
console.log(v2); // 报错，因v2是在run函数内部声明的变量，作用域只在run函数累不使用

需要注意的是 cost 和 let 声明的变量锁级作用域，即在函数内部和表达式内部声明了就不会在提升作用域，而 var 则是会提升作用域。具体实例如下：

const v1 = 1;

function run() {
  const v2 = 2; // 假如这里改为var来声明变量的话，run函数外部引用此变量还是会发生错误

  console.log(v1);
  console.log(v2);

  if (true) {
    var v3 = 3;

    console.log(v1);
    console.log(v2);
    console.log(v3);
  }

  console.log(v1);
  console.log(v2);
  console.log(v3); // v3使用var声明了以后作用域提升到run函数中，所以这里引用变量不会出错
}

块作用域

块作用域其实就是使用 const 和 let 声明的变量，因为 const 和 let 是锁级作用域。例如在函数作用域演示的例子中我们可以看到使用 const 声明的变量只在块中起效。