前端必知：JavaScript中的闭包

JS中的闭包

闭包的一般理解为:定义在函数内部的函数。外部函数返回的是内部函数。

我们可以把闭包简单理解成“定义在一个函数内部的函数”，当然，也可以是多个函数内部的函数，一定是函数嵌套，定义在函数内部的函数。外部函数返回的是内部函数。
　 闭包有两个作用，一是将内部函数作为返回值，可以让外部函数调用。二是这些返回值始终保存在内存中，影响内存。

例1：
function parent(){
  var a=123;
    function son(){
        console.log(a);
    }
    //将son函数作为返回值返回给外部
    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].onclick=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].onclick=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

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