解密JavaScript閉包
譯者按: 從最簡單的計數器開始,按照需求對程式碼一步步優化,我們可以領會閉包的神奇之處。
譯者: Fundebug
為了保證可讀性,本文采用意譯而非直譯。另外,本文版權歸原作者所有,翻譯僅用於學習。
對於JavaScript新手來說,閉包(Closures)是一個很神奇的東西。這篇部落格將通過一個非常淺顯的程式碼示例來解釋閉包。
計數器
我們的目標是實現一個計數器,它的效果如下:
increment(); // Number of events: 1
increment(); // Number of events: 2
increment(); // Number of events: 3
可知,每次執行increment()都會輸出"Number of events: N",且N每次都會加1。
這個計數器最直觀的實現方式如下:
var counter = 0;
function increment()
{
counter = counter + 1;
console.log("Number of events: " + counter);
}
多個計數器
以上的程式碼非常簡單。但是,當我們需要第二個計數器時,就會遇到問題了。當然,我們可以實現兩個重複的計數器:
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
顯然,以上的程式碼非常冗餘,有待優化。當我們需要更多計數器時,使用這種方法將不太現實。這時,就需要神奇的閉包了。
使用閉包實現計數器
需要多個計數器,同時希望去除冗餘程式碼的話,就可以使用閉包了:
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
在程式碼中,我們建立了兩個獨立的計數器counter1與counter2,分別進行計數,互不幹撓。程式碼看著有點奇怪,我們不妨拆分起來分析。
首先,我們來看看createCounter:
- 建立了一個區域性變數counter
- 建立了一個區域性函式increment(),它可以對counter變數進行加1操作。
- 將區域性函式increment()返回。注意,返回的是函式本身,而不是函式呼叫的結果。
看起來,createCounter()函式與我們最初定義的計數器非常相似。唯一的不同點在於:createCounter()將計數器封裝在一個函式內,於是我們將它稱作閉包。
難以理解的一點在於,當我們使用createCounter()函式建立計數器時,實際上建立了一個新的函式:
// fancyNewCounter是一個新建立的函式
var fancyNewCounter = createCounter();
閉包的神奇之處在於。每次使用createCounter()函式建立計數器increment時,都會建立一個對應的counter變數。並且,返回的increment函式會始終記住counter變數。
更重要的是,這個counter變數是相互獨立的。比如,當我們建立2個計數器時,每個計數器都會建立一個新的counter變數:
// 每個計數器都會從1開始計數
var counter1 = createCounter();
counter1(); // Number of events: 1
counter1(); // Number of events: 2
// 第1個計數器不會影響第2個計數器
var counter2 = createCounter();
counter2(); // Number of events: 1
// 第2個計數器不會影響第1個計數器
counter1(); // Number of events: 3
為計數器命名
多個計數器的輸出資訊都是“Number of events: N”,這樣容易混淆。如果可以為每個計數器命名,則更加方便:
var catCounter = createCounter("cats");
var dogCounter = createCounter("dogs");
catCounter(); // Number of cats: 1
catCounter(); // Number of cats: 2
dogCounter(); // Number of dogs: 1
通過給createCounter傳遞一個新的counterName引數,可以很容易地做到這一點:
function createCounter(counterName)
{
var counter = 0;
function increment()
{
counter = counter + 1;
console.log("Number of " + counterName + ": " + counter);
}
return increment;
}
這樣,createCounter()函式返回的計數器將同時記住兩個區域性變數:counterName與counter。
優化計數器呼叫方式
按照之前的實現方式,我們通過呼叫createCounter()函式可以返回一個計數器,直接呼叫返回的計數器就可以加1,這樣做並不直觀。如果可以如下呼叫將更好:
var dogCounter = createCounter("dogs");
dogCounter.increment(); // Number of dogs: 1
實現程式碼:
function createCounter(counterName)
{
var counter = 0;
function increment()
{
counter = counter + 1;
console.log("Number of " + counterName + ": " + counter);
};
return { increment : increment };
}
可知,以上的程式碼返回了一個物件,這個物件包含了一個increment方法。
新增decrement方法
現在,我們可以給計數器新增一個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
新增私有方法
前面的程式碼有兩行重複的程式碼,即console.log語句。因此,我們可以建立一個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()函式與increment()函式以及decrement()函式差不多,但是其實它們很不一樣。我們並沒有將display()函式新增到返回的物件中,這就意味著以下程式碼會出錯:
var dogsCounter = createCounter("dogs");
dogsCounter.display(); // ERROR !!!
這時,display()相當於一個私有方法,我們只能在createCounter()函式內使用它。
閉包與物件導向程式設計
如果你接觸過物件導向程式設計(OOP),則應該不難發現本文中所涉及的內容與OOP中的類、物件、物件屬性、共有方法與私有方法等概念非常相似。
閉包,與OOP相似,就是把資料和運算元據的方法繫結起來。因此,在需要OOP的時候,就可以使用閉包來實現。
總結
閉包(Closure)是JavaScript一個非常棒的特性。掌握它,我們可以從容應對一些常見的程式設計需求。
關於Fundebug
Fundebug專注於JavaScript、微信小程式、微信小遊戲、支付寶小程式、React Native、Node.js和Java實時BUG監控。 自從2016年雙十一正式上線,Fundebug累計處理了7億+錯誤事件,得到了Google、360、金山軟體、百姓網等眾多知名使用者的認可。歡迎免費試用!
版權宣告:
轉載時請註明作者Fundebug以及本文地址:
https://blog.fundebug.com/2017/07/31/javascript-closure/
相關文章
- JavaScript閉包JavaScript
- JavaScript - 閉包JavaScript
- JavaScript 閉包JavaScript
- [JavaScript閉包]Javascript閉包的判別,作用和示例JavaScript
- 閉包 | 淺談JavaScript閉包問題JavaScript
- JavaScript-閉包JavaScript
- JavaScript 的閉包JavaScript
- 理解JavaScript 閉包JavaScript
- JavaScript之閉包JavaScript
- JavaScript 閉包基本指南JavaScript
- JavaScript 閉包那些事JavaScript
- 理解Javascript的閉包JavaScript
- JavaScript閉包詳解JavaScript
- Javascript—閉包詳解(3)JavaScript
- 理解 JavaScript 中的閉包JavaScript
- 對javascript閉包的理解JavaScript
- javascript之溫習閉包JavaScript
- JavaScript —— this、閉包、原型、非同步JavaScript原型非同步
- 深入淺出Javascript閉包JavaScript
- Javascript中的閉包encloureJavaScript
- Javascript 閉包並非魔法JavaScript
- Javascript-this/作用域/閉包JavaScript
- JavaScript閉包的那些事~JavaScript
- JavaScript之作用域和閉包JavaScript
- javascript中閉包是什麼JavaScript
- javascript閉包的個人理解JavaScript
- 簡單介紹JavaScript閉包JavaScript
- javascript 基礎(作用域和閉包)JavaScript
- JavaScript閉包原理與用法例項JavaScript
- JavaScript4:函式和閉包JavaScript函式
- 前端戰五渣學JavaScript——閉包前端JavaScript
- 【譯】理解JavaScript閉包——新手指南JavaScript
- 進擊的 JavaScript(四) 之 閉包JavaScript
- Javascript深入之作用域與閉包JavaScript
- javascript中的閉包closure詳解JavaScript
- 1.13 JavaScript4:函式和閉包JavaScript函式
- JavaScript夯實基礎系列(二):閉包JavaScript
- JavaScript物件導向~ 作用域和閉包JavaScript物件
- javascript閉包的使用–按鈕切換JavaScript