前言:写着写着项目,看着日益繁多的js变量,突然对js变量的作用范围产生了兴趣,所以来研究一下,鉴于本人主要是搞后端的,这个主要是入门级js变量范围介绍.
目录
第一章 不同script块中的js变量
1.1 先定义
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
<script>
var c=6
</script>
<script>
console.log(c)
</script>
</html>
结果:6
结论:会影响
1.2 后定义
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
<script>
console.log(c)
</script>
<script>
var c=6
</script>
</html>
结果:c is not defined
结论:定义了才能使用
1.3.1 另一种定义方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
<script>
console.log(c)
</script>
<script>
c=6
</script>
</html>
结果:c is not defined
结论:定义了才能使用
第二章 定义在js文件中的变量
2.1 先定义
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
<script src="js/index1.js"></script>
<script>
console.log(c)
</script>
</html>
//index1.js
结果:输出c
结论:会影响
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
<script>
var c ="www.baidu.com"
</script>
<script src="js/index1.js"></script>
</html>
结果:输出c
结论:会影响
2.2 后定义
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
<script>
console.log(c)
</script>
<script src="js/index1.js"></script>
</html>
//index1.js
结果:c未定义
结论:定义了才能使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
<script src="js/index1.js"></script>
<script>
var c ="www.baidu.com"
</script>
</html>
//index1.js
结果:c未定义
结论:定义了才能使用
2.2.1 另一种定义方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
<script>
console.log(c)
</script>
<script src="js/index1.js"></script>
</html>
//index1.js
结果:c未定义
结论:定义了才能使用
第三章 js块中的函数
3.1 不同js块中的函数先定义再使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
<script>
function out(url){
console.log(url)
}
</script>
<script>
var c ="www.baidu.com"
out(c)
</script>
</html>
结果:输出c
结论:会影响
3.2 不同js块中的函数先使用再定义
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
<script>
var c ="www.baidu.com"
out(c)
</script>
<script>
function out(url){
console.log(url)
}
</script>
</html>
结果:out未定义
结论:定义了才能使用
3.3 同一块中的js函先使用再定义
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
<script>
var c ="www.baidu.com"
out(c)
function out(url){
console.log(url)
}
</script>
</html>
结果:输出c
结论:会影响
3.4 同一块中的js函数先定义再使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
<script>
function out(url){
console.log(url)
}
var c ="www.baidu.com"
out(c)
</script>
</html>
结果:输出c
结论:会影响
可以看到在一个块中,函数并不需要遵循定义在前才可以使用的原则,定义在后面的函数也能被调用.
第四章 js文件中的函数
4.1 先定义再使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
<script src="js/index1.js"></script>
<script>
var c ="www.baidu.com"
out(c)
</script>
</html>
//index1.js
结果:输出c
结论:会影响
4.2 先使用再定义
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
<script>
var c ="www.baidu.com"
out(c)
</script>
<script src="js/index1.js"></script>
</html>
//index1.js
结果:out未定义
结论:定义了才能使用
4.3 同一js块中函数互相调用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
<script src="js/index1.js"></script>
<script>
var c ="www.baidu.com"
out(c)
</script>
</html>
//index1.js
可以看到out2函数定义早于out1
结果:输出c
结论:会影响
第五章 结论
注:自己的推断不一定对
5.1 js文件的引入
感觉js所谓的引入就相当于把js文件的代码导入在引入的位置中,是因为某个js块的代码太多,所以写在了外部.
例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
<script src="js/index1.js"></script>
</html>
等于
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
<script>
function out2(url){
out(url);
}
function out(url){
console.log(url)
}
</script>
</html>
5.2 js变量函数作用规则
在js块中,全局变量可以作用于所有的js块,但是必须遵循先定义再使用的原则.
其实会有变量提升和函数提升,会打破这个原则,这里我们只是初步学习,所以不说这个,感兴趣的可以去看
https://blog.csdn.net/qq_42606051/article/details/82016733
https://www.cnblogs.com/enjoymylift/p/6003155.html
局部变量只作用于当前作用域,如只作用在function.如果在function中使用变量不加var,那么此变量会变成全局变量.
可以参考https://www.cnblogs.com/yedliu/p/6517572.html
同一个块中,函数不必遵循定义再使用的原则,先定义的函数可以调用后定义的函数,不同块中要遵循先定义后使用
简单解释下:
运行一段JS代码时:
JS引擎会先扫描整个JS代码,把所有全局变量都绑定到window对象上,包括函数和变量的定义。此时,window上就有了函数和值为undefined。
5.2.1 if,for中变量作用域
参考:https://www.cnblogs.com/junwuyao/p/7674753.html
在JS中,只有函数作用域,没有块级作用域!!!也就是说,if/for等有{}的结构体,并不能具备自己的作用域。
下面的代码中,b是全局变量.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
<script>
var a=3
if(a==3){
var b=6
}
</script>
<script>
console.log(b);
</script>
</html>