閉包的學習與總結

YanceyOfficial 發布于2019-08-23 16:18 / 1512人閱讀

摘要：第一部分執行代碼之后，返回了一個新的匿名函數，此時在全局作用域調用匿名函數它不在是的屬性或者方法，此時調用者是因此輸出是。總結關于中的，記住誰調用，就指向誰要訪問閉包的，要定義個變量緩存下來。

前言:
這是一篇關于閉包函數的總結和筆記

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

一: js中的命名函數,匿名函數,自調用函數和回調函數
1.命名函數: 函數如果有名字,就是命名函數

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

2.匿名函數: 函數如果沒有名字,就是匿名函數

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

3.自調用函數: 自己調用自己

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

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

4.回調函數: 回調函數就是一個參數將這個函數作為參數傳到另一個函數里面當那個函數執行完之后，再執行傳進去的這個函數。

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

二: 函數的語法
1.函數聲明

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

2.表達式聲明

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

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

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

2.定時器

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

3.變量存儲

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

4.對象方法

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

四: 閉包函數
閉包有三個特性：函數嵌套函數; 函數內部可以引用外部的參數和變量; 參數和變量不會被垃圾回收機制回收
閉包的好處是：1.希望一個變量長期駐扎在內存中 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 ( ) {
                //函數嵌套函數
                x++;
                alert(x);
              }
        }

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

04 經典例子

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 為外部匿名函數的返回值
            var a = 1;
            return function ( ) {
                a++;
                alert(a);
              }
        }());
        abc();   // 2  // 調用一次abc函數,其實就是調用里面內部函數的返回值
        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 使用匿名函數實現累加
使用匿名函數實現局部變量駐留在內存中,從而實現累加

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

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

08 閉包作為參數傳遞

        var num = 15;
        var fn1 = function (x) {
            if(x > num){
                console.log( x );
            }
        }
        void function (fn2) {
            var num = 100;
            fn2(30);
        }(fn1);   // 30
        // void  相當于匿名函數的自調用
        // fn2是當做參數傳進來的  不是在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);

閉包的應用場景
一.點擊li標簽,出現對應的索引


        你好我是循環閉包中的第0個
        你好我是循環閉包中的第1個
        你好我是循環閉包中的第2個
        你好我是循環閉包中的第3個
        你好我是循環閉包中的第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)
        //當點擊之前,循環已結束;所以i的值為別.children.length;

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

  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))
        }
        //相當于同時啟動3個定時器，i*1000是為5個定時器分別設置了不同的時間，同時啟動，
        //但是執行時間不同，每個定時器間隔都是1000毫秒，實現了每隔1000毫秒就執行一次打印的效果。

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

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

云服務器 GPU云服務器機器學習學習總結機器學習總結 javascript學習總結機器學習培訓總結

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/102888.html

通過示例學習JavaScript閉包

摘要：譯者按在上一篇博客，我們通過實現一個計數器，了解了如何使用閉包，這篇博客將提供一些代碼示例，幫助大家理解閉包。然而，如果通過代碼示例去理解閉包，則簡單很多。不過，將閉包簡單地看做局部變量，理解起來會更加簡單。 - 譯者按: 在上一篇博客，我們通過實現一個計數器，了解了如何使用閉包(Closure)，這篇博客將提供一些代碼示例，幫助大家理解閉包。原文: JavaScript Clos...

xingpingz 2019-08-22 10:54 評論0 收藏0
JavaScript - 收藏集 - 掘金

摘要：插件開發前端掘金作者原文地址譯者插件是為應用添加全局功能的一種強大而且簡單的方式。提供了與使用掌控異步前端掘金教你使用在行代碼內優雅的實現文件分片斷點續傳。 Vue.js 插件開發 - 前端 - 掘金作者：Joshua Bemenderfer原文地址: creating-custom-plugins譯者：jeneser Vue.js插件是為應用添加全局功能的一種強大而且簡單的方式。插....

izhuhaodev 2019-08-21 11:44 評論0 收藏0
JS筆記

摘要：從最開始的到封裝后的都在試圖解決異步編程過程中的問題。為了讓編程更美好，我們就需要引入來降低異步編程的復雜性。異步編程入門的全稱是前端經典面試題從輸入到頁面加載發生了什么這是一篇開發的科普類文章，涉及到優化等多個方面。 TypeScript 入門教程從 JavaScript 程序員的角度總結思考，循序漸進的理解 TypeScript。網絡基礎知識之 HTTP 協議詳細介紹 HTT...

rottengeek 2019-08-22 13:58 評論0 收藏0
JS框架 - 收藏集 - 掘金

摘要：現在回過頭總結，才又進一步的揭開了閉包的一層后臺管理系統解決方案前端掘金基于系列的后臺管理系統解決方案。什么是繼承大多數人使用繼承不外乎是為了獲得基于的單頁應用項目模板前端掘金小貼士本項目已升級至。關于js、jq零碎知識點 - 掘金寫在前面：本文都是我目前學到的一些比較零碎的知識點，也是相對偏一點的知識，這是第二篇。前后可能沒有太大的相關性，需要的朋友可以過來參考下，喜歡的可以點個...

wenyiweb 2019-08-20 16:27 評論0 收藏0
Python

摘要：最近看前端都展開了幾場而我大知乎最熱語言還沒有相關。有關書籍的介紹，大部分截取自是官方介紹。但從開始，標準庫為我們提供了模塊，它提供了和兩個類，實現了對和的進一步抽象，對編寫線程池進程池提供了直接的支持。《流暢的python》閱讀筆記《流暢的python》是一本適合python進階的書, 里面介紹的基本都是高級的python用法. 對于初學python的人來說, 基礎大概也就夠用了...

dailybird 2019-07-30 15:13 評論0 收藏0