Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
你懂了了 JavaScript，也不懂 JavaScript Huli @ MOPCON 2021
Slide 2
Slide 2 text
About 上半年年：OneDegree 前端⼯工程師
Slide 3
Slide 3 text
About 上半年年：OneDegree 前端⼯工程師 下半年年：Cymetrics 資安⼯工程師
Slide 4
Slide 4 text
開始之前，先來來個⼩小測驗
Slide 5
Slide 5 text
下列列各組「」內的字，讀⾳音相同的選項是 • (A) 令⼈人發「噱」／「遽」然⽽而逝 • (B) 同⼼心「戮」⼒力力／「蓼」菜成⾏行行 • (C) 寒「蛩」鳴秋／「煢」居荒野 • (D)「瓠」巴⿎鼓瑟／簞「瓢」屢屢空 出處：101 年年指考國⽂文
Slide 6
Slide 6 text
下列列各組「」內的字，讀⾳音相同的選項是 • (A) 令⼈人發「噱」／「遽」然⽽而逝 • (B) 同⼼心「戮」⼒力力／「蓼」菜成⾏行行 • (C) 寒「蛩」鳴秋／「煢」居荒野 • (D)「瓠」巴⿎鼓瑟／簞「瓢」屢屢空 出處：101 年年指考國⽂文
Slide 7
Slide 7 text
下列列各組「」內的字，讀⾳音相同的選項是 • (A) 令⼈人發「噱」／「遽」然⽽而逝 • (B) 同⼼心「戮」⼒力力／「蓼」菜成⾏行行 • (C) 寒「蛩」鳴秋／「煢」居荒野 • (D)「瓠」巴⿎鼓瑟／簞「瓢」屢屢空 出處：101 年年指考國⽂文
Slide 8
Slide 8 text
下列列各組「」內的字，讀⾳音相同的選項是 • (A) 令⼈人發「噱」／「遽」然⽽而逝 • (B) 同⼼心「戮」⼒力力／「蓼」菜成⾏行行 • (C) 寒「蛩」鳴秋／「煢」居荒野 • (D)「瓠」巴⿎鼓瑟／簞「瓢」屢屢空 出處：101 年年指考國⽂文
Slide 9
Slide 9 text
讓我們再來來⼀一個⼩小測驗
Slide 10
Slide 10 text
請問以下四個的結果是 [] + [] [] + {} {} + [] {} + {}
Slide 11
Slide 11 text
請問以下四個的結果是 [] + [] [] + {} {} + [] {} + {}
Slide 12
Slide 12 text
1. 這個對我寫 code 有幫助嗎？ 2. 不知道的話，會容易易寫出 bug 嗎？
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
eslint: b is not defined
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
1. 比較不重要但有趣的知識 2. 重要的知識
Slide 20
Slide 20 text
1. 比較不重要但有趣的知識 2. 重要的知識 成為 JS ⼤大師 aka spec ⼤大師
Slide 21
Slide 21 text
1. 比較不重要但有趣的知識 2. 重要的知識 避免寫出 bug，寫出更更好的 code
Slide 22
Slide 22 text
時間有限的前提下，挑價值最⾼高的先學
Slide 23
Slide 23 text
Agenda 1.Type 2.Hoisting 3.This 4.Prototype 5.Async
Slide 24
Slide 24 text
Type
Slide 25
Slide 25 text
Number 跟 String
Slide 26
Slide 26 text
[1,5,3,11,7].sort()
Slide 27
Slide 27 text
[1,5,3,11,7].sort() [1,11,3,5,7]
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
3.3000000000000003
Slide 33
Slide 33 text
Number.EPSILON = 2^-52
Slide 34
Slide 34 text
Math.abs(0.1+0.2-0.3) < Number.EPSILON
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
Number.MAX_SAFE_INTEGER 9007199254740991
Slide 40
Slide 40 text
第七種資料型別 BigInt
Slide 41
Slide 41 text
重點 1. 排序時注意比較的是字典序 2. 注意數字加字串串會變字串串 3. 處理理⼩小數時注意浮點數問題 4. 處理理⼤大數時注意數字範圍 5. ⼤大數可以⽤用 BigInt
Slide 42
Slide 42 text
Hoisting
Slide 43
Slide 43 text
No content
Slide 44
Slide 44 text
1 2 3 4
Slide 45
Slide 45 text
1 2 3 4
Slide 46
Slide 46 text
JS 在執⾏行行前就會做⼀一些處理理
Slide 47
Slide 47 text
No content
Slide 48
Slide 48 text
重點 1. JS 還是有編譯的存在 2.在進入函式時就會對宣告做處理理
Slide 49
Slide 49 text
This
Slide 50
Slide 50 text
No content
Slide 51
Slide 51 text
No content
Slide 52
Slide 52 text
var q = document.query q() document.query()
Slide 53
Slide 53 text
var q = document.query q() document.query()
Slide 54
Slide 54 text
this 的值跟怎麼呼叫函式有關
Slide 55
Slide 55 text
var q = document.query q() document.query() this
Slide 56
Slide 56 text
var q = document.query q() document.query() this this?
Slide 57
Slide 57 text
No content
Slide 58
Slide 58 text
No content
Slide 59
Slide 59 text
No content
Slide 60
Slide 60 text
No content
Slide 61
Slide 61 text
No content
Slide 62
Slide 62 text
No content
Slide 63
Slide 63 text
TypeError Cannot read property 'setState' of undefined
Slide 64
Slide 64 text
this 的值跟怎麼呼叫函式有關
Slide 65
Slide 65 text
No content
Slide 66
Slide 66 text
No content
Slide 67
Slide 67 text
No content
Slide 68
Slide 68 text
重點 1. 呼叫函式的⽅方式會影響 this 2. bind 可以綁定特定 this 3. call、apply 呼叫函式時可以指定 this 4. arrow function 也會改變 this
Slide 69
Slide 69 text
Prototype
Slide 70
Slide 70 text
No content
Slide 71
Slide 71 text
(1).toString()
Slide 72
Slide 72 text
(1).toString() (1).__proto__ => Number.prototype
Slide 73
Slide 73 text
(1).toString() (1).__proto__ => Number.prototype Number.prototype.toString
Slide 74
Slide 74 text
(1).toString() (1).__proto__ => Number.prototype Number.prototype.toString
Slide 75
Slide 75 text
No content
Slide 76
Slide 76 text
No content
Slide 77
Slide 77 text
No content
Slide 78
Slide 78 text
No content
Slide 79
Slide 79 text
No content
Slide 80
Slide 80 text
No content
Slide 81
Slide 81 text
No content
Slide 82
Slide 82 text
No content
Slide 83
Slide 83 text
重點 1. prototype chain 的概念念 2. JS 透過 prototype chain 尋找 屬性跟⽅方法 3.透過全寫去呼叫函式
Slide 84
Slide 84 text
Async
Slide 85
Slide 85 text
No content
Slide 86
Slide 86 text
No content
Slide 87
Slide 87 text
No content
Slide 88
Slide 88 text
callback !== 非同步
Slide 89
Slide 89 text
No content
Slide 90
Slide 90 text
call stack task queue Web API main
Slide 91
Slide 91 text
call stack task queue Web API main setTimeout
Slide 92
Slide 92 text
call stack task queue Web API main 100ms, fn
Slide 93
Slide 93 text
call stack task queue Web API main fn
Slide 94
Slide 94 text
call stack task queue Web API main fn console
Slide 95
Slide 95 text
call stack task queue Web API main fn
Slide 96
Slide 96 text
call stack task queue Web API fn
Slide 97
Slide 97 text
call stack task queue Web API fn
Slide 98
Slide 98 text
call stack task queue Web API fn console
Slide 99
Slide 99 text
call stack task queue Web API fn
Slide 100
Slide 100 text
call stack task queue Web API
Slide 101
Slide 101 text
No content
Slide 102
Slide 102 text
No content
Slide 103
Slide 103 text
No content
Slide 104
Slide 104 text
No content
Slide 105
Slide 105 text
重點 1. callback !== 非同步 2. event loop 的運作⽅方式
Slide 106
Slide 106 text
Agenda 1.Type 2.Hoisting 3.This 4.Prototype 5.Async
Slide 107
Slide 107 text
1. 這個對我寫 code 有幫助 2. 不知道的話，會容易易寫出 bug