Vic's blog

前言今天要來講的主題是this，在JavaScript中的this可以在呼叫函式時，透過不同方式決定它要指向哪一個物件，而關於什麼時候會指向什麼地方，這就是this的困難之處。 理解this來由一開始自己的猜測理解是，有些很冗長的名字，假如有一個代名詞，去代替它會很好很多。 比如說，我要描述在一家便利商店打工的小白擁有的東西： 在便利商店打工的小白擁有著一台機車，在便利商店打工的小白還有隨身攜帶一個水壺，而且在便利商店打工的小白手中現在還拿著一個過期的超商飯糰。 假如把「便利商店打工的小白」用「他」來替換掉的話： 在便利商店打工的小白擁有著一台機車，「他」還有隨身攜帶一個水壺，而且「他」手中現在還拿著一個過期的超商飯糰。 程式碼寫起來概念會像這樣： 這邊變數名稱就不要太長單純是white就好，但可以想像成叫做SuperWhiteWorkingInAConvenienceStore比較符合概念。 1234567891011const white = { transportation: "motorcycle", thing: "kettl...

前言ES6 才加入的primitive type，我個人覺得是primitive type當中最難理解的。 object的key在 ES6 之前都只能是字串，就算寫成數字也會被轉成字串，所以之前我會說，object的key只能是字串，但這個說法被symbol打破了，它也可以拿來當作object的key，而它為什麼可以，以及symbol是處理什麼領域的問題，讓我們看下去吧。 特性：獨一無二symbol可以直接跟獨一無二的值劃上等號，只會有一個保證是唯一的，這其實就是可以拿來當作object的key的原因，不會重複很適合拿來幫物件取名。 這樣記：只要透過symbol建立的值，都會獲得特性：獨一無二。 建立：symbol建立symbol的方式很簡單，只要使用Symbol()即可，不需要用new。 1234// 語法const fruit = Symbol();console.log(typeof symbol); // symbol 可以給Symbol裡面加名字，在Symbol()的()裡面，可以當作它是這個變數fruit的描述，而它的類別是Symbol。 由於特性：獨一無二，所以當...

其實我不知道Biglnt的中文可以叫什麼比較好，直接翻成「大整數」似乎不太精確。 今天會從以下這些角度來介紹： Biglnt為何而來 定義及如何使用 可能會踩的雷區 數字類型 => Biglnt跟Number在JavaScript中，Biglnt也是其中的一種primitive，也就是基本型別。 複習一些有哪些基本型別，基本上可以由字串、數字、布林值含括： String Number Boolean Null Undefined Symbol 除了這些，其實還有一種基本型別叫做Biglnt，也是用來處裡數字的部分，就跟Number一樣的領域。 主要是因為光是Number處理數字會有一些無法顧及到的部分，所以才有了需要Biglnt的誕生。 舉例來說，只要數字太大，Number就沒辦法顯示精準，而這個範圍大致是2**53-1，從Number.MAX_SAFE_INTEGER裡面描述的最大安全整數範圍來判斷，也就是說超過了這個數字，Number就沒辦法維持準確性。 不精確的意思是代表說明明兩個不一樣，但判斷不出來，舉一個例子是在JavaScript當中的2 ...

前言async/await的方式提供了promise一種新的寫法，至於有沒有更方便及更高的可讀性，我覺得使用了async/await是更容易進行編寫的，至少可以不用一直.then下去，使用了async/await之後，就跟.then說再見。 今天會介紹的順序： 這兩個好用的關鍵字分別代表的意思。 async/await 所達成的「同步」效果。 錯誤處理的應對措施。 async這是一個加在function前面的關鍵字，沒有加就是普通的function，加了之後就會變成async function就會代表著現在這個function是一個非同步的function。 123456789// 普通的functionfunction add(num) { return 10 + num;}// async functionasync function add(num) { return 10 + num;} 而會說加上async後function會變成非同步的原因主要是因為async會讓function在回傳的時候會返回一個prom...

前言前幾天講的Promise的 then()、catch()、finally()也是Promise的 methods，從 MDN 的定義上會把這三種 methods 稱之為Instance methods，而今天要講的是Static methods，中文叫做靜態方法，大致上可以分成六種，這些的方法都是為了更好的使用Promise而被發明出來，可能用不到但懂了沒壞處。 哪六種： Promise.all() Promise.allSettled() Promise.any() Promise.race() Promise.resolve() Promise.reject() 會嘗試用好理解的方式介紹，let’s go。 Promise.all()執行很多的Promise會用到，簡單來說，全部都達成才會成功，不然就會失敗。舉一個例子，小白願意去找工作，但他有著前提條件，只要他擁有了一台車，然後有了房子，還擁有 100 萬的存款，他就會去找工作。 12345678Promise.all([ new Promise((resolve) => setTimeout(() =>...

前言有時候很常見會有情況是需要很多的非同步操作，每一個非同步的後續操作都建立在前面的非同步操作的成功，所以會繼續上一步的結果，在使用callback處理這種狀況的時候，就會產生可怕的callback hell，而Promise Chain可以很好的改善這個問題，就讓我們看下去。 promise chain 的使用方式​從看一個例子來了解使用方式。​ 12345678910111213141516171819202122const promise = new Promise(function (resolve) { resolve(1);});​promise .then(function (result) { console.log(result); // 1 return result + 1; }) .then(function (result) { console.log(result); // 2 return result + 1; }) .then(function (re...

前言Promise在程式中非常好用，是因為很多操作都需要使用到非同步的概念，而要處理非同步，除了使用callback function之外，就是會使用Promise。 這篇講述我是如何理解這個概念。 今天主要講Promise的狀態跟呼叫。 Promise是一個constructor function，假如需要自己寫一個Promise時，語法如下： 1234const promise = new Promise((resolve, reject) => { resolve(value); reject(error);}); 它的參數resolve以及reject是它自己所提供的callback，不用自己額外寫，而這兩個的名稱可以自己定義像是： 1234const promise = new Promise((a, b) => { a(); b();}); 效果也一樣，但是不建議這麼做。 而會設定這兩個參數，是有它的意義存在，從承諾來談吧。 Promise 狀態可以把它想像成一個承諾，答應了某件事情，不管最後有沒有成功，...

前言昨天提到了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...