Javascript之什么是作用域?

上一课我们学会了用变量来存数据。但你可能已经发现一个问题:变量是不是在任何地方都能用?

答案是:不是。 变量有自己的"地盘",出了这个地盘就用不了了。这个"地盘"就叫作用域。

🏘️ **生活比喻:**作用域就像你家的客厅。你在客厅里放的杯子,全家人都能看到、拿来用。但邻居站在他家客厅里,是看不到也拿不到你家客厅的杯子的。如果你把杯子放在小区花园里,那所有人都能用。

用一句更专业的话说:作用域决定了代码中哪些地方能访问到这个变量。

🔍 先认识两个新朋友:函数和代码块

在讲作用域之前,我们需要先简单认识两个东西。别担心,这里只是先混个脸熟,后面会有专门课程详细讲解。

① 函数: 函数就像一台"小机器",你把材料放进去,它帮你干活。定义函数用 function 关键字,后面跟一对圆括号和一对花括号:

在线编译器main.js

现在你只需要知道:函数自带一对花括号 { },里面是一个独立的小天地。至于怎么用、怎么传材料,后面的课会详细讲。

② 代码块: 一对花括号 { } 包起来的一段代码,就叫一个代码块。比如:

在线编译器main.js

代码块也像一个小房间。现在你只需要记住:花括号 { } 会圈出一块地盘。

📌 划重点: 这一课你只需要记住"函数"和"代码块"都带花括号 { },花括号里面是一个独立的小地盘。它们的详细用法,我们后面会专门学。

🗺️ 三种基本地盘

JavaScript 里主要有三种作用域:

作用域类型 地盘范围 生活类比
全局作用域 整个程序 小区花园,谁都能用
函数作用域 函数内部 自己家客厅,只有家人能用
块级作用域 { } 内部 一个临时的帐篷,出来就没了

🏡 全局作用域:小区花园

在最外层直接声明的变量,放在"小区花园"里,任何地方都能访问。

在线编译器main.js

⚠️ 花园里的东西太多,容易和别人重名。所以真正的项目里,我们尽量少往全局放东西。

🚪 函数作用域:自己家客厅

在函数内部用 var 声明的变量,是局部变量,只属于这个函数。

在线编译器main.js

函数里能看见外面,外面看不见里面。就像你在客厅里能看到花园里的大树,但站在花园里是看不到你家客厅茶几上的杯子的。

💡 myRoom() 这种写法叫"调用函数",意思是让这台机器开始干活。现在看不懂没关系,后面学函数时会详细讲。

⛺ 块级作用域:临时帐篷

用 let 或 const 在 { } 里声明的变量,只在那一对花括号里有效。

在线编译器main.js

注意:var 不会被困在帐篷里 。如果你用 var 在 { } 里声明,它其实会跑到外面的花园去。这是 var 和 let 的一个重要区别。(后续课程会详细介绍,这里仅仅作为拓展~)

在线编译器main.js

⏳ 变量的生命周期:能活多久?

变量不仅有"地盘",还有"寿命"。这个寿命叫生命周期。

变量类型 什么时候"出生" 什么时候"消失"
全局变量 声明的时候 页面关闭才销毁
函数局部变量 函数被调用的时候 函数执行完就销毁
块级局部变量 执行到声明那一行 花括号执行完就销毁

🧹 **类比:**函数就像一个房间。你进去的时候,房间里摆好了各种东西(变量被创建)。你办完事出来,房间就被清空了(变量被销毁)。下次再进去,又是全新的、空的房间。

🪜 变量查找:沿着一层层往上找

当你在代码里用一个变量时,JavaScript 会像爬楼梯一样,从当前所在的"楼层"开始找,找不到就上一层,再找不到就再上一层。

在线编译器main.js

如果找到最顶层(全局)还是没有,就会报错 ReferenceError,告诉你这个变量根本不存在。

⚠️ 新手常见错误

  • ❌ 在花括号外面用花括号里的 let 变量:出了帐篷就找不到
  • ❌ 用 var 在花括号里声明,以为外面用不了:var 会"跑"出去
  • ✅ 正确做法:花括号里的变量就在花括号里用;需要跨地方共享的,才放到全局

📌 本课要点回顾

  • ✅ 作用域决定了变量在代码的哪些地方能被访问。
  • ✅ 三种作用域:全局 (到处能用)、函数 (函数内能用)、块级(花括号内能用)。
  • ✅ 函数和代码块都带花括号 { },里面是一个独立的小地盘。
  • ✅ 用 var 声明的变量会"跑出"花括号;用 let/const 声明的变量会留在花括号里。
  • ✅ JavaScript 查找变量时,会从内向外一层层找。
  • 📖 函数和代码块的详细用法,后面会有专门课程讲解。
相关推荐
总要学点什么2 小时前
第105篇:三维特效-流动图片墙体效果——让箭头沿墙长滚,它俩竟是同一份代码
开发语言·javascript·ecmascript·gis·webgl·材质·cesium
Agent世界4 小时前
用 CDP 做发布自动化:四道机器闸门与产物验收
前端·javascript
总要学点什么4 小时前
第104篇:三维特效-流动墙体效果——让贴图沿墙流动,它却只肯走一条对角线
开发语言·javascript·ecmascript·gis·webgl·材质·cesium
程序员大阳4 小时前
副队长ES6+教程(3)--解构赋值
前端·javascript·es6·赋值·解构
神膘护体小月半4 小时前
css - 元素背景图由 hover 触发,初次加载时闪动的解决办法
前端·javascript·css
程序员大阳5 小时前
副队长ES6+教程(2)--let 与 const
前端·javascript·es6·const·let·var
普通人65 小时前
WebGL与WebGPU入门指南
开发语言·webgl·1024程序员节
曦樂~6 小时前
【Web Development】03JavaScript 基础和事件
开发语言·前端·javascript
码云社区6 小时前
智慧物业系统选型指南:房屋档案、账单管理与报修协作
前端·javascript·vue.js·智慧物业
code_Bo20 小时前
不只命令行:我把跨 Agent 会话同步做成了桌面应用
前端·javascript·后端