一区二区三区在线-一区二区三区亚洲视频-一区二区三区亚洲-一区二区三区午夜-一区二区三区四区在线视频-一区二区三区四区在线免费观看

服務器之家:專注于服務器技術及軟件下載分享
分類導航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服務器之家 - 編程語言 - JavaScript - js教程 - js閉包的9個使用場景

js閉包的9個使用場景

2021-12-22 15:54林恒 js教程

這篇文章主要介紹了js 閉包的9個使用場景,幫助大家更好的理解和學習JavaScript 閉包的使用,感興趣的朋友可以了解下

1.返回值(最常用)

//1.返回值 最常用的
    function fn(){
        var name="hello";
        return function(){
            return name;
        }
    }
    var fnc = fn();
    console.log(fnc())//hello

這個很好理解就是以閉包的形式將 name 返回。

2.函數賦值

var fn2;
function fn(){
    var name="hello";
    //將函數賦值給fn2
    fn2 = function(){
        return name;
    }
}
fn()//要先執行進行賦值,
console.log(fn2())//執行輸出fn2

在閉包里面給fn2函數設置值,閉包的形式把name屬性記憶下來,執行會輸出 hello。

3.函數參數

function fn(){
    var name="hello";
    return function callback(){
        return name;
    }
}
var fn1 = fn()//執行函數將返回值(callback函數)賦值給fn1,
 
function fn2(f){
    //將函數作為參數傳入
    console.log(f());//執行函數,并輸出
}
fn2(fn1)//執行輸出fn2

用閉包返回一個函數,把此函數作為另一個函數的參數,在另一個函數里面執行這個函數,最終輸出 hello

4.IIFE(自執行函數)

(function(){
        var name="hello";
        var fn1= function(){
            return name;
        }
        //直接在自執行函數里面調用fn2,將fn1作為參數傳入
        fn2(fn1);
    })()
    function fn2(f){
        //將函數作為參數傳入
        console.log(f());//執行函數,并輸出
    }

直接在自執行函數里面將封裝的函數fn1傳給fn2,作為參數調用同樣可以獲得結果 hello

5.循環賦值

//每秒執行1次,分別輸出1-10
for(var i=1;i<=10;i++){
    (function(j){
        //j來接收
        setTimeout(function(){
            console.log(j);
        },j*1000);
    })(i)//i作為實參傳入
}

如果不采用閉包的話,會有不一樣的情況,可以看我自己 閉包 的文章。

6.getter和setter

function fn(){
        var name="hello"
        setName=function(n){
            name = n;
        }
        getName=function(){
            return name;
        }
         
        //將setName,getName作為對象的屬性返回
        return {
            setName:setName,
            getName:getName
        }
    }
    var fn1 = fn();//返回對象,屬性setName和getName是兩個函數
    console.log(fn1.getName());//getter
        fn1.setName("world");//setter修改閉包里面的name
    console.log(fn1.getName());//getter

第一次輸出 hello 用setter以后再輸出 world ,這樣做可以封裝成公共方法,防止不想暴露的屬性和函數暴露在外部。

7.迭代器(執行一次函數往下取一個值)

var arr =["aa","bb","cc"];
function incre(arr){
    var i=0;
    return function(){
        //這個函數每次被執行都返回數組arr中 i下標對應的元素
         return arr[i++] || "數組值已經遍歷完";
    }
}
var next = incre(arr);
console.log(next());//aa
console.log(next());//bb
console.log(next());//cc
console.log(next());//數組值已經遍歷完

8.首次區分(相同的參數,函數不會重復執行)

var fn = (function(){
               var arr=[];//用來緩存的數組
                   return function(val){
                       if(arr.indexOf(val)==-1){//緩存中沒有則表示需要執行
                           arr.push(val);//將參數push到緩存數組中
                           console.log("函數被執行了",arr);
                           //這里寫想要執行的函數
                       }else{
                           console.log("此次函數不需要執行");
                       }
                       console.log("函數調用完打印一下,方便查看已緩存的數組:",arr);
                   }
               })();
        
       fn(10);
       fn(10);
       fn(1000);
       fn(200);
       fn(1000);

執行結果如下:

js閉包的9個使用場景

可以明顯的看到首次執行的會被存起來,再次執行直接取。

9.緩存

//比如求和操作,如果沒有緩存,每次調用都要重復計算,采用緩存已經執行過的去查找,查找到了就直接返回,不需要重新計算
      
     var fn=(function(){
        var cache={};//緩存對象
        var calc=function(arr){//計算函數
            var sum=0;
            //求和
            for(var i=0;i<arr.length;i++){
                sum+=arr[i];
            }
            return sum;
        }
         
        return function(){
            var args = Array.prototype.slice.call(arguments,0);//arguments轉換成數組
            var key=args.join(",");//將args用逗號連接成字符串
            var result , tSum = cache[key];
            if(tSum){//如果緩存有   
                console.log("從緩存中取:",cache)//打印方便查看
                result = tSum;
            }else{
                //重新計算,并存入緩存同時賦值給result
                result = cache[key]=calc(args);
                console.log("存入緩存:",cache)//打印方便查看
            }
            return result;
        }
     })();
    fn(1,2,3,4,5);
    fn(1,2,3,4,5);
    fn(1,2,3,4,5,6);
    fn(1,2,3,4,5,8);
    fn(1,2,3,4,5,6);

輸出結果:

js閉包的9個使用場景

以上就是js閉包的9個使用場景的詳細內容,更多關于js 閉包使用場景的資料請關注服務器之家其它相關文章!

原文鏈接:https://www.cnblogs.com/smileZAZ/p/14189126.html

延伸 · 閱讀

精彩推薦
  • js教程JavaScript實現滾動加載更多

    JavaScript實現滾動加載更多

    這篇文章主要為大家詳細介紹了JavaScript實現滾動加載更多,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下...

    予傾9862021-12-20
  • js教程基于javascript實現移動端輪播圖效果

    基于javascript實現移動端輪播圖效果

    這篇文章主要為大家詳細介紹了基于javascript實現移動端輪播圖效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下...

    A.香辣雞腿堡8962021-12-15
  • js教程微信小程序實現modal彈出框遮罩層組件(可帶文本框)

    微信小程序實現modal彈出框遮罩層組件(可帶文本框)

    這篇文章主要給大家介紹了關于微信小程序實現modal彈出框遮罩層組件(可帶文本框)的相關資料,文中通過示例代碼介紹的非常詳細,對大家的學習或者...

    BadmintonCode3462021-12-15
  • js教程微信小程序實現可拖動懸浮圖標(包括按鈕角標的實現)

    微信小程序實現可拖動懸浮圖標(包括按鈕角標的實現)

    這篇文章主要介紹了微信小程序實現可拖動懸浮圖標(包括按鈕角標的實現),本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考...

    юноша7062021-12-21
  • js教程微信小程序自定義支持圖片的彈窗

    微信小程序自定義支持圖片的彈窗

    這篇文章主要為大家詳細介紹了微信小程序自定義支持圖片的彈窗,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下...

    歲末Zzz8112021-12-15
  • js教程微信小程序視頻彈幕發送功能的實現

    微信小程序視頻彈幕發送功能的實現

    這篇文章主要介紹了微信小程序視頻彈幕發送功能的實現,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的...

    保護我方豆豆4782021-12-21
  • js教程JavaScript實現原型封裝輪播圖

    JavaScript實現原型封裝輪播圖

    這篇文章主要為大家詳細介紹了JavaScript原型封裝輪播圖,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下...

    zyhyoustrive12002021-12-21
  • js教程js實現隨機點名功能

    js實現隨機點名功能

    這篇文章主要為大家詳細介紹了js實現隨機點名功能,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下...

    等待的L先生4852021-12-16
主站蜘蛛池模板: aa视频免费 | 国产一级在线观看 | 国产精品99爱免费视频 | 91麻豆精东果冻天美传媒老狼 | 吃瓜视频在线观看 | 亚洲视频在线观看不卡 | 亚洲高清视频在线观看 | 欧美日韩一二三区免费视频观看 | 亚洲精品色综合久久 | 美国女艳星brandilove | 国产精品aaa | bl超h 高h 污肉快穿np | 亚洲国产精品第一区二区三区 | 亚洲欧美日韩国产综合专区 | 国内精品久久久久久中文字幕 | 男人好大好硬好爽免费视频 | 亚洲欧洲日产国码天堂 | 欧美日韩国产亚洲人成 | 日本激情网站 | 四虎 2022 永久网站 | 日产乱码卡一卡2卡三卡四福利 | 91桃色视频在线观看 | 丫鬟粗大狠狠贯穿h | 精品久久成人免费第三区 | 亚洲国产精品久久网午夜小说 | 哇嘎在线精品视频在线观看 | 免费91麻豆精品国产自产在线观看 | 美女1819xxxx| 青青精品视频 | 黑人chinese女人 | 免费91麻豆精品国产自产在线观看 | 紧致肉肉高h| 日出水了特别黄的视频 | 222aaa精品影院| 色老女人 | 办公室出轨秘书高h | 天天色综合久久 | 精品suv一区二区三区 | 亚洲美女爱爱 | 日日免费视频 | 亚洲天天综合网 |