小白速通JavaScript变量的作用域

markdown 复制代码
# JavaScript作用域详解

## 什么是作用域?

作用域就是变量和函数的"可见范围"。简单说,它决定了代码中哪些部分可以访问某个变量。

## 两种主要作用域类型

### 1. 全局作用域

在函数外部声明的变量,整个程序都可以访问

```javascript
let globalVar = "我是全局变量";

function showGlobal() {
  console.log(globalVar); // 可以访问
}

showGlobal();
console.log(globalVar); // 也可以访问

2. 局部作用域(函数作用域)

在函数内部声明的变量,只有函数内部能访问

javascript 复制代码
function localScope() {
  let localVar = "我是局部变量";
  console.log(localVar); // 可以访问
}

localScope();
console.log(localVar); // 报错!外部无法访问

块级作用域(ES6新增)

letconst 声明的变量具有块级作用域({} 就是一个块)

javascript 复制代码
if (true) {
  let blockVar = "块内变量";
  console.log(blockVar); // 可以访问
}
console.log(blockVar); // 报错!超出作用域

作用域链(重要!)

JavaScript会从当前作用域开始,逐层向外查找变量

javascript 复制代码
let outer = "外部变量";

function outerFunc() {
  let middle = "中间变量";
  
  function innerFunc() {
    let inner = "内部变量";
    console.log(inner);  // 内部变量
    console.log(middle); // 中间变量 ← 来自父作用域
    console.log(outer);  // 外部变量 ← 来自祖父作用域
  }
  
  innerFunc();
}

outerFunc();

常见误区案例

案例1:变量提升的坑

javascript 复制代码
console.log(hoistedVar); // 输出undefined而不是报错
var hoistedVar = "我被提升了";

console.log(letVar); // 报错!
let letVar = "我不会被提升";

案例2:循环中的作用域

javascript 复制代码
// 使用var(有问题)
for (var i = 0; i < 3; i++) {
  setTimeout(() => {
    console.log(i); // 全部输出3!
  }, 100);
}

// 使用let(正确)
for (let j = 0; j < 3; j++) {
  setTimeout(() => {
    console.log(j); // 输出0,1,2
  }, 100);
}

总结表格

关键字 作用域类型 是否提升 是否可重复声明
var 函数作用域
let 块级作用域
const 块级作用域

记住:良好的习惯是尽量使用 letconst,避免使用 var

复制代码
相关推荐
雨枪幻。1 小时前
spring boot开发:一些基础知识
开发语言·前端·javascript
lecepin1 小时前
AI Coding 资讯 2025.8.27
前端·ai编程
TimelessHaze2 小时前
拆解字节面试题:async/await 到底是什么?底层实现 + 最佳实践全解析
前端·javascript·trae
执键行天涯2 小时前
从双重检查锁定的设计意图、锁的作用、第一次检查提升性能的原理三个角度,详细拆解单例模式的逻辑
java·前端·github
青青子衿越2 小时前
微信小程序web-view嵌套H5,小程序与H5通信
前端·微信小程序·小程序
OpenTiny社区2 小时前
TinyEngine 2.8版本正式发布:AI能力、区块管理、Docker部署一键强化,迈向智能时代!
前端·vue.js·低代码
qfZYG3 小时前
Trae 编辑器在 Python 环境缺少 Pylance,怎么解决
前端·vue.js·编辑器
bug爱好者3 小时前
Vue3 基于Element Plus 的el-input,封装一个数字输入框组件
前端·javascript
Silence_xl3 小时前
RACSignal实现原理
前端
柯南二号3 小时前
【大前端】实现一个前端埋点SDK,并封装成NPM包
前端·arcgis·npm