摘要:這時,就需要神奇的閉包了。將局部函數返回。唯一的不同點在于將計數器封裝在一個函數內,于是我們將它稱作閉包。閉包,與相似,就是把數據和操作數據的方法綁定起來。總結閉包是一個非常棒的特性。
譯者按: 從最簡單的計數器開始,按照需求對代碼一步步優化,我們可以領會閉包的神奇之處。
原文: Closures are not magic
譯者: 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以及本文地址:
https://blog.fundebug.com/201...
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/84716.html
摘要:閉包就好像從中分離出來的一個充滿神秘色彩的未開化世界,只有最勇敢的人才能到達那里。興奮地趕緊自測咔咔咔連點三下。結果當時內心表情大概就像上面這個哥們。但還是在工位上故作鎮定地趕緊百度了下。 ? 閉包就好像從JavaScript中分離出來的一個充滿神秘色彩的未開化世界,只有最勇敢的人才能到達那里。——《你不知道的JavaScript 上卷》 1、起源 js閉包很長一...
摘要:忍者級別的函數操作對于什么是匿名函數,這里就不做過多介紹了。我們需要知道的是,對于而言,匿名函數是一個很重要且具有邏輯性的特性。通常,匿名函數的使用情況是創建一個供以后使用的函數。 JS 中的遞歸 遞歸, 遞歸基礎, 斐波那契數列, 使用遞歸方式深拷貝, 自定義事件添加 這一次,徹底弄懂 JavaScript 執行機制 本文的目的就是要保證你徹底弄懂javascript的執行機制,如果...
摘要:插件開發前端掘金作者原文地址譯者插件是為應用添加全局功能的一種強大而且簡單的方式。提供了與使用掌控異步前端掘金教你使用在行代碼內優雅的實現文件分片斷點續傳。 Vue.js 插件開發 - 前端 - 掘金作者:Joshua Bemenderfer原文地址: creating-custom-plugins譯者:jeneser Vue.js插件是為應用添加全局功能的一種強大而且簡單的方式。插....
摘要:擴展閱讀收集的前端面試題和答案前端開發面試題史上最全的前端面試題匯總及答案前端工程師手冊協議工作原理協議運行機制的概述 本書的 GitHub 地址:https://github.com/todayqq/PH... 對于大公司,很少會有全棧工程師這個崗位,全棧是個花哨的詞,對于現在比較熱門的技術,不論是 Vue 還是 Laravel,只要智商不差,看著文檔,都能寫出一個 CURD 來,...
摘要:前端日報精選一行代碼的逆向工程譯只需四個步驟使用實現頁面過渡動畫如何實現一個基于的模板引擎解剖組件的多種寫法與演進深入理解筆記擴展對象的功能性中文基礎系列一之實現抽獎刮刮卡橡皮擦掘金小游戲個人文章和最常用的特征眾成翻譯常用語法總 2017-08-08 前端日報 精選 一行 JavaScript 代碼的逆向工程【譯】只需四個步驟:使用 React 實現頁面過渡動畫如何實現一個基于 DOM...
閱讀 2504·2021-11-15 11:38
閱讀 1948·2021-11-05 09:37
閱讀 2257·2021-10-08 10:12
閱讀 2807·2019-08-30 15:55
閱讀 2112·2019-08-30 15:52
閱讀 1221·2019-08-29 13:24
閱讀 463·2019-08-26 18:27
閱讀 1473·2019-08-26 18:27