javascript中错误使用var造成undefined

简介:

在javascript中根据变量作用的范围不同分为局部变量和全局变量,直接定义的变量是全局变量,全局变量可以被所有的脚本访问;在函数中定义的变量是局部变量,局部变量只在函数内有效。

如果全局变量和局部变量使用相同的变量名,则局部变量将会覆盖全局变量。

例子代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>js中全局变量与局部变量</title>
	</head>
	<body>
		<script type="text/javascript">
			var a = "全局变量";
			function test1()
			{
				var a = "局部变量";
				
				alert(a);
			}
			
			function test2()
			{
				alert(a);
				
				var a = "局部变量";
				
				alert(a);
			}
			
			function test3()
			{
				alert(a);
				
				a = "局部变量";
				
				alert(a);
			}
		</script>
		
		<input type="button"  value="test1" onclick="test1()"/>
		<input type="button"  value="test2" onclick="test2()"/>
		<input type="button"  value="test3" onclick="test3()"/>

	</body>
</html>

运行的结果是这样的:

点击test1 ,弹出局部变量。

点击test2,弹出undefined,再弹出局部变量

  点击test3,弹出全局变量,再弹出局部变量


这就是使用var和不使用的区别所在:

如果使用var,那么程序会强制定义一个新变量。

如果没有使用var,系统会优先在当前上下文中搜索是否存在该变量,只有在不存在的前提下才会重新定义一个新变量。


test3中,使用的变量a均为全局变量,第一次直接输出了全局变量,第二次是直接为全局变量赋值之后使用。

test1和test2中都存在在function中使用var定义同名新变量,会导致函数中的变量覆盖掉全局变量。所以在test2中:第一次输出的a是已经被覆盖了的局部变量a,但是没有给予初值,所以会出现undefined这个结果。这样使用变量实际上是错误的,大家应该避免。



目录
相关文章
|
JavaScript 前端开发
JavaScript如何判断变量undefined
JavaScript如何判断变量undefined
|
8月前
|
JavaScript 前端开发 安全
【JavaScript】深入理解 let、var 和 const
掌握这些关键字的使用可以提高代码的可读性和可维护性,避免潜在的变量提升和作用域问题。希望本文能帮助您更好地理解和应用 JavaScript 中的变量声明方式,编写出更高质量的代码。
179 20
|
JavaScript 前端开发 开发者
|
JavaScript 前端开发 开发者
JavaScript的变量提升是一种编译阶段的行为,它将`var`声明的变量和函数声明移至作用域顶部。
【6月更文挑战第27天】JavaScript的变量提升是一种编译阶段的行为,它将`var`声明的变量和函数声明移至作用域顶部。变量默认值为`undefined`,函数则整体提升。`let`和`const`不在提升范围内,存在暂时性死区。现代实践推荐明确声明位置以减少误解。
106 2
|
12月前
|
JavaScript 前端开发
【JavaScript】let,const和var的区别
总的来说,随着ECMAScript 6(ES6)及后续版本的推广,`let`和 `const`因其增强的块级作用域和对变量行为的更严格控制,逐渐成为现代JavaScript编码实践中推荐使用的变量声明方式。而 `var`由于其历史遗留的局限性,正逐渐被边缘化,但在维护老代码或处理特定兼容性需求时仍需了解。
188 3
|
机器学习/深度学习 JavaScript 前端开发
JavaScript typeof, null, 和 undefined
JavaScript typeof, null, 和 undefined
137 5
|
JavaScript 前端开发
使用 let 将有助于避免 JavaScript 中各种 var 引起的作用域问题。
这段内容介绍了JavaScript编程时的一系列最佳实践,包括使用`===`而非`==`进行比较、以`let`和`const`取代`var`定义变量、始终使用分号、采用合适的命名规范、利用模板字符串拼接、偏好ES6箭头函数、在控制结构中使用大括号、减少代码嵌套、应用默认参数、正确使用`switch`语句中的`break`与`default`分支、避免通配符导入以及简化布尔判断和避免不必要的三元运算符。遵循这些规则有助于提升代码的清晰度和可维护性。
46 3
|
存储 JavaScript 前端开发
|
开发者 图形学 C#
揭秘游戏沉浸感的秘密武器:深度解析Unity中的音频设计技巧,从背景音乐到动态音效,全面提升你的游戏氛围艺术——附实战代码示例与应用场景指导
【8月更文挑战第31天】音频设计在游戏开发中至关重要,不仅能增强沉浸感,还能传递信息,构建氛围。Unity作为跨平台游戏引擎,提供了丰富的音频处理功能,助力开发者轻松实现复杂音效。本文将探讨如何利用Unity的音频设计提升游戏氛围,并通过具体示例代码展示实现过程。例如,在恐怖游戏中,阴森的背景音乐和突然的脚步声能增加紧张感;在休闲游戏中,轻快的旋律则让玩家感到愉悦。
622 0
|
JavaScript 前端开发