摘要：第一部分執(zhí)行代碼之后，返回了一個新的匿名函數(shù)，此時在全局作用域調(diào)用匿名函數(shù)它不在是的屬性或者方法，此時調(diào)用者是因此輸出是?？偨Y(jié)關(guān)于中的，記住誰調(diào)用，就指向誰要訪問閉包的，要定義個變量緩存下來。

前言:
這是一篇關(guān)于閉包函數(shù)的總結(jié)和筆記

希望對大家有點幫助
寫的不好的地方,也請大家多多指教

一: js中的命名函數(shù),匿名函數(shù),自調(diào)用函數(shù)和回調(diào)函數(shù)
1.命名函數(shù): 函數(shù)如果有名字,就是命名函數(shù)

function f1( ) {
            console.log("我就是命名函數(shù)");
        }

2.匿名函數(shù): 函數(shù)如果沒有名字,就是匿名函數(shù)

(function () {
            console.log("我就是匿名函數(shù)");
        })   

3.自調(diào)用函數(shù): 自己調(diào)用自己

var f2 = function () {
            console.log("你好");
        };
        f2();

fn里面存儲的是函數(shù)體代碼,通過fn()的方式調(diào)用. 匿名函數(shù)自調(diào)用: 在匿名函數(shù)后面加括號,里面外面都可以; 也可以在函數(shù)前用 ! + -;
原因：js只能識別表達(dá)式（由運(yùn)算符組成的式子） 與 語句( 程序流程控制 );讓匿名函數(shù)可以調(diào)用原理：將匿名函數(shù)變成表達(dá)式

4.回調(diào)函數(shù): 回調(diào)函數(shù)就是一個參數(shù)將這個函數(shù)作為參數(shù)傳到另一個函數(shù)里面當(dāng)那個函數(shù)執(zhí)行完之后，再執(zhí)行傳進(jìn)去的這個函數(shù)。

function f3(fn) {
            fn();  //函數(shù)調(diào)用 --- 說明fn這個變量中存儲的是一個函數(shù)
        };
        function f4() {
            console.log("函數(shù)可以作為參數(shù)使用")
        }
        f3(f4);   // 調(diào)用f3,將f4作為參數(shù)使用        

二: 函數(shù)的語法
1.函數(shù)聲明

 function f5() {
            console.log("我是函數(shù)聲明");
        };
        f5()

2.表達(dá)式聲明

var f6 = function () {
        console.log("我是表達(dá)式聲明");
    };
    f6();

三: 匿名函數(shù)的四種常見場景
1.注冊事件

 document.querySelector("#btn").onclick = function () {
            console.log("我是匿名函數(shù)調(diào)用的一種場景");
        };

2.定時器

setInterval(function () {
            console.log("我是定時器中的匿名函數(shù)");
        },1000);

3.變量存儲

 var f7 = function () {
            console.log("我是變量存儲中的函數(shù)");
        };

4.對象方法

var obj = {
            name: "拉克絲",
            say: function () {
                console.log(this.name);
            }
        };
        obj.say();

四: 閉包函數(shù)
閉包有三個特性： 函數(shù)嵌套函數(shù); 函數(shù)內(nèi)部可以引用外部的參數(shù)和變量; 參數(shù)和變量不會被垃圾回收機(jī)制回收
閉包的好處是：1.希望一個變量長期駐扎在內(nèi)存中 2.避免全局變量的污染 3.私有成員的存在

01 全局變量的累加

 var a = 1;
        function f7( ){
            a++;
            alert(a);
        }

        f7();    // 2
        f7();    // 3
        f7();    // 4

02 局部變量

function f8( ){
            var a = 1;
            a++;
            alert(a);
        }
 
        f8();  // 2
        f8();  // 2
        f8();  // 2

03 局部變量的累加

 function outer( ){
            var x = 10;
            return function ( ) {
                //函數(shù)嵌套函數(shù)
                x++;
                alert(x);
              }
        }

        //外部函數(shù)只調(diào)用一次,得到的同一個變量
        var y = outer();   //外部函數(shù)賦值給變量y  調(diào)用一次外部函數(shù),得到一個閉包函數(shù)
        y();      // 11    //調(diào)用閉包函數(shù),返回內(nèi)部變量
        y();      // 12
        y();      // 13
        
        outer()();  // 11
        outer()();  // 11
        outer()();  // 11

04 經(jīng)典例子

function fn() {
            var num = 3;
            return function () {
                var n = 0;
                console.log(++n);
                console.log(++num);
            }
        }
        var fn1 = fn();   
        fn1()   // 1   4
        fn1()   // 1   5
        fn1()   // 1   6
        
        fn()()  // 1   4
        fn()()  // 1   4
        fn()()  // 1   4

05 模塊化代碼,減少全局變量的污染

var abc = (function ( ) {
            //abc 為外部匿名函數(shù)的返回值
            var a = 1;
            return function ( ) {
                a++;
                alert(a);
              }
        }());
        abc();   // 2  // 調(diào)用一次abc函數(shù),其實就是調(diào)用里面內(nèi)部函數(shù)的返回值
        abc();   // 3
        abc()    // 4

06 私有成員的存在

 var aaa = (function ( ) {
            var a = 1;
            function bbb( ) {
                a++;
                alert(a);
            }
            function ccc( ) {
                a++;
                alert(a);
            }
            return {
                b: bbb,   
                c: ccc
            }
        })();

          aaa.b();  // 2
          aaa.c();  // 3
          aaa.b();  // 4
          aaa.c();  // 5

07 使用匿名函數(shù)實現(xiàn)累加
使用匿名函數(shù)實現(xiàn)局部變量駐留在內(nèi)存中,從而實現(xiàn)累加

function aaa( ) {
            var a = 10;
            return function ( ) {  //匿名函數(shù)
            a++;
            return a;
            };
        }

        var y = aaa();
        alert(y());   //  11
        alert(y());  //   12
        alert(y());  //   13

08 閉包作為參數(shù)傳遞

        var num = 15;
        var fn1 = function (x) {
            if(x > num){
                console.log( x );
            }
        }
        void function (fn2) {
            var num = 100;
            fn2(30);
        }(fn1);   // 30
        // void  相當(dāng)于匿名函數(shù)的自調(diào)用
        // fn2是當(dāng)做參數(shù)傳進(jìn)來的  不是在void里面聲明的  是在全局作用域里聲明的 所以拿的是num=15   所以打印出來30

對上題有疑惑的,可以看下面這個

 var num = 15;
        var fn1 = function (x) {
            if(x > num){
                console.log( x );   // 30
            }
        }
        void function (fn2) {
            var num = 100;
            fn2(30);
            function fn3(x) {
                console.log( num );  // 100
                if(x < num){
                    console.log( x );  //30
                }
            }
            fn3(30)
        }(fn1);   

閉包的應(yīng)用場景
一.點擊li標(biāo)簽,出現(xiàn)對應(yīng)的索引

        
你好我是循環(huán)閉包中的第0個
        
你好我是循環(huán)閉包中的第1個
        
你好我是循環(huán)閉包中的第2個
        
你好我是循環(huán)閉包中的第3個
        
你好我是循環(huán)閉包中的第4個
    

1.js中添加索引的做法

 var ul1 = document.getElementById("ul1");
        for(var i = 0; i < ul1.children.length; i++){
            ul1.children[i].setAttribute("index",i);
            ul1.children[i].onclick = function () {
                console.log(this.getAttribute("index"))
            }
        };

2.jQuery中index做法

  $(function () {
            var index = null;
            $("li").on("click",function () {
                index = $(this).index();
                console.log(index);
            });
        })

3.閉包的處理

     var ul1 = document.getElementById("ul1");
        //錯誤的做法
        function showLiNum(ul1) {
            for(var i = 0; i < ul1.children.length; i++){
                ul1.children[i].onclick = function () {
                    console.log(i);
                }
            }
        }
        showLiNum(ul1)
        //當(dāng)點擊之前,循環(huán)已結(jié)束;所以i的值為別.children.length;

正解:利用一個閉包,建立一個匿名函數(shù);將每個i存在內(nèi)存中.onclick函數(shù)用的時候提取出外部匿名函數(shù)的值

  function showLiNum(ul1) {
            for(var i = 0; i < ul1.children.length; i++){
              (function (i) {
                  ul1.children[i].onclick = function () {
                      console.log(i);
                  }
              }(i));
            }
        }
        showLiNum(ul1)

也可以這樣

  function showLiNum(ul1) {
            for(var i = 0; i < ul1.children.length; i++){
                ul1.children[i].onclick = (function (i) {
                    return function () {
                        console.log(i);
                    }
                }(i));
            }
        }
        showLiNum(ul1);

二.定時器
開啟定時器,分別打印1,2,3,4,5

錯誤的寫法:

        for(var i = 1; i <= 5; i++){
            setTimeout(function () {
                console.log(i);
            },1000)
        }

正確寫法

 for(var i = 1; i <= 5; i++){
            (function (i) {
                setTimeout(function () {
                    console.log(i);
                },i*1000);
            }(i))
        }
        //相當(dāng)于同時啟動3個定時器，i*1000是為5個定時器分別設(shè)置了不同的時間，同時啟動，
        //但是執(zhí)行時間不同，每個定時器間隔都是1000毫秒，實現(xiàn)了每隔1000毫秒就執(zhí)行一次打印的效果。

經(jīng)典面試題
最后上一道閉包中的經(jīng)典面試題,如果你能弄懂這個,那說明閉包弄懂的差不多啦

 var name = "The Window";
        var obj = {
            name : "The object",
            getNameFunc : function(){
                return function(){
                    return this.name;
                }
            }
        }
        alert( obj. getNameFunc()() )  

        var name = "The Window";
        var obj = {
            name : "The object",
            getNameFunc : function(){
                var that = this;
                return function(){
                    return that.name;
                }
            }
        }
        alert( obj. getNameFunc()() )           

javascript是動態(tài)（或者動態(tài)類型）語言，this關(guān)鍵字在執(zhí)行的時候才能確定是誰。所以this永遠(yuǎn)指向調(diào)用者，即對"調(diào)用對象"的引用; "誰調(diào)用,指向誰"。
第一部分執(zhí)行代碼object.getNameFunc()之后，返回了一個新的匿名函數(shù)，此時在全局作用域調(diào)用匿名函數(shù),它不在是object的屬性或者方法，此時調(diào)用者是window,因此輸出是 The Window。
第二部分，當(dāng)執(zhí)行函數(shù)object.getNameFunc()后返回的是：function( ){return that.name;}此時的that=this。而this指向object，所以that指向object。他是對object的引用，所以輸出The Object。
總結(jié)：關(guān)于js中的this，記住誰調(diào)用，this就指向誰；要訪問閉包的this，要定義個變量緩存下來。一般var that(_this) = this。