成人在线亚洲_国产日韩视频一区二区三区_久久久国产精品_99国内精品久久久久久久

您的位置:首頁技術(shù)文章
文章詳情頁

js閉包的9個(gè)使用場景

瀏覽:123日期:2024-04-09 10:23:26
1.返回值(最常用)

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

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

2.函數(shù)賦值

var fn2;function fn(){ var name='hello'; //將函數(shù)賦值給fn2 fn2 = function(){return name; }}fn()//要先執(zhí)行進(jìn)行賦值,console.log(fn2())//執(zhí)行輸出fn2

在閉包里面給fn2函數(shù)設(shè)置值,閉包的形式把name屬性記憶下來,執(zhí)行會(huì)輸出 hello。

3.函數(shù)參數(shù)

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

用閉包返回一個(gè)函數(shù),把此函數(shù)作為另一個(gè)函數(shù)的參數(shù),在另一個(gè)函數(shù)里面執(zhí)行這個(gè)函數(shù),最終輸出 hello

4.IIFE(自執(zhí)行函數(shù))

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

直接在自執(zhí)行函數(shù)里面將封裝的函數(shù)fn1傳給fn2,作為參數(shù)調(diào)用同樣可以獲得結(jié)果 hello

5.循環(huán)賦值

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

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

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是兩個(gè)函數(shù) console.log(fn1.getName());//getterfn1.setName(’world’);//setter修改閉包里面的name console.log(fn1.getName());//getter

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

7.迭代器(執(zhí)行一次函數(shù)往下取一個(gè)值)

var arr =[’aa’,’bb’,’cc’];function incre(arr){ var i=0; return function(){//這個(gè)函數(shù)每次被執(zhí)行都返回?cái)?shù)組arr中 i下標(biāo)對應(yīng)的元素 return arr[i++] || ’數(shù)組值已經(jīng)遍歷完’; }}var next = incre(arr);console.log(next());//aaconsole.log(next());//bbconsole.log(next());//ccconsole.log(next());//數(shù)組值已經(jīng)遍歷完8.首次區(qū)分(相同的參數(shù),函數(shù)不會(huì)重復(fù)執(zhí)行)

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

執(zhí)行結(jié)果如下:

js閉包的9個(gè)使用場景

可以明顯的看到首次執(zhí)行的會(huì)被存起來,再次執(zhí)行直接取。

9.緩存

//比如求和操作,如果沒有緩存,每次調(diào)用都要重復(fù)計(jì)算,采用緩存已經(jīng)執(zhí)行過的去查找,查找到了就直接返回,不需要重新計(jì)算 var fn=(function(){var cache={};//緩存對象var calc=function(arr){//計(jì)算函數(shù) 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轉(zhuǎn)換成數(shù)組 var key=args.join(',');//將args用逗號連接成字符串 var result , tSum = cache[key]; if(tSum){//如果緩存有 console.log(’從緩存中取:’,cache)//打印方便查看result = tSum; }else{//重新計(jì)算,并存入緩存同時(shí)賦值給resultresult = 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);

輸出結(jié)果:

js閉包的9個(gè)使用場景

以上就是js閉包的9個(gè)使用場景的詳細(xì)內(nèi)容,更多關(guān)于js 閉包使用場景的資料請關(guān)注好吧啦網(wǎng)其它相關(guān)文章!

標(biāo)簽: JavaScript
相關(guān)文章: