你懂了 JavaScript，也不懂 JavaScript - MOPCON 2021

Transcript

1. 你懂了了 JavaScript，也不懂 JavaScript Huli @ MOPCON 2021

2. About 上半年年：OneDegree 前端⼯工程師

3. About 上半年年：OneDegree 前端⼯工程師 下半年年：Cymetrics 資安⼯工程師

4. 開始之前，先來來個⼩小測驗

5. 下列列各組「」內的字，讀⾳音相同的選項是 • (A) 令⼈人發「噱」／「遽」然⽽而逝 • (B) 同⼼心「戮」⼒力力／「蓼」菜成⾏行行 • (C) 寒「蛩」鳴秋／「煢」居荒野

   • (D)「瓠」巴⿎鼓瑟／簞「瓢」屢屢空 出處：101 年年指考國⽂文

6. 下列列各組「」內的字，讀⾳音相同的選項是 • (A) 令⼈人發「噱」／「遽」然⽽而逝 • (B) 同⼼心「戮」⼒力力／「蓼」菜成⾏行行 • (C) 寒「蛩」鳴秋／「煢」居荒野

   • (D)「瓠」巴⿎鼓瑟／簞「瓢」屢屢空 出處：101 年年指考國⽂文

7. 下列列各組「」內的字，讀⾳音相同的選項是 • (A) 令⼈人發「噱」／「遽」然⽽而逝 • (B) 同⼼心「戮」⼒力力／「蓼」菜成⾏行行 • (C) 寒「蛩」鳴秋／「煢」居荒野

   • (D)「瓠」巴⿎鼓瑟／簞「瓢」屢屢空 出處：101 年年指考國⽂文

8. 下列列各組「」內的字，讀⾳音相同的選項是 • (A) 令⼈人發「噱」／「遽」然⽽而逝 • (B) 同⼼心「戮」⼒力力／「蓼」菜成⾏行行 • (C) 寒「蛩」鳴秋／「煢」居荒野

   • (D)「瓠」巴⿎鼓瑟／簞「瓢」屢屢空 出處：101 年年指考國⽂文

9. 讓我們再來來⼀一個⼩小測驗

10. 請問以下四個的結果是 [] + [] [] + {} {} + []

    {} + {}

11. 請問以下四個的結果是 [] + [] [] + {} {} + []

    {} + {}

12. 1. 這個對我寫 code 有幫助嗎？
 2. 不知道的話，會容易易寫出 bug 嗎？

13. None
14. None

15. eslint: b is not defined

16. None
17. None
18. None

19. 1. 比較不重要但有趣的知識
 2. 重要的知識

20. 1. 比較不重要但有趣的知識
 2. 重要的知識 成為 JS ⼤大師 aka spec ⼤大師

21. 1. 比較不重要但有趣的知識
 2. 重要的知識 避免寫出 bug，寫出更更好的 code

22. 時間有限的前提下，挑價值最⾼高的先學

23. Agenda 1.Type 2.Hoisting 3.This 4.Prototype 5.Async

24. Type

25. Number 跟 String

26. [1,5,3,11,7].sort()

27. [1,5,3,11,7].sort() [1,11,3,5,7]

28. None
29. None
30. None
31. None

32. 3.3000000000000003

33. Number.EPSILON = 2^-52

34. Math.abs(0.1+0.2-0.3) < Number.EPSILON

35. None
36. None
37. None
38. None

39. Number.MAX_SAFE_INTEGER 9007199254740991

40. 第七種資料型別 BigInt

41. 重點 1. 排序時注意比較的是字典序 2. 注意數字加字串串會變字串串 3. 處理理⼩小數時注意浮點數問題 4. 處理理⼤大數時注意數字範圍 5.

    ⼤大數可以⽤用 BigInt

42. Hoisting

43. None

44. 1 2 3 4

45. 1 2 3 4

46. JS 在執⾏行行前就會做⼀一些處理理

47. None

48. 重點 1. JS 還是有編譯的存在 2.在進入函式時就會對宣告做處理理

49. This

50. None
51. None

52. var q = document.query q() document.query()

53. var q = document.query q() document.query()

54. this 的值跟怎麼呼叫函式有關

55. var q = document.query q() document.query() this

56. var q = document.query q() document.query() this this?

57. None
58. None
59. None
60. None
61. None
62. None

63. TypeError Cannot read property 'setState' of undefined

64. this 的值跟怎麼呼叫函式有關

65. None
66. None
67. None

68. 重點 1. 呼叫函式的⽅方式會影響 this 2. bind 可以綁定特定 this 3. call、apply

    呼叫函式時可以指定 this 4. arrow function 也會改變 this

69. Prototype

70. None

71. (1).toString()

72. (1).toString() (1).__proto__ => Number.prototype

73. (1).toString() (1).__proto__ => Number.prototype Number.prototype.toString

74. (1).toString() (1).__proto__ => Number.prototype Number.prototype.toString

75. None
76. None
77. None
78. None
79. None
80. None
81. None
82. None

83. 重點 1. prototype chain 的概念念 2. JS 透過 prototype chain

    尋找 屬性跟⽅方法 3.透過全寫去呼叫函式

84. Async

85. None
86. None
87. None

88. callback !== 非同步

89. None

90. call stack task queue Web API main

91. call stack task queue Web API main setTimeout

92. call stack task queue Web API main 100ms, fn

93. call stack task queue Web API main fn

94. call stack task queue Web API main fn console

95. call stack task queue Web API main fn

96. call stack task queue Web API fn

97. call stack task queue Web API fn

98. call stack task queue Web API fn console

99. call stack task queue Web API fn

100. call stack task queue Web API

101. None
102. None
103. None
104. None

105. 重點 1. callback !== 非同步 2. event loop 的運作⽅方式

106. Agenda 1.Type 2.Hoisting 3.This 4.Prototype 5.Async

107. 1. 這個對我寫 code 有幫助
 2. 不知道的話，會容易易寫出 bug