JavaScript閉包原理分析

Maxiye 發(fā)布于2019-08-20 14:40 / 3254人閱讀

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

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作為參數(shù)傳遞給內(nèi)部函數(shù)
     */
    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所創(chuàng)造的“塊級作用域”，將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)

});

GPU云服務(wù)器云服務(wù)器 javascript閉包 javascript閉包詳解 js跨域原理分析語音降噪圖形分析原理webrtc

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/81822.html

相關(guān)文章

對javascript中閉包的理解

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

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

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

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

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

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

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

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

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

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