什麼是閉包(closure)？解說+範例【JavaScript基礎】

[@james-kool]

影片中範例：blog.jameskool.com/blog/closure 副頻道：www.youtube.com/@james-clips 程式語言課程：jameskool.com/p/javascript-course-v2 ig：instagram.com/jameskool.official/ Patreon會員專屬影片：www.patreon.com/user?u=99360097

[@wojohn6441]

很棒的讲解 ！ 赞

[@gjuoun]

并不是很赞同这种写法， 用得不好就等于 callback hell. 在没有类型的JS 不仅写起来会非常累，也不利于阅读

[@簡月-n6j]

寫得不好，或遇到需求修改，又增加工作機會了!

[@TomycatOWO]

感謝老師的乾貨

[@fay-sx4ys]

javascript 是我一個欣賞的語言

[@lzh97]

當我們要在函數式風格裡實現工廠模式跟控制反轉的時候，Closure 也能派上用場喔

[@Rose2642]

這系列很讚! 希望多多出!

[@fentengshi9543]

把编程讲得如此的帅

[@have-bear]

閉包是從函數式編程來的概念 對於純函數式編程來說 回傳能存取區域變數的函式是基礎能力 （事實上只需要這個能力就能實現圖靈完備的機器） 因為變數不能被修改 函式帶有的資訊是被複製還是只是參考並不重要 （基本上都是使用參考, 這稱為綁定） 而「閉包」強調的只是使用參考的實現方式 但對於允許修改變數的程式語言這種差別就很重要 因此才有閉包的概念 而閉包也是最原始的物件導向的基礎

[@bardeebooboo]

但純函數的前題不是不變性嗎？ 這樣不就不是純函數了嗎？

[@594wei]

好清楚呀!! 超容易懂的!!

[@CornuDev]

後面給了實際案例，非常有幫助:D (雖然我是寫swift，still helpful)

[@MADorMad]

上面已經被建構過該函式，所以只要使用就代表引用的是該函式的內容 又因為該函式回應的是子函式，所以你要使用被建構好的函式只能用呼叫的方法 像是如果採取counter1而不是counter1() 那麼程式回應的不是指標就是出錯

[@jingsuantan2304]

获益良多

[@genenwvrvrjfjdjeugwevwgjercqfn]

比較難以理解的是為什麼 在 makeCounter 移出 call stack 後 counter1 依然可以存取 父層的變數環境，覺得拿closure的scope chain 類比 全局執行上下文與 function scope 的關係是不是怪怪的?

[@reahtuoo]

closure沒有class的繼承性質，我想這樣講會更好區分使用closure與class的時機

[@黑草草草]

closure是函式，class的實例會是object，可以這樣來區分嗎

[@reahtuoo]

@@黑草草草 NO，closure本質上你也可以return一個object，所以不能這樣分。 你也可以用closure設計出class，但沒有這麼做的必要。

[@samuelpedrochao7423]

js的class就是用constructor function包起來的糖 依照這個範例提到的要放API這件事 如果同樣結構的包會有兩組以上的API資料 然後這兩組以上的資料又會在多處各自使用 就可以把底層那層結構包一包 然後開API資料的口給外面 然後各組API的包再去擴展底層這個包 然後在每個用到的地方透過new或是呼叫的方式call來用就好了

[@garyallison9257]

感觉就像一个callback, 将calculation 抽象出来到一方法中

[@haoareyou_kiko]

讚讚！

[@coldheart9014]

有像封裝和依賴注入耶

[@yuwei5833]

我很好奇以現在的前端環境 有什麼情況一定會用到閉包嗎 工作多年但我從來沒用過

[@timchen8512]

Es6 class 打包成 es5 你會發現 其實就是用閉包實作的 所以在 es6以前，你想要用 class 就是用閉包

[@timchen8512]

現在用到的機會不多，因為難以維護，不建議直接使用，除非你只能使用 es5 （不太可能） 現代瀏覽器都直接支援 es6了

[@bardeebooboo]

不想額外寫class但想要持有狀態的話蠻好用的 而且可以寫得更FP一點也很舒服

[@ac.23z]

印象中 redux 或 vuex 的 store 可以存取變數的概念就是用 closure

[@reahtuoo]

用到的機會很少很少，因為當初閉包用得最頻繁的情境就是ES6之前只有不具有block作用域的var，為避免汙染或重複存取只能使用閉包。 但現在有let和const這些具有block作用域性質的了，基本上用不太到

[@junjason4114]

那个例子好像就跟partial application一样了

[@tishow8239]

想請教終端機是什麼主題，謝謝

[@vvh04rn12]

請問一下閉包跟封裝差別在哪? 我在此之前一直以為兩者是相同意思😮, 看你前面的例子都跟封裝一樣, 在外面只能通過一個特別留下的方法去改變內部狀態, 但最後的例子的finalPrice的計算資料包括取得discountCalculator的方法全都在外面也就說不是封裝了, 但我看只是processProducts方法裏沒有直接存取userDiscount 和 categoryDiscounts 只是委託discountCalculator 方法去計數每一個product的最終價錢。如果createDiscountCalaculater在processProducts裏被call是不是就等於是跟一般做法另外起一個新的方法把原有的code拆分開一樣？那這樣就不算閉包了嗎？是不是要processProducts的方法裏不要直接存取到那個await回來的資料才算是閉包? 請大家指點迷津！

[@reahtuoo]

閉包跟封裝很相似，我覺得最好判斷的依據是：有一個東西從生成開始，他內部就不會被外部修改。 例如他舉的折扣那個例子，他return的折扣規則function，在生成開始就不會被更改了~ 所以就算我後面改變了折扣數字，已經生成的規則仍然不會改變，這就是避免污染的一種

[@chu-kuanchang693]

Closure is poor man's OOP

[@borislai9970]

好像有點像 React 中的 useState()

[@ziv4380]

我會覺得跟.net的委派有點類似 每次看到這種寫法腦筋都會轉不過來 orz

[@samuelpedrochao7423]

我覺得一開始看不懂包其實不是不知道語法或代碼邏輯 而是不知道為什麼要用包 包要怎麼用 寫包的時候其實要想的是要包哪些東西進去 留哪些開口放東西 拿東西 包哪些 放哪些 拿哪些 其實都跟維護性跟重用性有關 如果這個包的API會有3+以上的組合 然後這些組合又有3+以上 那可以考慮寫一個底層包 然後再把各個組合的API包一層上去 然後再各自使用的位置call這些包來用 如果底層結構改變 可以直接改底層結構 如果API資料改變 可以改資料那層的包 如果是相同邏輯跟結構的東西 API通常也會長差不多 概念上就跟OOP的interface或abstract class一樣

[@allenytw]

超級不直觀的用法, arg drill 是怕你傳的東西太大, 同一個var裡不需要的資料太多, 那你可以直接傳每個product要用的資料更好吧, unit test裡也不用去判斷找出來, 更加純粹的去計算 price after discount