JavaScript 中的同步與非同步(上):先成為 callback 大師吧!

前言

如果要舉出一個在 JavaScript 裡面很重要也很常用,但新手常常搞混的概念,那「非同步(Asynchronous)」當仁不讓,絕對是第一名。跟其他那些 thisclosureprototype 或是 hoisting 比起來,非同步在實際開發的時候用到的頻率高太多了,而且是初學者常常會踩坑的地方。

非同步真的那麼難嗎?

我相信不是的。只要循著一個正確的脈絡前進,就可以循序漸進理解為什麼需要非同步,也能知道在 JavaScript 裡面是怎麼處理這種操作的。

類似的主題我其實在四年前就寫過,但現在回頭看實在是寫得滿差的,所以四年後重新挑戰這個主題,希望能寫出一篇品質不錯的文章,把非同步這件事情講清楚。

在寫這篇文章之前,參考了 Node.js 的官方文件,發現在非同步的講解上其實做得不錯,因此本文會以類似的切入點開始談這個問題。如果不會 Node.js 也沒關係,我底下會稍微做點介紹。

建議閱讀本文以前需要具備 JavaScript 基礎,知道如何使用 JavaScript 操作 DOM,也知道什麼是 ajax。

接著就讓我們開始吧!

Read More...

理解 JavaScript 中物件的比大小行為

前言在 JavaScript 中很多行爲用其他程式語言的角度或是直觀角度來看都非常不合理。有些人知道這些行為,但不了解內部運作方式。而我自己在學習時,會嘗試了解內部的行為。了解過後,之後遇到同樣行為時,很自然的就知道某行為應該回傳什麼樣的值,而不再認為這是一顆地雷。 這篇文章要探討的是 JavaScript 在兩個物件中互相比較所用的依據為何。網路上大部分的文章都只有討論 ==, !=, === 以及 !==。這篇文章要探討的是 在兩個

Read More...

使用 JavaScript 處理二進位資料

由於高度封裝與抽象,JavaScript 的執行效率比不上 C 的語言。例如 JavaScript 的 Array 下標(subscript)是根據 hash key 而非實體記憶體位址 offset 取值,雖然方便,卻多了效能開銷。當 Canvas、WebGL、WebVR 開始走紅,效能越來越受重視,如何讓 JavaScript 達到如同 C 指標般操作 binary data 變得至關重要。

存在許久但最近才變為 ES6 標準「Typed Array」就是解放 JavaScript 操作 binary data 能力的好工具!一起來了解 Typed Array 吧!

(基於 ECMAScript 6+,Node.js 8.3)

Read More...

該來理解 JavaScript 的原型鍊了

前言老實說 JavaScript 的原型鍊一直是我很懼怕的一個主題,理由很簡單,因為真的不太好理解。光是一堆名詞跟錯綜複雜的關係就可以把你搞瘋,例如說prototype, __proto__, constructor, Object.prototype, Function.prototype, new等等。 可是呢,這又確實是 JavaScript 很重要的一部分,而且是面試的必考題,就算現在不懂,以後遲早有一天要把它弄懂,不然的話永遠

Read More...

用 JavaScript 學習資料結構和演算法:字典(Dictionary)和雜湊表(Hash Table)篇

前言在之前我們學習了一種不重複元素的集合,本文我們繼續討論另外一種不重複值的資料結構:字典(Dictionary)和雜湊表(Hash Table)。在集合中我們主要關心的是值本身 { 值(value): 值(value)},在字典(Dictionary)和雜湊表(Hash Table)則是有 { 鍵(key): 值(value)} 之間的 mapping 關係。 什麼是字典(Dictionary)? 建立字典類別 與 Set 的情況

Read More...

用 JavaScript 學習資料結構和演算法:集合(Set)篇

什麼是集合(Set)?集合是一個源自於數學理論中擁有不同元素的集合: N = {0, 1, 2, 3, 4, 5, 6, …} 空集合:{} 其特性在於它是由一組無序且不重複的項目組成。你也可以想成是一個沒有重複元素和無順序的陣列。在這篇文章我們會介紹如何實作集合資料結構並使用 交集、聯集、差集等集合操作方式。 集合初體驗事實上,在 ES6 中就有原生的 Set,在這邊我們試著使用 JavaScript 物件模仿 ES6 的 Set

Read More...

JavaScript 101 快速入門教學

前言Java 和 JavaScript 雖然名稱相似,但卻是熱狗和狗的差別。JavaScript 是由 Netscape 工程師 Brendan Eich 於 1995 年僅花 10 天所設計的程式語言,也因為一些歷史因素,JavaScript 成為被誤解最深的程式語言。JavaScript 是一種直譯式、基於原型(prototype based)的物件導向程式語言,但又具有函數式程式設計(Functional programming

Read More...

用 JavaScript 學習資料結構和演算法:佇列(Queue)篇

什麼是佇列(Queue)?佇列(Queue)是一種先進先出(First In First Out, FIFO)的有序串列(Ordered List),與堆疊(Stack)後進先出(Last In First Out, LIFO)不同的是佇列(Queue)的新增和刪除元素是發生在不同端,新增元素在尾部、移除元素在頂部,最新加入的元素會從尾部排入。在一般生活中比較常見的例子是電影院排隊買票、小七便利商店排隊付款(當然不能有人想插隊啦),在

Read More...

用 JavaScript 學習資料結構和演算法:陣列(Array)篇

什麼是陣列(Array)?陣列可以說是程式語言中暫時儲存資料的櫃子,幾乎所有的程式語言都具備陣列這個廣泛運用的資料結構,但值得注意的是一般程式語言中陣列只能儲存同樣型別的值,但在 JavaScript 則可以儲存不同型別的值(但我們還是盡量避免)。 下面是陣列的簡單使用情境,當今天我們想儲存整個班級的學生姓名時,我們不可能使用一個個變數去一個個儲存,這時候陣列的功能就派上用場了: 1234567const student1 = 'Ma

Read More...

讓 JavaSript 難以閱讀:jsfuck 與 aaencode

前言在進入今天的主題之前,先推薦大家看一個影片 WAT:A lightning talk by Gary Bernhardt from CodeMash 2012。在這個影片裡面,講者會為大家示範 JavaScript 到底有多「神奇」。而這些神奇的特性,也會跟我們之後所要介紹的兩個東西有關。 先從 Brainfuck 開始大家有聽過 Brainfuck 嗎?顧名思義,就是會讓你超級頭痛的一個程式語言,只用下面這八個字元就可以寫出一個完

Read More...