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

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

5. 下列列各組「」內的字，讀⾳音相同的選項是
   • (A) 令⼈人發「噱」／「遽」然⽽而逝
   
   • (B) 同⼼心「戮」⼒力力／「蓼」菜成⾏行行
   
   • (C) 寒「蛩」鳴秋／「煢」居荒野
   
   • (D)「瓠」巴⿎鼓瑟／簞「瓢」屢屢空
   出處：101 年年指考國⽂文
   

   View Slide

6. 下列列各組「」內的字，讀⾳音相同的選項是
   • (A) 令⼈人發「噱」／「遽」然⽽而逝
   
   • (B) 同⼼心「戮」⼒力力／「蓼」菜成⾏行行
   
   • (C) 寒「蛩」鳴秋／「煢」居荒野
   
   • (D)「瓠」巴⿎鼓瑟／簞「瓢」屢屢空
   出處：101 年年指考國⽂文
   

   View Slide

7. 下列列各組「」內的字，讀⾳音相同的選項是
   • (A) 令⼈人發「噱」／「遽」然⽽而逝
   
   • (B) 同⼼心「戮」⼒力力／「蓼」菜成⾏行行
   
   • (C) 寒「蛩」鳴秋／「煢」居荒野
   
   • (D)「瓠」巴⿎鼓瑟／簞「瓢」屢屢空
   出處：101 年年指考國⽂文
   

   View Slide

8. 下列列各組「」內的字，讀⾳音相同的選項是
   • (A) 令⼈人發「噱」／「遽」然⽽而逝
   
   • (B) 同⼼心「戮」⼒力力／「蓼」菜成⾏行行
   
   • (C) 寒「蛩」鳴秋／「煢」居荒野
   
   • (D)「瓠」巴⿎鼓瑟／簞「瓢」屢屢空
   出處：101 年年指考國⽂文
   

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

12. 1. 這個對我寫 code 有幫助嗎？

    2. 不知道的話，會容易易寫出 bug 嗎？
    

    View Slide

13. View Slide

14. View Slide

15. eslint: b is not defined
    

    View Slide

16. View Slide

17. View Slide

18. View Slide

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

    2. 重要的知識
    

    View Slide

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

    2. 重要的知識
    成為 JS ⼤大師 aka spec ⼤大師
    

    View Slide

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

    2. 重要的知識
    避免寫出 bug，寫出更更好的 code
    

    View Slide

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

    View Slide

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

    View Slide

24. Type
    

    View Slide

25. Number 跟 String
    

    View Slide

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

    View Slide

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

    View Slide

28. View Slide

29. View Slide

30. View Slide

31. View Slide

32. 3.3000000000000003
    

    View Slide

33. Number.EPSILON = 2^-52
    

    View Slide

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

    View Slide

35. View Slide

36. View Slide

37. View Slide

38. View Slide

39. Number.MAX_SAFE_INTEGER
    9007199254740991
    

    View Slide

40. 第七種資料型別
    BigInt
    

    View Slide

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

    View Slide

42. Hoisting
    

    View Slide

43. View Slide

44. View Slide

45. View Slide

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

    View Slide

47. View Slide

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

    View Slide

49. This
    

    View Slide

50. View Slide

51. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

57. View Slide

58. View Slide

59. View Slide

60. View Slide

61. View Slide

62. View Slide

63. TypeError
    Cannot read property
    'setState' of undefined
    

    View Slide

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

    View Slide

65. View Slide

66. View Slide

67. View Slide

68. 重點
    1. 呼叫函式的⽅方式會影響 this
    
    2. bind 可以綁定特定 this
    
    3. call、apply 呼叫函式時可以指定 this
    
    4. arrow function 也會改變 this
    

    View Slide

69. Prototype
    

    View Slide

70. View Slide

71. (1).toString()
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

75. View Slide

76. View Slide

77. View Slide

78. View Slide

79. View Slide

80. View Slide

81. View Slide

82. View Slide

83. 重點
    1. prototype chain 的概念念
    
    2. JS 透過 prototype chain 尋找
    屬性跟⽅方法
    
    3.透過全寫去呼叫函式
    

    View Slide

84. Async
    

    View Slide

85. View Slide

86. View Slide

87. View Slide

88. callback !== 非同步
    

    View Slide

89. View Slide

90. call stack
    task queue
    Web API
    main
    

    View Slide

91. call stack
    task queue
    Web API
    main
    setTimeout
    

    View Slide

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

    View Slide

93. call stack
    task queue
    Web API
    main fn
    

    View Slide

94. call stack
    task queue
    Web API
    main fn
    console
    

    View Slide

95. call stack
    task queue
    Web API
    main fn
    

    View Slide

96. call stack
    task queue
    Web API
    fn
    

    View Slide

97. call stack
    task queue
    Web API
    fn
    

    View Slide

98. call stack
    task queue
    Web API
    fn
    console
    

    View Slide

99. call stack
    task queue
    Web API
    fn
    

    View Slide

100. call stack
     task queue
     Web API
     

     View Slide

101. View Slide

102. View Slide

103. View Slide

104. View Slide

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

     View Slide

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

     View Slide

107. 1. 這個對我寫 code 有幫助

     2. 不知道的話，會容易易寫出 bug
     

     View Slide