前言
- 系列文章目录：
- 根据视频和PPT整理
- 视频及对应资料：
- JS
- 视频：JavaScript基础语法-dom-bom-js-es6新语法-jQuery-数据可视化echarts黑马pink老师前端入门基础视频教程
- 视频对应资源(在视频简介里面)
- 链接：【https://gitee.com/xiaoqiang001/java-script.git】
- 视频对应资源(百度网盘)
- 链接：【https://pan.baidu.com/s/1q952v5mnFGR9IFjHlyn7Wg】
- 提取码：1234
1. 作用域概述
作用域：变量起作用和效果的范围为这个变量的作用域。
作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。
ES6之前作用域分为：全局作用域与局部作用域(函数作用域)。
1.1 全局作用域
在全局作用域，变量起作用和效果的范围为整个 script 标签内部或者一个独立的 js 文件。
<script> // 全局作用域 var num = 10; </script>
1.2 局部作用域
在局部作用域，变量起作用和效果的范围为函数的代码块。 因为跟函数有关系，所以也称为函数作用域。
<script> function fun1() { // 局部作用域 var num = 11; } </script>
1.3 不同作用域变量不冲突
<script> // 全局作用域 var num = 20; function fun1() { // 局部作用域 // 局部作用域中存在与全局作用域变量名相同的变量 // 但是由于两个变量的作用域不同不会发生冲突 var num = 11; console.log(num); } fun1(); console.log(num); </script>
如果同一个作用域下存在两个相同的变量，则存在变量冲突，后面声明的变量会覆盖前面声明的变量。
<script> // 全局作用域 var num = 20; var num = 30; console.log(num); </script>
2. 变量的分类
根据变量所在作用域的不同，变量分为全局变量和局部变量。
2.1 全局变量
全局变量就是在全局作用域下的变量。
<script> // 全局作用域 var num = 10; </script>
对于全局变量，在全局下都可以使用。
<script> // 全局作用域 var num = 20; console.log(num); function f1() { console.log(num); } f1(); </script>
如果在函数内部，没有声明直接赋值的变量也属于全局变量，相当于对全局变量进行修改。
<script> // 全局作用域 var num = 11; function f1() { // 局部作用域 console.log(num); // 修改全局变量num // 由于在局部作用域无num变量会向外查找变量num直到全局作用域 num = 22; } f1(); console.log(num); </script>
2.2 局部变量
局部变量就是在局部作用域下的变量。
注意：函数的形参也为局部变量。
<script> function fun1() { // 局部作用域 var num = 11; } </script>
对于局部变量，只能在函数内部使用。
<script> // 全局作用域 function f1() { // 局部作用域 var num = 11; console.log(num); } f1(); console.log(num); </script>
2.3 全局变量与局部变量对比
(1) 全局变量只有浏览器关闭的时候才会销毁
(2) 局部变量当我们程序执行完毕就会销毁
3. ES6之前无块级作用域
ES6之前无块级作用域，即var声明的变量不具有块级作用域。
<script> if (true) { // 在if代码块内声明的变量num // 可以在if代码块外被访问 // 由于var声明变量无块级作用域， // 相当于在当前代码块声明的变量就是在全局下声明的变量 var num = 11; } console.log(num); </script>
4. 作用域链
根据在内部函数可以访问外部函数变量的这种机制，用链式查找决定变量的取值，就称作作用域链。
链式查找决定变量的取值，优先查找当前作用域，如果当前作用域查找不到相关变量再向外进行查找。
<script> var num = 10; function f1() { var num = 20; function f2() { console.log(num); } f2(); } f1(); </script>
![[JS]作用域的“生产者”——词法作用域](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635708/20241110/80ecbe830d6b4b6e88b4a7647ef36a9b.png?x-oss-process=image/resize,h_160,m_lfit)
