JS全局变量和局部变量

JS全局变量和局部变量全局变量和局部变量在看了一个博主写的关于js全局变量的的介绍后,自己也跟着做了一下,并且记录在这里。原博客地址:谈谈JS的全局变量跟局部变量。博主说的比较详细,也比我的表达好,如果不是没耐心,建议去看看原博主的文章先上一段代码:<scripttype=”text/javascript”>vara=1;functiontest(){ alert(a); a=4; aler

大家好,又见面了,我是你们的朋友全栈君。

全局变量和局部变量

在看了一个博主写的关于js全局变量的的介绍后,自己也跟着做了一下,并且记录在这里。
原博客地址:谈谈JS的全局变量跟局部变量
博主说的比较详细,也比我的表达好。不过我的内容多了点东西,关于定义变量时不加var的影响,在文章的最后面。

先上一段代码:
<script type="text/javascript">        
        var a =1;
        function test(){
	        alert(a); 
	        a=4;
	        alert(a); 
	        var a;    
	        alert(a); 
    	}
    	test();
    	alert(a);
</script>

在网页里输出结果为:undefined > 4 > 4 > 1

原因是:
全局变量a在外部被定义,可以在全局被使用,所以最后alert(a)显示的是1。而在方法内重新var a;相当于重新定义了一个局部变量a,会在这个方法内把全局变量的作用域掩盖,而js在执行之前的扫描检测机制会使得function内部的全局变量作用能力提前失效。这段代码就相当于:

<script type="text/javascript">        
        var a =1;
        function test(){
         	var a;     //相当于声明被提前了
	        alert(a); 
	        a=4;
	        alert(a); 
	        alert(a); 
    	}
    	test();
    	alert(a);
</script>
再看:
<script type="text/javascript">        
        var a =1;
        function test(){
	        var a = 2;
	        alert(window.a);
	        alert(a);
    	}
    	test();
    	alert(a);
</script>

输出结果为:1 > 2 > 1
和java的继承有点相似,function相当于子类,会遮盖父类信息,但是如果使用super.属性依旧会看得到父类信息,这里window就像是父类。

不一样的是: java在for,if,while内定义的变量不会在他们的范围外保留,但是:

<script type="text/javascript">        
        for(var i=0;i<2;i++){
            alert(i);
        }
        alert(i)
</script>

输出结果是:0 > 1 > 2
在for循环外部,i也被保留改动了,而i是在for循环内被定义的。while和if同样如此。

还有,在定义变量时不加var

定义变量不加var,相当于在定义全局变量

<script type="text/javascript">        
        i = 2;
        function test(){
            n = 2;
            i = 3;
            alert(n);
            alert(i);
        }
        test()
        alert(n)
        alert(i)
</script>

输出结果为:2 > 3 > 2 > 3
n在function内部被定义成全局变量,所以在外部也能被访问到
但是如果在定义n时前面加上var

<script type="text/javascript">        
        i = 2;
        function test(){
            var n = 2; //加上了var
            i = 3;
            alert(n);
            alert(i);
        }
        test()
        alert(n)
        alert(i)
</script>

结果为:2 > 3
没了!最后的alert(i)被强制中断了。在控制台可以看到出现了错误:
在这里插入图片描述
说n没有被定义,因为在内部加上了var,就相当于在当前域定义变量,而当前域是function

那么你再猜一猜下面的结果是什么?:
<script type="text/javascript">        
            i = 2;
            function test(){
                alert(i);
                i = 3;
                alert(i);
            }
            test()
           	alert(i)
</script>

输出结果为:2 > 3 > 3
因为在内部并没有重新定义i,而唯一改变的i = 3;是在检测到i在外部定义后作出的改变,所以i不会被覆盖作用域,test()里第一个alert能够看到外部i的值。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/140963.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 目标检测的图像特征提取之(三)Haar特征

    目标检测的图像特征提取之(三)Haar特征目标检测的图像特征提取之(三)Haar特征zouxy09@qq.com1、Haar-like特征      Haar-like特征最早是由Papageorgiou等应用于人脸表示,Viola和Jones在此基础上,使用3种类型4种形式的特征。Haar特征分为三类:边缘特征、线性特征、中心特征和对角线特征,组合成特征模板。特征模板内有白色和黑色两种矩形,并定义该模板的特征值为白色矩

    2022年4月20日
    49
  • HTTP详解(1)-工作原理「建议收藏」

    HTTP详解(1)-工作原理「建议收藏」1.HTTP简介HTTP协议(HyperTextTransferProtocol,超文本传输协议)是用于从WWW服务器传输超文本到本地浏览器的传送协议。它可以使浏览器更加高效,使网络传输减少。它不仅保证计算机正确快速地传输超文本文档,还确定传输文档中的哪一部分,以及哪部分内容首先显示(如文本先于图形)等。在了解HTTP如何工作之前,我…

    2022年6月7日
    27
  • 3月第二周回顾:思科牵手IBM Oracle挑战SAP

    3月第二周回顾:思科牵手IBM Oracle挑战SAP

    2021年7月24日
    54
  • nginx和apache的区别[通俗易懂]

    nginx和apache的区别[通俗易懂]简单的说apachehttpd和nginx都是web服务器,但两者适应的场景不同,也就是两者专注于解决不同的问题。apachehttpd:稳定、对动态请求处理强,但同时高并发时性能较弱,耗费资源多。nginx:高并发处理能力强、擅长处理静态请求、反向代理、均衡负载。在这篇文章详细列出了apache与nginx的13个异同点,下面我们来一一分析其原理。1、nginx相对于apache的优点:轻量级,同样起web服务,比apache占用更少的内存及资源,抗并发,nginx处理请求是异

    2022年6月13日
    40
  • javascript实现一个自制网页音乐播放器

    javascript实现一个自制网页音乐播放器序接触简书也有一段日子了,这中间的时光还是比较轻松加愉快的,那种可以和他人分享知识的欣喜和愉悦的确是非常棒。我一向都是觉得专心写自己的文就可以了,不会总是纠结有多少人在看,有多少点击等等。用心写好自己的文,体会那种分享的快乐,就可以了。之前写的《js常用方法和一些封装》系列暂且告一段落,接下来,我会通过各种案例,来分享javascript的各种技巧,所以最终将这个系列的名称定为:《从案例中学习

    2022年6月18日
    25
  • python实现求和,求平均值——函数

    python实现求和,求平均值——函数#求三个数的和defsum(a,b,c):returna+b+cx=int(input("请输入第一个数:"))y=int(input("请输入第二个数:&

    2022年7月5日
    22

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号