1、JavaScript中的作用域
1.1、作用域概述
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/1ae16851af0828d1aef6a6d4c3bac835.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var num = 10;
var num = 30;
console.log(num);
function fn(){
var num = 20;
console.log(num);
}
fn()
</script>
</head>
<body>
</body>
</html>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/70760d120f5592283c6d5e3e174ea925.png)
2、变量的作用域
2.1、变量作用域的分类
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/105b1cba795ce6cf38f8788e10407e69.png)
2.2、全局变量
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/9db81c3b2d58813edd12772f4bab46c5.png)
2.3、局部变量
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/66b80655b3c7fec5e2c8bb114c426fa5.png)
2.4、局部变量与全局变量的区别
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/fbf31055a9edb211314dea7827be139d.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var num = 10;
console.log(num);
function fn(){
console.log(num);
}
fn();
function fun(){
var num1 = 10;
num2 = 20;
}
fun();
console.log(num1);
console.log(num2);
</script>
</head>
<body>
</body>
</html>
3、作用域链
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/13e7d266344dd3f09cc3be9ecf447796.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var num = 10;
function fn(){
var num = 20;
function fun(){
console.log(num);
}
fun();
}
fn();
</script>
</head>
<body>
</body>
</html>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/7a8f326a07680ae1adc80a98e5eac399.png)
3.1、作用域链案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function f1(){
var num = 123;
function f2(){
console.log(num);
}
f2();
}
var num = 456;
f1();
</script>
</head>
<body>
</body>
</html>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/0fa7fdc47869ca2367009505c6f7ebb5.png)