作用域的作用主要是保证我们声明的变量在指定的区域内其效果,并且不会发生被随意修改的情况发生。
全局作用域
全局作用域主要是脚本模式下运行时才会起效。并且全局变量要放在引入的第一个 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 声明的变量只在块中起效。