js变量的作用范围

最新推荐文章于 2020-11-19 00:22:26 发布

逆袭的小学生

最新推荐文章于 2020-11-19 00:22:26 发布

阅读量804

点赞数

分类专栏：前端知识文章标签： js JavaScript

本文链接：https://blog.csdn.net/q610376681/article/details/102648808

版权

前端知识专栏收录该内容

11 篇文章 0 订阅

订阅专栏

前言:写着写着项目,看着日益繁多的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>

逆袭的小学生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js变量的作用范围

前言:写着写着项目,看着日益繁多的js变量,突然对js变量的作用范围产生了兴趣,所以来研究一下,鉴于本人主要是搞后端的,这个主要是入门级js变量范围介绍.目录第一章不同script块中的js变量1.1 先定义1.2 后定义1.3.1 另一种定义方式第二章定义在js文件中的变量2.1 先定义2.2 后定义2.2.1 另一种定义方式第三章 js块中的函数...
复制链接

扫一扫