浅谈Javascript变量作用域，初学遇到的困惑（上）

最新推荐文章于 2021-03-14 20:09:13 发布

_斌仔_

最新推荐文章于 2021-03-14 20:09:13 发布

阅读量116

点赞数

分类专栏： JavaScript 文章标签： Javascript 变量的作用域初学

本文链接：https://blog.csdn.net/weixin_44977470/article/details/96179688

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1 变量声明

**
javascript是弱类型语言，声明变量的方式有三种：var、let、const 。
其中，var就是声明一个变量，可以是全局的变量，也可以是在函数里的局部变量；let是声明一个块作用域的局部变量，也就是作用域在大括号{}里的局部变量；const是声明一个块作用域里的不可写的（不可更改的）变量。
那么在这篇文章中，我只是想说明一下除了函数体外，在大括号里里的这种块级，是怎么区分全局变量和局部变量的（会适当的牛角尖）。
**

2 全局变量的声明

**
全局变量的声明是在script标签里函数体外面用var所定义的变量，示例如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>javascript</title>
<script type="text/javascript">
	var a = 6;
</script>
</head>
<body>
<script>
	alert(a);
</script>
</body>
</html>

这样在该html文档里，a在哪都能读取到，而有别的语言基础的同学可能就觉得这段代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
	while(true){
		var a = 1;
		break;
	}
	
	for(var i=0;i<2;i++){
		var b = 4;
	}
</script>
</head>
<body>
<script>
	console.log(a);
	console.log(i);
	console.log(b);
	//都是可以读到的！！！
</script>
</body>
</html>

这都是可以读到的，平且还可以在任意位置改写：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
	var a=5,i=10,b=15;
	while(true){
		var a = 1;
		break;
	}
	
	for(var i=0;i<2;i++){
		var b = 4;
	}
</script>
</head>
<body>
<script>
	console.log(a);
	console.log(i);
	console.log(b);
	//都是可以改到的，而且是全局变动
</script>
</body>
</html>

那么如果想在局部产生这种变量，并作用于局部怎么办呢。

2 局部变量

看下面示例代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
	while(true){
		let a = 1;
		console.log(a);  //能读到
		break;
	}
	//console.log(a);    //报错
	for(let i=0;i<2;i++){
		console.log(i);  //能读到,所以（）不算一个块
		let b = 4;
		console.log(b);  //能读到
	}
	//console.log(b);    //报错
	//console.log(i);	 //报错
</script>
</head>
<body>
<script>
	//console.log(a);    //报错
	//console.log(i);    //报错
	//console.log(b);    //报错
</script>
</body>
</html>

在这里，用let声明之后，外面就读不到了，以下代码能更好的帮助理解：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
	var a=5,b=10,i=15;
	while(true){
		let a = 1;
		console.log(a);  // 显示：1
		break;
	}
	console.log(a);    //显示：5,读的是全局，let仅对块内起作用，重名也没关系
	for(let i=0;i<1;i++){
		console.log(i);  //显示：0
		let b = 4;
		console.log(b);  //显示：4
	}
	console.log(b);    //显示：10
	console.log(i);	 //显示：15
</script>
</head>
<body>
<script>
	console.log(a);    //显示：5
	console.log(i);    //显示：15
	console.log(b);    //显示：10
</script>
</body>
</html>

那么，当我们在括号内要改变a的值的时候，改变的是外面的a还是里面的a呢：

<script>
	var a=5,b=10,i=15;
	while(true){
		let a = 1;
		console.log(a);  // 显示：1
		a = 20;
		console.log(a);  // 特别注意：显示：20,改也是改的块里的a
		break;
	}
	console.log(a);    //显示：5,读的是全局，let仅对块内起作用，重名也没关系
</script>

所以在这里，在块内，我们改变的是块里let声明的a，而不是全局变量。

3 const声明

const是ES6提供的声明方法，也是块级的只可读作用域级的声明，那么对这个const声明我有以下转牛角尖的情况，请看：
第一种：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
	const a = 5;
	while(true){
		//a = 1; 		   //报错
		//var a = 7;	   //报错
		let a = 7;		   //这样是可以的，不报错
		console.log(a);    
		break;
	}
	//a = 3;               //报错
	console.log(a);		   //读的还是const声明的a
</script>
</head>
<body>
<script>
	console.log(a);      // 能读到
</script>
</body>
</html>

第二种：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
	const a = 5;           //全局的只可读的a
	while(true){
		const a = 7;	   //这样竟然也是可以的，代表他是这个块里的只可读的a
		console.log(a);    //打印出来是7
		break;
	}
	console.log(a);		   //读的是5
</script>
</head>
<body>
<script>
	console.log(a);       //读的是5
</script>
</body>
</html>

第三种：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
	/* 转牛角尖的情况~~~ */
	for(const i=9;;){
		console.log(i);  //能读到 
		break;
	}
	//console.log(i);	 //报错
</script>
</head>
<body>
<script>
	//console.log(i);    //报错
</script>
</body>
</html>

就是以上这三种啦~~~~
相信看完代码和注释能给初学者一个更清楚的认识

还有查阅过const声明的资料，其实const并不是不可变的，实际上const声明指向的是一个地址，这个地址指向一个对象

<script type="text/javascript">
	const a = new Array();
	a.push("a");
	a.push(1);
	a.push(2);
	a.push("b");
	a.push("cat");
	console.log(a.length);
	a.forEach(function(element,index){
		console.log(index+":"+element);
	});
</script>

这样是可以往里面传值的~~~~

本次分享就到这里了，都是自己总结的，如果有哪里不对的还请各位大佬指出，谢谢！

_斌仔_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浅谈Javascript变量作用域，初学遇到的困惑（上）

这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Ma...
复制链接

扫一扫

专栏目录