前端小白必知必会：JavaScript的作用域

文章导读：AI 辅助学习前端，包含入门、进阶、高级部分前端系列内容，当前是 JavaScript 的部分，瑶琴会持续更新，适合零基础的朋友，已有前端工作经验的可以不看，也可以当作基础知识回顾。

这篇文章瑶琴带大家学习 javascript 中关于变量作用域 的相关知识点。在 JavaScript 中，变量的作用域指的是变量在代码中的可访问性和可见性范围。JavaScript 中有两种主要的作用域：全局作用域和局部作用域。

1.全局作用域（Global Scope）

在代码的任何地方都可以访问的作用域，定义在全局作用域中的变量在整个程序中都是可见的。

javascript 复制代码

// 全局作用域 var globalVariable = 'Global Variable';
function exampleFunction() { // 函数作用域 
    var localVariable = 'Local Variable'; 
 console.log(localVariable); // 可以访问局部变量     console.log(globalVariable); // 可以访问全局变量 
}
exampleFunction(); // console.log(localVariable); // 错误，无法访问局部变量

2.局部作用域（Local Scope）

在函数内部定义的变量拥有局部作用域，只能在函数内部访问。函数外部无法访问函数内部的变量，这样可以防止变量污染和冲突。

javascript 复制代码

// 块级作用域 
if (true) { 
    let blockVariable = 'Block Variable'; 
    console.log(blockVariable); 
    // 可以访问块级作用域中的变量 
} 
// console.log(blockVariable); // 错误，无法访问块级作用域中的变量

JavaScript 中的变量作用域遵循词法作用域（也称为静态作用域）规则，即变量的作用域由它们在代码中的位置决定，与调用栈无关。

在 JavaScript 中，变量作用域的特点包括：

块级作用域：在 ES6（ECMAScript 2015）之前，JavaScript 中没有块级作用域，只有函数作用域和全局作用域。但是在 ES6 中引入了 let 和 const 关键字，可以创建块级作用域。

函数作用域：在函数内部定义的变量只在函数内部可见，外部无法访问。

变量提升（Hoisting）： 在 JavaScript 中，变量的声明会被提升到作用域的顶部，但是变量的赋值保持在原地。这意味着可以在声明之前使用变量，但是如果在声明之前访问变量的值，那么它的值会是 undefined。

闭包（Closure）： 闭包是指函数和函数内部能够访问到的变量的组合。函数可以创建闭包，闭包可以访问外部函数的变量，即使外部函数已经执行完毕。

javascript 复制代码

function outerFunction() {
     var outerVariable = 'Outer Variable'; 
     function innerFunction() {
         console.log(outerVariable); // 内部函数可以访问外部函数的变量 
     } 
    return innerFunction; 
} 
var innerFn = outerFunction(); 
innerFn(); // 输出 'Outer Variable'

在这个例子中，innerFunction 是闭包，它可以访问 outerFunction 中声明的 outerVariable 变量，即使 outerFunction 已经执行完毕。

对于初学者来说，理解并合理使用作用域是必要的，只要编码就离不开变量的声明和作用域问题，初学者可以结合上面的例子自己实践。

希望今天的内容对初学前端的朋友有所帮助。也希望每一个初学者都能成为一个优秀的前端开发工程师，加油。

最后啰嗦一句，好记性不如烂笔头，希望大家在学习的过程中养成做笔记的习惯，形成自己的知识体系。