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

แชร์
ฝัง
  • เผยแพร่เมื่อ 28 ส.ค. 2024

ความคิดเห็น • 39

  • @james-kool
    @james-kool  2 หลายเดือนก่อน +4

    影片中範例: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

  • @gjuoun
    @gjuoun 2 หลายเดือนก่อน +22

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

    • @user-zh3hm3wb8q
      @user-zh3hm3wb8q หลายเดือนก่อน

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

  • @wojohn6441
    @wojohn6441 2 หลายเดือนก่อน +4

    很棒的讲解 ! 赞

  • @TomycatOWO
    @TomycatOWO 2 หลายเดือนก่อน +2

    感謝老師的乾貨

  • @Rose2642
    @Rose2642 2 หลายเดือนก่อน

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

  • @have-bear
    @have-bear 2 หลายเดือนก่อน +1

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

    • @bardeebooboo
      @bardeebooboo 2 หลายเดือนก่อน

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

  • @CornuDev
    @CornuDev 2 หลายเดือนก่อน

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

  • @594wei
    @594wei 2 หลายเดือนก่อน

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

  • @fay-sx4ys
    @fay-sx4ys หลายเดือนก่อน

    javascript 是我一個欣賞的語言

  • @fentengshi9543
    @fentengshi9543 2 หลายเดือนก่อน

    把编程讲得如此的帅

  • @lzh97
    @lzh97 2 หลายเดือนก่อน +1

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

  • @MADorMad
    @MADorMad 2 หลายเดือนก่อน

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

  • @jingsuantan2304
    @jingsuantan2304 2 หลายเดือนก่อน +1

    获益良多

  • @reahtuoo
    @reahtuoo 2 หลายเดือนก่อน +4

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

    • @user-ek8nc4is4r
      @user-ek8nc4is4r 2 หลายเดือนก่อน +1

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

    • @reahtuoo
      @reahtuoo 2 หลายเดือนก่อน

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

    • @samuelpedrochao7423
      @samuelpedrochao7423 หลายเดือนก่อน +1

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

  • @haoareyou_kiko
    @haoareyou_kiko 2 หลายเดือนก่อน

    讚讚!

  • @yuwei5833
    @yuwei5833 2 หลายเดือนก่อน +3

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

    • @timchen8512
      @timchen8512 2 หลายเดือนก่อน +1

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

    • @timchen8512
      @timchen8512 2 หลายเดือนก่อน +2

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

    • @bardeebooboo
      @bardeebooboo 2 หลายเดือนก่อน

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

    • @ac.23z
      @ac.23z 2 หลายเดือนก่อน +1

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

    • @reahtuoo
      @reahtuoo 2 หลายเดือนก่อน +2

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

  • @allenytw
    @allenytw 2 หลายเดือนก่อน +1

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

  • @vvh04rn12
    @vvh04rn12 2 หลายเดือนก่อน

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

    • @reahtuoo
      @reahtuoo 2 หลายเดือนก่อน

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

  • @tishow8239
    @tishow8239 2 หลายเดือนก่อน

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

  • @garyallison9257
    @garyallison9257 หลายเดือนก่อน

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

  • @samuelpedrochao7423
    @samuelpedrochao7423 หลายเดือนก่อน

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

  • @junjason4114
    @junjason4114 2 หลายเดือนก่อน +1

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

  • @clouddash-qp9tq
    @clouddash-qp9tq หลายเดือนก่อน

    Closure 就是在上層函數的變數

  • @borislai9970
    @borislai9970 2 หลายเดือนก่อน

    好像有點像 React 中的 useState()

  • @chu-kuanchang693
    @chu-kuanchang693 2 หลายเดือนก่อน

    Closure is poor man's OOP

  • @coldheart9014
    @coldheart9014 2 หลายเดือนก่อน +2

    有像封裝和依賴注入耶

  • @ziv4380
    @ziv4380 2 หลายเดือนก่อน

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