iT邦幫忙

2022 iThome 鐵人賽

DAY 19
0
Modern Web

致 JavaScript 開發者的 Functional Programming 新手指南系列 第 19

Day 19:什麼是 Currying(1)?瀏覽器運作簡介

  • 分享至 

  • xImage
  •  

在先前的章節中,我們了解了 FP 一個最基礎的概念:純函式,其實光是了解及在自己的專案中實作 純函式,就可以讓程式碼乾淨不少,但在 FP 這個設計模式中,我們還有另外一個很好用的工具「柯里化(Currying)」。

關於科里化, 自己在第一次聽到這個技術時,其實有點不太理解,許多人在談論這個技術時,大部分都只有講到:「科里化是 FP 很重要的工具概念,所以你應該在自己的程式碼中使用它。」

相信不論是對我,或是對大家來說,這都是一個「很牽強」的理由,究竟科里化要解決什麼樣的問題?為什麼值得我們使用?

我認為這個工具與純函式一樣,同樣需要了解 JavaScript 本身的特性,才能更有目的性地使用這項工具。

在了解科里化究竟是什麼之前,我們要延續先前對於 JavaScript 特性本身的探討,在接下來的章節中,我們將要針對 JavaScript 的宿主環境、環境中的生態,及鼎鼎有名的「閉包」進行討論,累積了這些知識,才能更方便快速理解什麼是科里化。

在這個章節中,首先讓我們聊聊 JavaScript 的執行環境(Execution Context)。

在 ES6 中,ECMA 規範所謂的執行環境為:能讓程式碼被執行的環境,而執行環境會創造「堆疊(Stack)」。

如果你會覺得這短短一句非常負擔的話,那非常正常,因為執行環境會連結到許許多多的 JavaScript 概念:像是作用域(Scope)、執行堆疊(Callback stack)、閉包(Closure)等。

為了能讓大家更簡易的理解,這裡我們就從 JavaScript 運行的地方「瀏覽器」開始切入吧。

JavaScript 與瀏覽器標準化

在聊聊瀏覽器本身與 JavaScript 這門程式語言在瀏覽器中執行特性前,我們免不了還是要了解 JavaScript 的一些小歷史。

要用一個關鍵字說明 JavaScript 的興起,那可能會是:「社群」。

基本上,在現代網頁開發的世界中,有很多的工具都是某個工程師想要解決自己的問題,或是想要做一個 Side project 而誕生的產物,這樣的思維往回推個幾十年也同樣適用。

在 1960 年代,網路的技術興起,瀏覽器作為網路運行的載體也因此紅了起來,當然紅起來的東西就會有賺頭,各大資訊廠商紛紛開始為了打贏瀏覽器大戰,而開始各自瀏覽器實作之旅。

當然,JavaScript 與瀏覽器的興起還有許許多多精彩的故事可以聊,但最終為了全世界的網頁用戶可以更方便的使用網頁,且擁有更快的效能,網頁漸漸走向了標準化規範。

當然,其實網路早就有一系列的規範,但在 ECMA 2015(常稱為 ES6)規範後,瀏覽器對於 JavaScript 的各式 Web API 及實作規範支援地更加完整。

其中之一的規範便是 ES6 中所規範的「執行環境」了。

執行環境與單執行緒

說到執行環境為什麼會成為 JavaScript 及網頁實作規範,這還要說到 JavaScript 本身的特性了。

在前面的章節我們提到,JavaScript 與 Java 除了有型別上、設計模式上的差異,另外一個大概就是「執行緒(Thread)」的概念了。

與 Java 不同,JavaScript 屬於「單執行緒(single-thread)」,一次只能做一件事,然而網頁有許多需要等待的事件,例如:使用 SetTimeOut 撰寫計時器,或是進行網路請求,都會延宕網頁執行的效率,為了解決 JavaScript 本質上單執行緒的問題,就產生了 Event Loop 機制。

當 JavaScript 程式碼開始執行時,Event Loop 的機制就會開始執行,簡單來說這個機制運行的方式會是:

  1. 產生一個執行堆疊(Execution Stack),所有被觸發的事件都會進到這個堆疊中
  2. 萬一出現的非同步的行為,執行堆疊中的函式就會被排進任務佇列(Task Queue)中
  3. 當執行堆疊中的函式都執行完了之後,就會去執行佇列中等待的任務

以上大致是 Event Loop 的運作機制,當然其中簡化了很多細節,這裡可能會有人好奇:「我們不是要了解 FP,為什麼突然要來了解一大堆與瀏覽器的機制與 Event Loop 呢?」

其實接下來要了解「科里化」的話,Event loop 會是非常重要的基礎知識,但我們並不需要了解更仔細的 Event Loop 機制,因為那可能會偏離我們的話題主軸,在這邊我們的重點會是 Event loop 機制中的執行堆疊

了解執行堆疊的機制,可以幫助我們寫出效能更好的函式,在下個章節中我們將要細細聊聊執行堆疊的機制,那我們就下個章節見啦!

參考資料:

  1. ecma-262: Execution Context
  2. MDN - A re-introduction to JavaScript
  3. 阮一峰的網路日誌 - JavaScript 運行機制詳解:再談Event Loop

上一篇
Day 18:什麼是純函式 ?(5):結語
下一篇
Day 20 :什麼是 Currying(2)?JavaScript Call Stack
系列文
致 JavaScript 開發者的 Functional Programming 新手指南30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言