初次參加保哥的《 JavaScript 開發實戰:核心概念篇》感想

Photo by Igor Son on Unsplash

報名前的猶豫不決

2019/02/17 這是我嘗試投入前端領域的初次實體課程,老實說我本來是不太想參加的,畢竟大家也都看到價格了,對一個有經濟壓力的人來說,那不會是個太容易被接受的數字。

4000 對每個人來說有不同的解讀,或許對有些人來說「光講師是保哥就超過 4000 的價值了」,但對一個連業界的大神有誰、同時又是個前端菜雞、更遑論有經濟壓力的人來說,猶豫不決想必也是人之常情吧?

對,我很想參加。

但我也捨不得那 4000 ,或許是冥冥之中有注定?我一個在台北的朋友也參加了一模一樣的課程,並且也向我推坑。

我也趁勢向友人請教到底值不值 4000,他回應「以前腦補太多 JavaScript 的觀念了,如果想投入前端 JavaScript 必不可少,報名課程然後享受被打臉吧」(??

洧杰老師也於 Line 上鼓勵我要報名這次的課程,也表明自身亦參加多次,每次都有不同的收穫,後來牙一咬就去了。

寫於課後

先說說我的 JavaScript 程度,我的程度不高,大概就是看完六角的《 JavaScript 入門篇 - 學徒試煉》、以及看了約 70% 進度的《克服 JS 的奇怪部分》

如果要建議至少要到什麼程度才可以參加,就我自己的感覺來說,注意喔僅代表我自己喔,那大概就是看完學徒試煉的前 8 章對 JavaScript 有初步了解就可以了

這個意思並不是說這堂課很淺,而是我上完後的感受是,這堂課比較像是重新建立我們對 JavaScript 的一些基礎的解讀

而很多人會因為這些東西太基礎而忽略、或者是因為曾經接觸過其他程式語言而自行腦補這些基礎觀念。

保哥於開課前是這麼說的「這堂課很特別,不管是初學也好、較為進階的也好,這堂課會因為自身在不同時期下對 JavaScript 的認知而有不同的收穫

因為這是寫於課後的,當時的我沒有完全做到覺得很可惜,但是可以寫給未來的我以及可能看到這篇文章的路人甲,讓這堂課的價值遠超 4000 ,那就是:

  1. 當講師丟出問題時,請盡可能地給予回應不要害羞
  2. 講對很好但講錯更好,因為接下來會變成你的主場,保哥會開始引導讓你說出正確的答案,期間你會不斷跳針似的重複自己的答案,而在場的其他同學也會因為這個過程察覺這個答案本身的問題點,這個時候大家就會進入團體思考模式,最終靠學員自身的力量獲得答案。

雖然這個過程很耗費時間,導致當天課程的下半段好像比較趕,但整體來說,得到的感受仍是好的,也因為這樣的感受讓我認為花這個錢很值得

我想保哥也是認為打好基礎很重要,否則也不會特地花這麼多時間請同學上去畫圖並指導釐清觀念,而我就是其中一個幸運兒:D

這樣的實體課程還有一個好處,散場結束時,利用時間向保哥提出了一個問題:「像這樣的課程,雖然當下同學們好像都會了,但是過沒多久就會忘光,如何把這些觀念變成長期記憶呢?」。

印象中保哥給我的回答是這樣的

  1. 最重要的還是多寫程式,把這些觀念帶入到工作中。
  2. 如果目前工作並非前端領域,會建議我們將自身周遭營造出前端的環境,讓日常生活都充滿前端,當然如果可以找份前端的工作是更好的。

相較於報名前的猶豫不決,或許這麼說是誇張了點,但我現在還是有「啊!有參加真是太好了」的感嘆,雖然我還是對 4000 的失去耿耿於懷,但對於結果而言,這算是筆相當划算的交易,我獲得的遠比想像中的還要多。

最後也有和卡斯伯老師講到話,我說

「慘了,今天被這堂課打臉這麼多 JavaScript 觀念,那我之前寫的奇怪部分的紀錄文好像有部分都是錯的,我是不是要回頭去改呢,可是那超多篇的欸!」

老師是這麼說的

「其實這些都是過程,那些紀錄文也代表了你在那個階段的想法,在老師自己的部落格上也有很多篇文章,即使現在觀念更好了也不盡然會回頭去一篇篇改那些文章,畢竟真的是太多了。可以把那些文章留著當對照組,期許之後可以寫出品質更好的紀錄文」


感想的部分就到以上結束。

接下來的是課堂上「我還記得」的筆記,可能比較片段也比較雜亂,不過自己看得懂就好啦。

我很想記得課堂上保哥講的每一個觀念,不過人畢竟不是錄音機,就...能吸收多少就算多少囉。


所有的東西在 JavaScript 內都是物件,只有分原始型別和物件型別

物件的定義

在電腦科學領域中,物件是個在記憶體中的資料且可以被一個識別符號所參考。

識別符號

  • 合法的識別符號必須是英文字母、數字、金額符號 ( $ )、底線 ( _ )
  • 合法的識別符號不能以數字開頭

例如取用 car 物件下的 001 屬性

  • 不能寫 car.001 ,會得到 Error,因為 .001 是不合法的識別符號。
  • 可以寫 car.['001'];

所有物件都是物件型別 ( Object Type ),除了以下六種是「原始型別 ( Primitive Type )」:

  • number - 數值
  • string - 字串
  • boolean - 布林
  • null - 空值
  • undefined - 未定義
  • symbol - 符號 (ES6 +)

物件型別與原始型別的差異

  • 原始型別無法自由擴增屬性,物件型別可以。

何時物件會被回收

JavaScript 內如果有物件沒被有任何的變數、屬性指向就會被立刻回收。

何時物件才有型別

JavaScript 執行時期才有型別,並用來標示物件的種類 (類型)

任何「兩」物件相比永遠都是 False


變數與屬性

變數與屬性大部分的表現都相同,其中較為明顯的差異是:

  • 屬性可透過 delete 刪除
  • 變數不可透過 delete 刪除

關於變數與屬性

  • 只有用 var / let / const 宣告的才能算變數
  • 變數只存在於當前範圍下,而且不能刪除
  • 變數指向物件的記憶體位址,不包含物件的內容亦不會有型別
  • 屬性也是指向物件的記憶體位址,跟變數一樣。
  • 使用 var 建立一個全域變數 a ,這時的變數 a 會被掛到 window 物件下成為屬性,並且無法被刪除。

例子驗證 - 變數和屬性之間的關係一

var a = 1;
window['a'] = 2;
delete window.a;
console.log(a); // 2

例子驗證 - 變數和屬性之間的關係二

b = 2;
delete b;
console.log(b); // is not defined

Number 部分

Number.MAX_SAFE_INTEGER

JavaScript 的 Number 在一定位數以上的數字後就會失準,並轉變成科學符號,因此判斷最大安全整數非常重要。


課堂練習一

物件、變數與型別之間的關係

var a;
a = 1;
a = "a";
a = "a" + a;

上述四行程式碼在執行的過程中,請問:

  • 曾經在記憶體中建立過幾個變數 ? 1
  • 曾經在記憶體中出現過幾種型別 ? 3
  • 曾經在記憶體中出現過多少物件 ? 5

課堂練習二

var a = {x:1};
var b = a;
a.x = a = {x:2};

請問 b.x 、 a.x 結果為何?

  • a.x ==> 2
  • b.x ==> {x:2}
讀懂每一行程式碼並畫圖了解實際運作

課堂練習三

利用閉包的特性,實作出每呼叫一次就 +1 的計數器

function MyFunc() {
var i = 0;
return {
GetCount: function(){
i++;
return console.log(i);
}
}
}
var o = MyFunc();
o.GetCount(); // 輸出 1
o.GetCount(); // 輸出 2
o.GetCount(); // 輸出 3 ( 依此類推 )

課堂練習四

請利用 JS 閉包 (Closure) 特性實作私有變數的 get 與 set 存取子

function MyFunc() {
let a;
let b = 0;
return {
get_a: function(){
return console.log(a);
},
set_a: function(input){
a = input * input;
},
get_b: function(){
return console.log(b);
},
set_b: function(input){
b = input;
}
}
}
var o = MyFunc();
o.get_a() // 回傳 undefined
o.set_a(3);
o.get_a(); // 回傳 9
o.set_a(4);
o.get_a(); // 回傳 16
o.get_b(); // 回傳 0
o.set_b(99);
o.get_b(); // 回傳 99