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

wuxy720

浏览: 30294 次
性别:
来自: 长春

最近访客更多访客>>

里昂工作室

ph7.3

悲伤向右

ayufish

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

js，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一样时正确，不一样时错误）

为什么会这样呢？

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

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

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

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

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