JavaScript閉包原理分析

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

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

HTML文件





    
    Test

JS代碼

$(function () {


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

    /*
    解決方案一：借用DOM元素的屬性存儲(chǔ)序號(hào)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);
    }

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

    /*
    解決方案三：利用IIFE所創(chuàng)造的“塊級(jí)作用域”，將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跨域原理分析語(yǔ)音降噪圖形分析原理webrtc

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/81822.html

相關(guān)文章

對(duì)javascript中閉包的理解

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

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

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

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

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

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

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

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

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

graf 2019-08-21 18:38 評(píng)論0 收藏0