您好,登錄后才能下訂單哦!
譯者按: 從最簡單的計(jì)數(shù)器開始,按照需求對代碼一步步優(yōu)化,我們可以領(lǐng)會(huì)閉包的神奇之處。
原文: Closures are not magic
對于JavaScript新手來說,閉包(Closures)是一個(gè)很神奇的東西。這篇博客將通過一個(gè)非常淺顯的代碼示例來解釋閉包。
我們的目標(biāo)是實(shí)現(xiàn)一個(gè)計(jì)數(shù)器,它的效果如下:
increment(); // Number of events: 1
increment(); // Number of events: 2
increment(); // Number of events: 3
可知,每次執(zhí)行increment()都會(huì)輸出"Number of events: N",且N每次都會(huì)加1。
這個(gè)計(jì)數(shù)器最直觀的實(shí)現(xiàn)方式如下:
var counter = 0;
function increment()
{
counter = counter + 1;
console.log("Number of events: " + counter);
}
以上的代碼非常簡單。但是,當(dāng)我們需要第二個(gè)計(jì)數(shù)器時(shí),就會(huì)遇到問題了。當(dāng)然,我們可以實(shí)現(xiàn)兩個(gè)重復(fù)的計(jì)數(shù)器:
var counter1 = 0;
function incrementCounter1()
{
counter1 = counter1 + 1;
console.log("Number of events: " + counter1);
}
var counter2 = 0;
function incrementCounter2()
{
counter2 = counter2 + 1;
console.log("Number of events: " + counter2);
}
incrementCounter1(); // Number of events: 1
incrementCounter2(); // Number of events: 1
incrementCounter1(); // Number of events: 2
顯然,以上的代碼非常冗余,有待優(yōu)化。當(dāng)我們需要更多計(jì)數(shù)器時(shí),使用這種方法將不太現(xiàn)實(shí)。這時(shí),就需要神奇的閉包了。
需要多個(gè)計(jì)數(shù)器,同時(shí)希望去除冗余代碼的話,就可以使用閉包了:
function createCounter()
{
var counter = 0;
function increment()
{
counter = counter + 1;
console.log("Number of events: " + counter);
}
return increment;
}
var counter1 = createCounter();
var counter2 = createCounter();
counter1(); // Number of events: 1
counter1(); // Number of events: 2
counter2(); // Number of events: 1
counter1(); // Number of events: 3
在代碼中,我們創(chuàng)建了兩個(gè)獨(dú)立的計(jì)數(shù)器counter1與counter2,分別進(jìn)行計(jì)數(shù),互不干撓。代碼看著有點(diǎn)奇怪,我們不妨拆分起來分析。
首先,我們來看看createCounter:
看起來,createCounter()函數(shù)與我們最初定義的計(jì)數(shù)器非常相似。唯一的不同點(diǎn)在于:createCounter()將計(jì)數(shù)器封裝在一個(gè)函數(shù)內(nèi),于是我們將它稱作閉包。
難以理解的一點(diǎn)在于,當(dāng)我們使用createCounter()函數(shù)創(chuàng)建計(jì)數(shù)器時(shí),實(shí)際上創(chuàng)建了一個(gè)新的函數(shù):
// fancyNewCounter是一個(gè)新創(chuàng)建的函數(shù)
var fancyNewCounter = createCounter();
閉包的神奇之處在于。每次使用createCounter()函數(shù)創(chuàng)建計(jì)數(shù)器increment時(shí),都會(huì)創(chuàng)建一個(gè)對應(yīng)的counter變量。并且,返回的increment函數(shù)會(huì)始終記住counter變量。
更重要的是,這個(gè)counter變量是相互獨(dú)立的。比如,當(dāng)我們創(chuàng)建2個(gè)計(jì)數(shù)器時(shí),每個(gè)計(jì)數(shù)器都會(huì)創(chuàng)建一個(gè)新的counter變量:
// 每個(gè)計(jì)數(shù)器都會(huì)從1開始計(jì)數(shù)
var counter1 = createCounter();
counter1(); // Number of events: 1
counter1(); // Number of events: 2
// 第1個(gè)計(jì)數(shù)器不會(huì)影響第2個(gè)計(jì)數(shù)器
var counter2 = createCounter();
counter2(); // Number of events: 1
// 第2個(gè)計(jì)數(shù)器不會(huì)影響第1個(gè)計(jì)數(shù)器
counter1(); // Number of events: 3
多個(gè)計(jì)數(shù)器的輸出信息都是“Number of events: N”,這樣容易混淆。如果可以為每個(gè)計(jì)數(shù)器命名,則更加方便:
var catCounter = createCounter("cats");
var dogCounter = createCounter("dogs");
catCounter(); // Number of cats: 1
catCounter(); // Number of cats: 2
dogCounter(); // Number of dogs: 1
通過給createCounter傳遞一個(gè)新的counterName參數(shù),可以很容易地做到這一點(diǎn):
function createCounter(counterName)
{
var counter = 0;
function increment()
{
counter = counter + 1;
console.log("Number of " + counterName + ": " + counter);
}
return increment;
}
這樣,createCounter()函數(shù)返回的計(jì)數(shù)器將同時(shí)記住兩個(gè)局部變量:counterName與counter。
按照之前的實(shí)現(xiàn)方式,我們通過調(diào)用createCounter()函數(shù)可以返回一個(gè)計(jì)數(shù)器,直接調(diào)用返回的計(jì)數(shù)器就可以加1,這樣做并不直觀。如果可以如下調(diào)用將更好:
var dogCounter = createCounter("dogs");
dogCounter.increment(); // Number of dogs: 1
實(shí)現(xiàn)代碼:
function createCounter(counterName)
{
var counter = 0;
function increment()
{
counter = counter + 1;
console.log("Number of " + counterName + ": " + counter);
};
return { increment : increment };
}
可知,以上的代碼返回了一個(gè)對象,這個(gè)對象包含了一個(gè)increment方法。
現(xiàn)在,我們可以給計(jì)數(shù)器添加一個(gè)decrement()方法
function createCounter(counterName)
{
var counter = 0;
function increment()
{
counter = counter + 1;
console.log("Number of " + counterName + ": " + counter);
};
function decrement()
{
counter = counter - 1;
console.log("Number of " + counterName + ": " + counter);
};
return {
increment : increment,
decrement : decrement
};
}
var dogsCounter = createCounter("dogs");
dogsCounter.increment(); // Number of dogs: 1
dogsCounter.increment(); // Number of dogs: 2
dogsCounter.decrement(); // Number of dogs: 1
前面的代碼有兩行重復(fù)的代碼,即console.log語句。因此,我們可以創(chuàng)建一個(gè)display()方法用于打印counter的值:
function createCounter(counterName)
{
var counter = 0;
function display()
{
console.log("Number of " + counterName + ": " + counter);
}
function increment()
{
counter = counter + 1;
display();
};
function decrement()
{
counter = counter - 1;
display();
};
return {
increment : increment,
decrement : decrement
};
}
var dogsCounter = createCounter("dogs");
dogsCounter.increment(); // Number of dogs: 1
dogsCounter.increment(); // Number of dogs: 2
dogsCounter.decrement(); // Number of dogs: 1
看起來,display()函數(shù)與increment()函數(shù)以及decrement()函數(shù)差不多,但是其實(shí)它們很不一樣。我們并沒有將display()函數(shù)添加到返回的對象中,這就意味著以下代碼會(huì)出錯(cuò):
var dogsCounter = createCounter("dogs");
dogsCounter.display(); // ERROR !!!
這時(shí),display()相當(dāng)于一個(gè)私有方法,我們只能在createCounter()函數(shù)內(nèi)使用它。
如果你接觸過面向?qū)ο缶幊?OOP),則應(yīng)該不難發(fā)現(xiàn)本文中所涉及的內(nèi)容與OOP中的類、對象、對象屬性、共有方法與私有方法等概念非常相似。
閉包,與OOP相似,就是把數(shù)據(jù)和操作數(shù)據(jù)的方法綁定起來。因此,在需要OOP的時(shí)候,就可以使用閉包來實(shí)現(xiàn)。
閉包(Closure)是JavaScript一個(gè)非常棒的特性。掌握它,我們可以從容應(yīng)對一些常見的編程需求。
Fundebug專注于JavaScript、微信小程序、微信小游戲、支付寶小程序、React Native、Node.js和Java實(shí)時(shí)BUG監(jiān)控。 自從2016年雙十一正式上線,F(xiàn)undebug累計(jì)處理了7億+錯(cuò)誤事件,得到了Google、360、金山軟件、百姓網(wǎng)等眾多知名用戶的認(rèn)可。歡迎免費(fèi)試用!
轉(zhuǎn)載時(shí)請注明作者Fundebug以及本文地址:
https://blog.fundebug.com/2017/07/31/javascript-closure/
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。