`

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这个块里面,当我们触发事件时,psw1psw2已经发生变化。然后垃圾收集。局部变量在函数执行完就就没有存在的必要了。而全局变量的值等于先前已经获取过了input的value,不会随着我们的更改而改变。

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

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

 

 

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

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

 

 

 

 

  • 大小: 7.4 KB
  • 大小: 7.2 KB
1
0
分享到:
评论
1 楼 wuxy720 2016-11-24  
hahaha

相关推荐

    深入理解变量作用域

    比如给一个局部变量或者函数的参数声明的名字与某个全局变量名字一样的话,那么引用的就是那个局部变量或者函数的参数声明啦,间接隐藏了那个全局变量 var scope=”jquery”; function checkscope(){ var scope=”...

    jQuery中$原理实例分析

    本文实例讲述了jQuery中$原理。分享给大家供大家参考,具体如下: ... // 在这里边var定义的变量,属于这个函数域内的局部变量,避免污染全局 // 把当前沙箱需要的外部变量通过函数参数引入进来 // 只要保证参

    最新Python3.5零基础+高级+完整项目(28周全)培训视频学习资料

    局部变量与全局变量作用域 递归 函数式编程与函数不同 高阶函数 第4周 上节内容回顾 心灵鸡汤 装饰器详解 装饰器应用详解 装饰器之函数即变量 装饰器之高阶函数 装饰器之嵌套函数 装饰器之案例剖析 装饰器之高潮...

    jquery.plugin-boilerplate:简单而固执的jquery插件样板

    undefined是因为ECMAScript 3中的undefined全局变量是可变的。 (即可以由其他人更改)。 因为在调用匿名函数时我们不会将值传递给undefined,所以我们确保undefined确实是undefined。 注意:在ECMAScript 5中,...

    javascript真的不难-回顾一下基础知识

    说Jquery之前,先来学习一下Javascript(以后简称为JS)语言中的基础知识问题,其时对于每种编程语言来说基础知识都是大同小异的,对变量,函数,条件语句块,循环语句块等等,而对于每种语言在写法上到是显得各有...

    了解JavaScript中let语句

    使用let语句,允许你在JavaScript中创建块范围局部变量。let语句是在JavaScript的ECMAScript 6标准中引入的。 在你往下了解let语句之前,我建议你先查看基于Infragistics jQuery库的Ignite UI,它可以帮助你更快地...

    JavaScript代码性能优化总结篇

    在一个函数中会用到全局对象存储为局部变量来减少全局查找,因为访问局部变量的速度要比访问全局变量的速度更快些。 尽量减少循环次数 少一层循环,就能提高数倍性能。如果要对一个数组的每个元素进行多次操作,尽...

    JavaScript代码性能优化总结(推荐)

    在一个函数中会用到全局对象存储为局部变量来减少全局查找,因为访问局部变量的速度要比访问全局变量的速度更快些。 尽量减少循环次数 少一层循环,就能提高数倍性能。如果要对一个数组的每个元素进行多次操作,尽...

    JavaScript权威指南(第六版) 清晰-完整

    11.2 常量和局部变量 11.3 解构赋值 11.4 迭代 11.5 函数简写 11.6 多catch 从句 11.7 E4X: ECMAScript for XML 第12章 服务器端JavaScript 12.1 用Rhino脚本化Java 12.2 用Node实现异步I/O 第二部分 客户端...

    JavaScript权威指南(第6版)(中文版)

    11.2 常量和局部变量 11.3 解构赋值 11.4 迭代 11.5 函数简写 11.6 多catch 从句 11.7 E4X: ECMAScript for XML 第12章 服务器端JavaScript 12.1 用Rhino脚本化Java 12.2 用Node实现异步I/O 第二部分 客户端...

    JavaScript权威指南(第6版)

    11.2 常量和局部变量 11.3 解构赋值 11.4 迭代 11.5 函数简写 11.6 多catch 从句 11.7 E4X: ECMAScript for XML 第12章 服务器端JavaScript 12.1 用Rhino脚本化Java 12.2 用Node实现异步I/O 第二部分 客户端...

    js-notlarim:本文档由我创建的笔记组成,以获取基本的 JavaScript 知识。

    局部和全局变量 运营商 如果别的 开关盒 职能 for循环 while 循环 休息并继续 因为在 尝试-抓住-最后 扔 系列 对象 访问页面上的 DOM 和对象 事件和事件监听器 干扰接口属性 jQuery 关于JS 首先要了解Javascript,...

    JavaScript权威指南(第6版)中文文字版

    11.2 常量和局部变量 271 11.3 解构赋值 274 11.4 迭代 276 11.5 函数简写 285 11.6 多catch 从句 285 11.7 e4x: ecmascript for xml 286 第12章 服务器端javascript 290 12.1 用rhino脚本化java 291 12.2 用node...

    JavaScript权威指南(第6版) 中文版

    11.2 常量和局部变量 271 11.3 解构赋值 274 11.4 迭代 276 11.5 函数简写 285 11.6 多catch 从句 285 11.7 e4x: ecmascript for xml 286 第12章 服务器端javascript 290 12.1 用rhino脚本化java 291 12.2 用node...

    JavaScript权威指南(第6版)

    11.2 常量和局部变量 271 11.3 解构赋值 274 11.4 迭代 276 11.5 函数简写 285 11.6 多catch 从句 285 11.7 e4x: ecmascript for xml 286 第12章 服务器端javascript 290 12.1 用rhino脚本化java 291 12.2 用node...

    《JavaScript实例精通》[源代码]

    1_2.htm 局部变量和全局变量。 1_3.htm JavaScript中的强制类型转换。 1_4.htm 在HTML中为JavaScript传递变量。 1_5.htm 在HTML中引用JavaScript的变量。 1_6.htm 比较undefined和"undefined"。 第2章(\...

    JavaScript实例精通

    1_2.htm 局部变量和全局变量。 1_3.htm JavaScript中的强制类型转换。 1_4.htm 在HTML中为JavaScript传递变量。 1_5.htm 在HTML中引用JavaScript的变量。 1_6.htm 比较undefined和"undefined"。 第2章(\...

    python入门到高级全栈工程师培训 第3期 附课件代码

    02 全局变量与局部变量 03 风湿理论之函数即变量 04 函数递归 05 函数递归补充 第16章 01 上节课回顾 02 函数作用域 03 函数作用域补充 04 匿名函数 05 函数式编程介绍 06 函数式编程尾递归调用优化 07 map函数 08...

Global site tag (gtag.js) - Google Analytics