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 查找变量时,会从内向外一层层找。
  • 📖 函数和代码块的详细用法,后面会有专门课程讲解。
相关推荐
MindUp1 小时前
多人会议音视频听记:支持说话人区分的工具使用观察
1024程序员节
weipt1 小时前
关于视频对讲项目的研究对比:LiveKit / Jitsi / SRS
视频会议·1024程序员节·视频推流·视频对接
xixiaoyunya1 小时前
网页状态实时提醒:把故障从“事后处理”变成“即时响应”
1024程序员节
Be for thing1 小时前
PyCharm安装与PyTorch项目配置|Jupyter Notebook与PyCharm使用对比
pytorch·学习·1024程序员节
weixin_440401691 小时前
大数据技术-人工智能编程题
大数据·人工智能·python·1024程序员节
代码不停1 小时前
分布式链路追踪 SkyWalking介绍
skywalking·1024程序员节
AIyy8661 小时前
学习资料分类整理的知识库工具使用思路:从统一入口到本地沉淀
1024程序员节
倔强的石头1061 小时前
模型合并技术_SLERP_TIES_Merge_DARE
人工智能·1024程序员节
重生之小比特1 小时前
【算法拾光】二分查找|有序数组中的单一元素 + 寻找两个正序数组的中位数
1024程序员节