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-10
for(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());//getter
fn1.setName('world');//setter修改閉包里面的name
console.log(fn1.getName());//getter
第一次輸出hello
用sette
r以后再輸出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());//aa
console.log(next());//bb
console.log(next());//cc
console.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);
image.png
可以明顯的看到首次執(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í)賦值給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);
image.png