Save 37% off PRO during our Black Friday Sale! »

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

58d2fa98345951d9a57fdd6cfd5d0f64?s=47 Huli
November 19, 2021

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

58d2fa98345951d9a57fdd6cfd5d0f64?s=128

Huli

November 19, 2021
Tweet

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