编程笔记 html5&css&js 084 JavaScript 变量的作用域
一、全局作用域
- 全局作用域中的变量在整个脚本或应用程序中都是可见的，可以在任何地方被访问和修改。
// 全局变量
var globalVar = "Hello, World!";
function someFunction() {
console.log(globalVar); // 可以访问并输出 "Hello, World!"
}
someFunction();
console.log(globalVar); // 输出 "Hello, World!"
在JavaScript中，全局变量在整个网站（或单个页面）范围内都是可见的，并且可以在任何地方被访问和修改。它们通常与window对象关联在一起，在浏览器环境中，直接声明的全局变量默认是window对象的属性。
全局变量的创建方式：
-
隐式全局变量：
如果没有使用var、let或const关键字声明变量，则该变量会自动成为全局变量。myGlobalVar = "Hello, World!";在其他脚本或函数中可以直接访问：
console.log(myGlobalVar); // 输出 "Hello, World!" -
显式全局变量：
使用window对象可以明确地创建全局变量。window.myExplicitGlobalVar = "Hello, again!";同样可以在任何位置访问：
console.log(window.myExplicitGlobalVar); // 输出 "Hello, again!"
然而，为了防止命名冲突和提高代码质量，现代编程实践中通常不鼓励过度依赖全局变量，而是推荐使用闭包、模块化等技术来管理作用域内的变量。例如，在Node.js中可以通过模块系统来实现跨文件共享数据；在浏览器端，随着ES6模块的引入，开发者也可以通过导入导出来管理变量的可见范围。
对于Vue.js这样的前端框架，全局状态管理通常会采用Vuex这类库，或者通过组件间的props和自定义事件进行通信，而不是直接使用全局变量。
如果你确实需要在多个组件或脚本之间共享全局状态，Vue提供了多种方式来实现这一点，如Vue.prototype挂载全局方法和属性、Vuex的状态管理库、或者在根实例上设置data属性等。
二、局部作用域（函数作用域）
- 函数作用域意味着变量在函数内部声明后，只能在该函数内部访问和修改，外部无法直接访问。
function myFunction() {
// 在这个函数内部声明的变量具有函数作用域
var localVar = "Local Variable";
console.log(localVar); // 输出 "Local Variable"
}
myFunction();
console.log(localVar); // 报错，因为localVar在这个作用域外未定义
三、块级作用域（ES6引入）
- 块级作用域由
let和const关键字声明的变量拥有，在它们所在的代码块（例如{}内部）内有效。
if (true) {
let blockScopedVar = "Block Scoped Variable"; // 使用let声明
console.log(blockScopedVar); // 输出 "Block Scoped Variable"
}
console.log(blockScopedVar); // 报错，因为blockScopedVar在此作用域外未定义
try {
const anotherBlockScopedVar = "Const Block Scoped"; // 使用const声明
console.log(anotherBlockScopedVar);
} catch(e) {}
console.log(anotherBlockScopedVar); // 同样报错，因为在try块之外不可见
另外，从ES6开始，还引入了let和const支持的词法作用域，以及for循环、switch语句等结构内的块级作用域，这些都增强了对变量作用域的控制能力，并减少了全局变量带来的副作用风险。同时，还有function表达式和class声明也可以创建局部作用域。
for (let i = 0; i < 5; i++) {
// 这里的i只在当前循环体内部有作用域
}
console.log(i); // 报错，因为循环体外部的i未定义
小结
局部变量或块级变量较易掌握，合理使用全局变量更为重要。