JavaScript中的闭包

JS中的闭包

闭包的一般理解为:从一个函数内部访问其外部函数的作用域。

我们可以把闭包简单理解成“定义在一个函数内部的函数”，当然，也可以是多个函数内部的函数，函数嵌套，定义在函数内部的函数。外部函数返回的是内部函数。

例1：
function parent(){
                var a=123;
                function son(){
                    console.log(a);
                }
                //返回内部的函数
                return son;
        }
        //声明一个变量，保存parent函数
        var test=parent();
        //执行函数
        test()//123

例2：
//函数累加器
        function add(){
            var num=0;
            function son(){
                console.log(++num);
            }
            return son;
        }
        var myadd=add();
        myadd();//1
        myadd();//2
        myadd();//3

例3：
function test(){
            var food="apple";
            //声明一个变量(对象)，并给它赋予两个函数
            var obj={
                //eat函数
                eat:function(){
                    if(food!=""){
                        console.log("I am eating "+food)
                        food=""
                    }
                    else{
                        console.log("Nothing")
                    }
                },
                //push函数,参数为myfood
                push:function(myfood){
                    food+=" "+myfood;
                }
            }          
            return obj;
        }
        //调用方法
        var mytest=test();
        mytest.eat();// 等同test().eat();结果：I am eating apple
        mytest.eat();//nothing
        mytest.push("banana");
        mytest.eat();//I am eating banana

例4：

        function test(){
            var arr=[];
            for (var i = 0; i < 10; i++) {
                    arr[i]=function(){
                    console.log(i);
                }
            }
            return arr;
        }
        var myarr=test();
        for(var j=0;j<10;j++)
        {
            myarr[j]();//调用数组中元素的function方法, console.log(i);
        }//结果是10个10，因为执行时i已经等于10

例5：典型例题
<ul>
         <li>1</li>
         <li>2</li>
         <li>3</li>
         <li>4</li>
 </ul>
 function test1(){
        var lis=document.getElementsByTagName("li");
        for(var i=0;i<lis.length;i++)
        {
            lis[i].function(){
                console.log(i);
            }

        }
    }
    test1();//点击结果全是4，闭包，运行onclick时i已经是4
   function test2(){
        var lis=document.getElementsByTagName("li");
        for(var i=0;i<lis.length;i++)
        {
            //立即执行函数
            (function(j){lis[j].function(){               
                console.log(j);
            }
            }(i))
        }
    }
    test2();//点击结果分别是：0,1,2,3

例6：大厂面试题
//例题
    a=100;
    function demo(e){
        function e(){}
        arguments[0]=2;//与e是映射关系，第一个实参等于2
        console.log(e);//2
        if(a){
            var b=123;
        }
        var c;
        a=10;
        var a;
        console.log(b);//undefined
        f=123;
        console.log(c);//undefined
        console.log(a);//10
    }
    var a;
    demo(1);//执行结果在函数后写有注释
    console.log(a);//100
    console.log(f);//123

闭包以及几个典型例子，总结分享。