jquery中的变量在全局与局部的不同

 今天在写表单验证的时候,发现一个关于变量作用域的问题。

很多人都在纠结局部变量与全局变量的问题,其实全局变量与局部变量就是差别在作用域生命周期两方面。

但是全局变量是魔鬼阿!过多的全局变量会造成变量覆盖!(重名的话后声明的会覆盖先声明的变量)

话不多说,咱们从一个例子来看!

<!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一样时正确,不一样时错误)
jquery中的变量在全局与局部的不同_第1张图片
 为什么会这样呢?

 

之所以两者会不一样,是因为作用域的问题。当我们沿用第一种做法的时候。我们在testpsw()中调用的就是全局变量。而第二种中我们调用的就是局部的变量。在function这个块里面,当我们触发事件时,psw1psw2已经发生变化。然后垃圾收集。局部变量在函数执行完就就没有存在的必要了。而全局变量的值等于先前已经获取过了input的value,不会随着我们的更改而改变。

简而言之,就是全局定义的这个变量,已经有了固定的值不会随着我们更改input的value改变。它会一直存在。

而局部变量,每次我们点击验证按钮时,都会刷新两个变量的值。每次获取到我们输入的新的值。因为它每次执行完点击事件触发后,这个变量就会销毁。每次都会重新定义!

 

 

其中这还涉及到了关于全局变量与局部变量更多的内容,也设计到了垃圾回收机制!

剩下的内容会在随后介绍!

 

 

 

 

你可能感兴趣的:(jquery中的变量在全局与局部的不同)