JS作用域与闭包详解-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_35260622/article/details/52317267

js作用域

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <script>
            //【变量提升】
            console.log("h="+h);//并未报错出现,undefined;
            var h = 20;
            /*上面写法其实就是下面这种：
             * var h ;//将后面所出现的变量提升，但赋值并未提升，故h是为定义
             * console.log(h);
             * h = 20;
             */
            var a = 10; //全局
            for(var i = 0 ; i < 2; i++){
                var b = 10;
            }
            for(var i = 0; i < 3; i++) {
                var a = i; //此处a和外部a同处一个全局作用域，所以覆盖
            }
            if(a==2) {//a通过上层for变为2
                var c = 10; //全局
                e = 20; //全局
            }
            console.log("b=" + b + " 说明for(中b是全局变量)"); //b=10;
            console.log("a=" + a + " 说明for(中a是全局变量)"); //a=2;
            console.log("c=" + c + " 说明if(中c是全局变量)"); //c=10;
            console.log("e=" + e + " 说明if(中未定义的e是全局变量)");//e=20

            function text() {
                var d = 20; //局部，出作用域就被销毁释放，外部无法访问
            }
            text();
//          alert(d);//error:d is not a defined;(函数中d是局部变量)

            //总结:
            //【1】:没用var定义的变量为全局变量(严格模式不支持)
            //【2】:function函数内部定义的变量称之为局部变量，除此之外都是全局变量

//-----------------------------------------------------------------------------

            // 外内部存在同名变量，内部没有该变量的定义
            var f = 6;
            function demo(){
                console.log("f= "+f);//f=6  f来自外部全局变量
                f = 12;
                return f;
            }
            console.log("demo()函数f返回值："+demo());//f=12


            // 外内部存在同名变量，内部有该变量的定义
            var g = 6;
            function demo2(){
                console.log("g= "+g);//g = undefine;   g在本局域函数块中找到g的变量的定义，但并未赋值故出现undefine
                var g = 14;
                return g;
            }
            console.log("demo2()函数g返回值："+demo2());//f=14

            //总结:
            //外内部存在同名变量，需要先判断内部有没有重新新定义这个变量，
            //【1】:若重新定义，那就用新定义的 
            //【2】:否则用外部作用域的变量；
            //【作用域链】：先在本局域块中找，该变量是否定义以及赋值，若没有则往父级作用域去寻找，当到全局中还未找到，则报错;


        </script>
    </body>

</html>

匿名函数

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <script>
            //函数有：匿名+具名
            //匿名函数：变量调用|自执行|事件调用
            window.onload = function() {
                for(var i = 1; i < 4; i++) {
                    var btn = document.getElementById("button" + i);
                    //函数自执行
                    (function(num) {
                        btn.onclick = function() {
                            alert("button" + num);
                        }
                    })(i);
                }
            }
            //【2】变量调用
            /*var demo = function (){
                console.log("我是变量调用的函数");
            }
            demo();*/

            //【3】给事件添加匿名函数，匿名函数可以当作参数来传递
            //匿名函数可以当作返回值，返回出去；
            /*      setInterval(function(){
                    },20);
            */

            //【4】:普通函数
            function box(){
                return "hello";
            }
        </script>

    </head>
    <body>
        <input type="button" id="button1" value="button1" />
        <input type="button" id="button2" value="button2" />
        <input type="button" id="button3" value="button3" />
    </body>

</html>

闭包

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script>
        //闭包：
        //【1】:读取函数内部的变量
        //【2】:让这些变量始终都保存在内存中
            function fun1(){
                var a = 10;
                 d = function(){//d未定义   故为全局变量，外部可访问
                    console.log("a= "+(a+1));
                }
                function fun2(){
                     a=20;
                    console.log("a= "+a);
                }
                return fun2;
            }
            var t = fun1();
            t();//a=20
            d();//a=21

        </script>
    </body>
</html>

JS作用域函数闭包