js中局部变量、全局变量、闭包

最新推荐文章于 2022-10-31 09:17:19 发布

瞧我的记性又把你当人看了

最新推荐文章于 2022-10-31 09:17:19 发布

阅读量571

点赞数 1

分类专栏： JS基础分享文章标签：局部变量 javascript 闭包全局变量

本文链接：https://blog.csdn.net/a976196371/article/details/52799542

版权

JS基础分享专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一、局部变量
什么是局部变量呢，我们先通过下面的代码了解一下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            function aa(){
                var a=88;
                //局部变量，只在aa()函数体里面起作用。
            }
            function bb(){
                alert(a);
            }
            bb();
        </script>
    </head>
    <body>
    </body>
</html>

现在有两个函数aa()，bb()；我现在调用函数bb()想让他弹出a的值。结果什么都没有。
这不是程序的问题，而实际是作用域的问题。
现在a；只在函数aa()中有作用，那么这个a就是局部变量。
那么如果函数bb()也要弹出a的值得话就得

function bb(){
                var a=88;
                alert(a);
            }

这样函数bb()也能弹出a的值88了，不过现在的a和上面函数里面的是不一样的。

二、全局变量
那么有局部变量肯定是有全局变量的。
所谓的全局变量，就是说他的作用域更大，比如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            var a=1314;
            function aa(){
                alert(a);
            }
            function bb(){

                alert(a);
            }
            bb();
        </script>
    </head>
    <body>
    </body>
</html>

现在的话a的值在外面，下面的函数aa()，bb()调用的时候都能弹出a的值。这个就就做全局变量。
但是这个很少用，尽量别用。就比如还是上面的函数但是多加个

var a=1314;
            function aa(){
                var a=520;
                alert(a);
            }

这个时候在调用函数aa()的时候弹出的就是他内部的520，而不是外部的1314了，所以说在实际应用中很容易重名，这样就会有影响。当然了如果只用一个名字，的时候也是可以用了。

三、闭包

闭包可以理解为子函数使用父函数的全局变量。
这个在实际应用中是经常用到的，我就举个例子说明吧

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #box{width: 200px;height: 200px;background: red;}
        </style>
        <script type="text/javascript">
            window.onload=function(){
            //父函数
                var oBox=document.getElementById("box");
                oBox.onmouseover=function(){
                //子函数
                    oBox.style.background='blueviolet';
                    //oBox 是在外面函数中声明的，但是在这个函数中可以使用
                }
                oBox.onmouseout=function(){
                    oBox.style.background='red';
                }
            }
        </script>
    </head>
    <body>
        <div id="box"></div>
    </body>
</html>