JavaScript閉包原理分析

Maxiye 發布于2019-08-20 14:40 / 3248人閱讀

寫了幾個小例子揭示JS中閉包的本質，適合自己運行后分析。

HTML文件





    
    Test

JS代碼

$(function () {


    /*
    給6個按鈕綁定事件，點擊打印按鈕的序號
     */
    for (var i = 0; i < 6; i++) {
        $("button").eq(i).on("click", function () {
            console.log(i);
        });
    }

    /*
    解決方案一：借用DOM元素的屬性存儲序號i
     */
    for (var i = 0; i < 6; i++) {
        $("button").eq(i).attr("i", i).on("click", function () {
            console.log($(this).attr("i"));
        });
    }


    /*
    解決方案二：利用IIFE將i作為參數傳遞給內部函數
     */
    for (var i = 0; i < 6; i++) {
        (function (i) {
            $("button").eq(i).on("click", function () {
                console.log(i);
            });
        })(i);
    }

    /*
    錯誤方案：IIFE使用位置錯誤
     */
    for (var i = 0; i < 6; i++) {
        $("button").eq(i).on("click", function () {
            (function (i) {
                console.log(i);
            })(i);
        });
    }

    /*
    解決方案三：利用IIFE所創造的“塊級作用域”，將i賦值給局部變量
    */
    for (var i = 0; i < 6; i++) {
        (function () {
            var temp = i;
            $("button").eq(temp).on("click", function () {
                console.log(temp);
            });
        })();
    }

    /*
    什么是閉包？
    */
    function closure() {
        var i = 0;
        return function fun() {
            i++;
            console.log(i);
        }
    }

    var foo = closure();
    foo();
    foo();
    foo();

    var bar = closure();
    bar();
    bar();
    bar();

    $(".hide").show().on("click", foo)

});

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

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

對javascript中閉包的理解

摘要：在前端開發中閉包是一個很重要的知識點，是面試中一定會被問到的內容。閉包的用途閉包可以用在許多地方。這里僅僅是我對閉包的一些見解，若有錯誤的地方，還望大家提出，一起交流共同進步參考文獻你不知道的上卷深入理解系列在前端開發中閉包是一個很重要的知識點，是面試中一定會被問到的內容。之前我對閉包的理解主要是通過閉包可以在函數外部能訪問到函數內部的變量，對閉包運用的也很少，甚至自己寫過閉包自己都...

Enlightenment 2019-08-20 17:50 評論0 收藏0
【進階2-2期】JavaScript深入之從作用域鏈理解閉包

摘要：使用上一篇文章的例子來說明下自由變量進階期深入淺出圖解作用域鏈和閉包訪問外部的今天是今天是其中既不是參數，也不是局部變量，所以是自由變量。（關注福利，關注本公眾號回復[資料]領取優質前端視頻，包括Vue、React、Node源碼和實戰、面試指導）本周正式開始前端進階的第二期，本周的主題是作用域閉包，今天是第7天。本計劃一共28期，每期重點攻克一個面試重難點，如果你還不了解本進階計...

simpleapples 2019-08-23 13:47 評論0 收藏0
你不知道的JavaScript·第一部分

摘要：空格一般沒意義會被忽略解析語法分析這個過程會將詞法單元轉換成抽象語法樹。小結本章節我們深入理解了的作用域，提升，閉包等概念，希望你能有所收獲，下一部分整理下解析對象原型等一些概念。第一章：作用域是什么 1、編譯原理 JavaScript 被列為 ‘動態’ 或 ‘解釋執行’ 語言，于其他傳統語言（如 java）不同的是，JavaScript是邊編譯邊執行的。一段源碼在執行前會經歷三...

Tonny 2019-08-22 18:18 評論0 收藏0
十分鐘快速了解《你不知道的 JavaScript》（上卷）

摘要：最近剛剛看完了你不知道的上卷，對有了更進一步的了解。你不知道的上卷由兩部分組成，第一部分是作用域和閉包，第二部分是和對象原型。附錄詞法這一章并沒有說明機制，只是介紹了中的箭頭函數引入的行為詞法。第章混合對象類類理論類的機制類的繼承混入。最近剛剛看完了《你不知道的 JavaScript》上卷，對 JavaScript 有了更進一步的了解。《你不知道的 JavaScript》上卷由兩部...

趙春朋 2019-08-26 12:16 評論0 收藏0
前端基礎

摘要：談起閉包，它可是兩個核心技術之一異步基于打造前端持續集成開發環境本文將以一個標準的項目為例，完全拋棄傳統的前端項目開發部署方式，基于容器技術打造一個精簡的前端持續集成的開發環境。這一次，徹底弄懂 JavaScript 執行機制本文的目的就是要保證你徹底弄懂javascript的執行機制，如果讀完本文還不懂，可以揍我。不論你是javascript新手還是老鳥，不論是面試求職，還是日...

graf 2019-08-21 18:38 評論0 收藏0