小白速通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 小时前
本地环境vue与springboot联调
前端·vue.js·spring boot
阳光是sunny1 小时前
走进微前端(1)手写single-spa核心原理
前端·javascript·vue.js
烛阴2 小时前
Ceil -- 从平滑到阶梯
前端·webgl
90后的晨仔2 小时前
🔍Vue 模板引用(Template Refs)全解析:当你必须操作 DOM 时
前端·vue.js
90后的晨仔2 小时前
👂 Vue 侦听器(watch)详解:监听数据的变化
前端·vue.js
90后的晨仔3 小时前
深入浅出 Vue 的 computed:不仅仅是“计算属性”那么简单!
前端·vue.js
Nan_Shu_6143 小时前
学习:入门uniapp Vue3组合式API版本(17)
前端·vue.js·学习·uni-app
止观止3 小时前
Remix框架:高性能React全栈开发实战
前端·react.js·前端框架·remix
萌萌哒草头将军4 小时前
🚀🚀🚀 深入探索 Node.js v22.18.0 新特性;默认支持运行 ts 文件了!
前端·typescript·node.js
安心不心安4 小时前
React ahooks——副作用类hooks之useThrottleFn
前端·javascript·react.js