今天在写表单验证的时候,发现一个关于变量作用域的问题。
很多人都在纠结局部变量与全局变量的问题,其实全局变量与局部变量就是差别在作用域与生命周期两方面。
但是全局变量是魔鬼阿!过多的全局变量会造成变量覆盖!(重名的话后声明的会覆盖先声明的变量)
话不多说,咱们从一个例子来看!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>关于全局变量与局部变量</title>
</head>
<body>
<form>
<input type="password" id="psw1" />
<input type="password" id="psw2" />
<input type="button" id="send" value="验证" />
</form>
<script type="text/javascript" src="../../resources/js/base/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../../resources/js/page/test.js"></script>
</body>
</html>
方法1:全局
var psw1 = $('#psw1').val(); var psw2 = $('#psw2').val(); $(function testpsw() { $('#send').click(function() { if (psw1 == psw2) { alert('输入正确'); } else{ alert('输入错误'); } }); })
方法2:局部
$(function testpsw() { $('#send').click(function() { var psw1 = $('#psw1').val(); var psw2 = $('#psw2').val(); if (psw1 == psw2) { alert('输入正确'); } else{ alert('输入错误'); } }); })
我定义了2个input,我需要做的就是验证这两个input的value是否相同。相同就报OK,不同就报不Ok。
两个的结果分别是
方法1:(无论我输入什么都是错误的)
方法2:(两个input的value一样时正确,不一样时错误)
为什么会这样呢?
之所以两者会不一样,是因为作用域的问题。当我们沿用第一种做法的时候。我们在testpsw()中调用的就是全局变量。而第二种中我们调用的就是局部的变量。在function这个块里面,当我们触发事件时,psw1与psw2已经发生变化。然后垃圾收集。局部变量在函数执行完就就没有存在的必要了。而全局变量的值等于先前已经获取过了input的value,不会随着我们的更改而改变。
简而言之,就是全局定义的这个变量,已经有了固定的值不会随着我们更改input的value改变。它会一直存在。
而局部变量,每次我们点击验证按钮时,都会刷新两个变量的值。每次获取到我们输入的新的值。因为它每次执行完点击事件触发后,这个变量就会销毁。每次都会重新定义!
其中这还涉及到了关于全局变量与局部变量更多的内容,也设计到了垃圾回收机制!
剩下的内容会在随后介绍!