Vic's blog

前言昨天提到了JavaScript可以利用「並行的方式」去做到非同步這件事情，而關於這到底是怎麼辦到的，就是今天的主題，然後今天主要的內容都是以這個影片為基礎=> 所以說 event loop 到底是什麼玩意兒？| Philip Roberts | JSConf EU，這影片對於JavaScript如何進行非同步的操作講得很清楚，推薦看。 出自影片的圖： 而以下是我看完影片，研究之後的自己見解。 Call Stack每段程式的執行都會有call stack，可以用來紀錄執行的順序，只要函式在呼叫的時候，就會把它丟進去最下面，後面進來的就會再疊上去，而當函式處理完之後，再從最上面去拿走，這是一種後進先出的概念。 可以想像成一個洋芋片罐，最先放進去的洋芋片，會在洋芋片罐的最下方，當洋芋片都放完要拿的時候，先拿的那片洋芋片就會是洋芋片罐最上方的那個洋芋片。 之前有提到說JavaScript只有一個執行緒，所以不能做很多事情，其實是因為只有一個Call Stack，因此一次只能做一件事情。 Web Apis意思是瀏覽器所提供的 api，我覺得最簡單的話，setTimeou...

前言Asynchronous的中文翻譯是非同步、異步，Synchronous的中文翻譯是同步，以下都會直接用同步、非同步來介紹。 非同步程式設計是JavaScript在學習時一個很大的重點，不光是容易誤解，不好理解，也因為實際上要常常使用到。 這一篇不講太多專業術語跟程式範例，會試著用很白話的方式把非同步這件事情給講清楚，那就直接開始進入今天的主題！ JavaScript是單一執行緒這是我覺得在了解同步跟非同步之前要先理解的第一個點，先完全不要管什麼是同步，什麼是非同步，一開始請先知道這個： Javascript 程式執行，一次只能執行一件事情。 就像是一家餐廳，就只有一個廚師，那他就只能一次煮一道菜，假如有兩個廚師，就是同時煮兩道菜，很多廚師可以同時煮很多菜那就是多執行緒，可以一次同時進行很多事情。 無論如何，要記住這家叫做「Javascript」的餐廳，永遠只有一個廚師(執行緒)。 JavaScript 同步跟非同步剛開始學習時，同步會讓人感覺是，全部的動作同時開始進行，所以容易誤會(誤會同步=同時)。後來去查閱一些資料後發現其實同步是 => 一...

這其實不是難懂的概念，但卻是非同步程式設計中最基礎的螺絲釘，我自己在學習這 JS 非同步領域這系列的順序是這樣排的： Callback => Promise => Async/Await 確保自己了解之後，再往下一個階段邁進，對於認知非同步反而會顯得更加輕鬆，不然容易變成拆東牆補西牆。 這個概念是我從 huli 的JavaScript 中的同步與非同步（上）：先成為 callback 大師吧！學習到的，也是這篇讓我意識到callback的重要性，推薦可以去看。那麼就開始進入今天的主題。 Callback Funtion定義學習一個新的名詞術語，想知道它究竟是什麼，有很多方式，Callback來說的話我覺得可以看 MDN 文檔的定義，寫的蠻好理解： A callback function is a function passed into another function as an argument 中文來說的話就是，當一個函數，作為參數傳遞給另一個函數，就是callback。 舉例來說：小白、小紅、小黃三個人在工作，可以這樣寫。 123whiteWork();r...

一種用來處理特定的日期時間會用到的特殊物件，可以用來印出時間，修改時間或是設定時間。 要注意的一點是，JavaScript當中，使用Date就會一次把日期跟跟時間創造出來，不能只單獨創造出今天日期。 最簡單的使用方式就是直接new Date()就能直接創造出當前的時間。 12const time = new Date();console.log(time); // 印出當前時間 隨時放入參數的不同可以印出各種不同狀態的時間。new Date()是一種，另外還有三種創建時可以創建時的方式: 123const time = new Date(milliseconds); //第二種const time = new Date(dateString); //第三種const time = new Date(year, month, day, hours, minutes, seconds, milliseconds); //第四種 獲取時間中某個值有一些Date內建的方法，可以幫助獲取時間的某個值，可以分成以下幾種。 現在時間是 2022 年 9 月 25 日(星期日），使用此時此刻...

前言昨天把set講完，今天換Map，首先要注意不要跟array的方法Array.prototype.map()搞混，這是不一樣的東西，那就 let’s go 今天的主題。 Map跟object一樣都是key-value pairs，不同的是Map的key可以是任意類型。 map 的基本方法跟屬性 new Map() => 創造 map。 set() => 為 map 裡面設定 key 跟 value。 get() => 取出 map 裡面的 key 跟 value。 delete() => 刪除 map 裡面的 key。 has() => map 裡存在指定的 key。 clear() => 刪除 map 裡面所有東西。 size => 會回傳 map 裡面元素的數量。 有些其實跟set來使用看看吧： 12345678910111213141516171819202122232425262728293031323334const map = new Map();con...

前言這兩天會來講Set/Map，這是ES6後才新增的兩種資料結構，主要是用來處理一些array跟object沒辦法完全顧及的領域，也因如此，其實許多地方跟array跟object非常相似，那今天就從set開始吧！ set是集合的意思，在JavaScript裡是唯一值的集合，意思就是說，set裡面的每一個值都只能出現一次。 什麼是集合？set 的中文翻譯是集合的意思，在 JavaScript 裡這個語法是唯一值的集合，而數學上的集合定義，去爬了維基百科，得到以下結論： 指具有某種特定性質的事物的母體，集合裡的事物稱作元素。 下圖就是一個有一些多邊形的集合。關於集合我的理解是可以把它當作一堆類型差不多的東西，而在JavaScript就是一堆值，而在array確實就只有一大堆值，跟Set的差別就在於，JS 的Set值是獨一無二的。 出處: https://zh.wikipedia.org/zh-tw/%E9%9B%86%E5%90%88_%28%E6%95%B0%E5%AD%A6%29set常用方法與屬性 new Set() => 創建一個set add() &#...

前言今天會來繼續介紹語法糖Class的語法部分，會介紹到的分別為: 「extends」、「super」 keywords static properties and methods extends and super首先昨天已經知道了，class可以依靠constructor跟prototype的原理來去實作出像是其他程式語言的繼承效果，但是class以及class之間的繼承還是一個問題，為了這件事情，JavaScript有提供在class中可以使用extends跟super來解決這件事情。 原本單純使用class來寫會是長這樣： 1class Parent 使用extends關鍵字的語法是： 1class Child extends Parent 這邊使用 MDN 上面的範例修改過後來做講解： 1234567891011121314151617181920212223class Animal { constructor(name) { this.speed = 0; this.name = name; } speak() ...

前言在介紹完prototype之後，該是來理解JavaScript的class，之前有提到說，JavaScript的繼承依靠的是Prototypal inheritance，但並不是所有的程式語言都是如此，我覺得要理解class的話要從這裡下手，那就開始吧。 其他程式語言的繼承之前有提到過繼承，其實道理差不多，一個物件可以將自己的屬性跟方法給其他人使用，換句話說，一個物件可以去取用別人物件的屬性跟方法。 在JavaScript中，這種可以被取用屬性跟方法的物件是原型物件，透過原型鏈來找到跟綁定，但是在其他語言中，像是java或是c++就會直接把這個可以被取用屬性跟方法的物件視為class，一個類別的概念。 關於類別的比喻，有一個我覺得很不錯，出處是在：JavaScript 概念三明治。 class其實就是像建築物的設計圖一樣，而建築物就可以透過裡面所描述的概念來寫現做出來。 class(類別) => 設計圖。object(物件) => 建築物。 然後有了 class(類別)就可以創造出許多的instance(實例)，透過用new的方式，非常合理，但...

前言Constructor Function也是Function，那它跟一般的Function差在哪裡，有什麼特別之處，就是今天主要介紹的部分。 構造函式剛剛有提到其實跟Function差不多，所以正常來說為了要區分這兩者的差別，構造函式在命名上都會以大寫字母來寫，而構造函式的誕生，是要經過一個叫做new這個關鍵字來創立。 意味著，使用new來生成的函式就是構造函式。沒有使用new來生成，可以直接呼叫執行的，就是普通函式。 那什麼是new？ new關鍵字new這個關鍵字其實是new operator，在 mdn 的解釋是： The new operator lets developers create an instance of a user-defined object type or of one of the built-in object types that has a constructor function. 我自己翻起來是：new可以創建一個定義物件類型，或者是具有構造函式的內置物件類型，它們的實例。 我的理解是new只可以拿來創造構造函式，沒有用new來創...

Array Methods繁多，許多人常常使用時會在去 MDN 看文檔，但如果你仔細看會發現奇怪地方，比如說你想要去查map的語法，你實際會看到Array.prototype.map()。 更奇怪的地方是，有些會有.prototype，有些沒有，當初我初學時百思不得其解。 其實這就跟今天主題的Prototypal inheritance有關，讓我們從一開始提到的map的Array Methods開始看起，寫一個簡單的例子: 12345const arr = [1, 2, 3, 4, 5];const arr2 = arr.map((n) => n + 1);console.log(arr2); 會發現說，我明明沒有寫這個方法，但是我可以用，why?arr 裡面明明就只有 12345。這就是原型繼承的奧妙之處。 arr = [1, 2, 3, 4, 5]其實可以看成是arr = new Array([1, 2, 3, 4, 5]) 其中Array就是內建的一個 Constructor Function，它自身的prototype會指向一個帶有 map(方法)跟其他一堆的...