$30 off During Our Annual Pro Sale. View Details »

Learn JavaScript Well

高見龍
October 25, 2020

Learn JavaScript Well

MOPCON 2020 分享主題「打造資深實力 - 你該學好的 JavaScript」

高見龍

October 25, 2020
Tweet

More Decks by 高見龍

Other Decks in Programming

Transcript

  1. ޒഒላӃ
    .01$0/
    ଧ଄ࢿਂመྗ
    你該學好的 JavaScript
    ҝ㟬ࣗݾላ

    View Slide

  2. a.k.a Eddie
    愛現! 喜歡冷門的玩具
    Ruby/Rails 開發者、講師
    Ruby 技術推廣、教育、諮詢
    台灣、日本等國內外 Ruby 技術研討會講者
    部落格:https://kaochenlong.com
    高見龍@eddiekao

    View Slide

  3. ޒഒላӃ
    .01$0/
    第18刷 發售中 發售中
    發售中

    View Slide

  4. ޒഒላӃ
    .01$0/
    Git
    小教室

    View Slide

  5. ޒഒላӃ
    .01$0/
    已絕版

    View Slide

  6. ޒഒላӃ
    .01$0/
    敬請
    期待

    View Slide

  7. ޒഒላӃ
    .01$0/
    ༗ᘋ㐸౴

    電子書

    View Slide

  8. ޒഒላӃ
    .01$0/
    ʮላशෆधཁҝެ࢘ɺҝ௕׭ɼ
    ෆधཁҝผਓɼ୞ҝ你ࣗݾʯ
    ߴݟཾ

    View Slide

  9. ޒഒላӃ
    .01$0/
    ᫚৬ೈᱪ޻ఔࢣʁ

    View Slide

  10. ޒഒላӃ
    .01$0/
    ೖ໳Ҏ্ɼதڃະᕝ

    View Slide

  11. ޒഒላӃ
    .01$0/
    େߝ

    View Slide

  12. ޒഒላӃ
    .01$0/
    େߝ
    w+BWB4DSJQUత޷ᢛෆ޷
    wಹࠣ༗झత+BWB4DSJQUޠ๏എޙతނࣄ
    w你֘೺ٕೳᴍᏐᴍࡏṜࠣ஍ํʂ
    wኺ৽ख্࿏౸࿝അ్ࣝ

    View Slide

  13. ޒഒላӃ
    .01$0/
    DISCLAIMER
    本次分享內容可能隱含部份商業或課程置入訊
    息,請謹慎評估!

    View Slide

  14. ޒഒላӃ
    .01$0/
    ޷᪑ෆ޷

    View Slide

  15. ޒഒላӃ
    .01$0/
    ʮՖऒᚙɼ+BWB4DSJQUಹॄኄᗞઃܭʂʯ
    ޷ᢛෆ޷

    View Slide

  16. ޒഒላӃ
    .01$0/
    ʮੈք্୞༗ၷछఔࣜޠݴɼ
    Ұछඃഃ౸ष಄ɼ另Ұछᔒਓ༻ʯ
    $೭෕#KBSOF4USPVTUSVQ
    ޷ᢛෆ޷

    View Slide

  17. ޒഒላӃ
    .01$0/
    +4-JOU
    ޷ᢛෆ޷

    View Slide

  18. ޒഒላӃ
    .01$0/
    +4-JOU
    Մೳ။ᩋ你᧷ಘࣗݾෆ။ሜఔࣜʂ
    ޷ᢛෆ޷

    View Slide

  19. ޒഒላӃ
    .01$0/
    function hello() {
    return "world";
    }
    function hello()
    {
    return "world";
    }
    ޷ᢛෆ޷

    View Slide

  20. ޒഒላӃ
    .01$0/
    㑌छఔࣜޠݴ౎༗޷ᢛෆ޷తҰ໘
    ޷ᢛෆ޷

    View Slide

  21. ޒഒላӃ
    .01$0/
    ෆཁ୞ੋ᪑ஶ鄉ຽҰىഃ
    ޷ᢛෆ޷

    View Slide

  22. ޒഒላӃ
    .01$0/
    ༗झޠ๏എޙతނࣄ

    View Slide

  23. ޒഒላӃ
    .01$0/
    你஌ಓએࠂੋዎኄҰճࣄ嗎ʁ
    ༗झޠ๏

    View Slide

  24. ޒഒላӃ
    .01$0/
    ᏓᏐએࠂ
    ༗झޠ๏

    View Slide

  25. ޒഒላӃ
    .01$0/
    var a = 1;
    console.log(a); // 會印出什什麼?
    ༗झޠ๏
    1

    View Slide

  26. ޒഒላӃ
    .01$0/
    console.log(a); // 會印出?
    var a = 1;
    ༗झޠ๏
    undefined

    View Slide

  27. ޒഒላӃ
    .01$0/
    ᏓᏐఏঢ
    7BSJBCMF)PJTUJOH
    ༗झޠ๏

    View Slide

  28. ޒഒላӃ
    .01$0/
    var a;
    console.log(a); // 所以印出 undefined
    a = 1;
    ༗झޠ๏
    被拉到上面?

    View Slide

  29. ޒഒላӃ
    .01$0/
    ฤᩄWT௚ᩄ
    $PNQJMBUJPOWT*OUFSQSFUBUJPO
    ༗झޠ๏

    View Slide

  30. ޒഒላӃ
    .01$0/
    ݐཱظWTࣥߦظ
    $SFBUJPO1IBTFWT&YFDVUJPO1IBTF
    ༗झޠ๏

    View Slide

  31. ޒഒላӃ
    .01$0/
    ݐཱظ
    Ḽ࡭໊᜝ʢ*EFOUJpFSʣਐߦॳ࢝Խ
    1A 1B
    ༗झޠ๏

    View Slide

  32. ޒഒላӃ
    .01$0/
    ࣥߦظ
    ࣥߦവᏐො值
    2
    ༗झޠ๏

    View Slide

  33. ޒഒላӃ
    .01$0/
    var a = 1;
    console.log(a);
    ༗झޠ๏
    ݐཱظ
    var a;
    console.log(a);
    undefined
    1A
    1B

    View Slide

  34. ޒഒላӃ
    .01$0/
    var a = 1;
    console.log(a);
    ༗झޠ๏
    ࣥߦظ
    a = 1;
    console.log(a);
    1
    2
    2

    View Slide

  35. ޒഒላӃ
    .01$0/
    ၷ֊ஈ
    ༗झޠ๏

    View Slide

  36. ޒഒላӃ
    .01$0/
    console.log(a);
    var a = 1;
    ༗झޠ๏
    ݐཱظ
    console.log(a);
    var a; undefined
    1A
    1B

    View Slide

  37. ޒഒላӃ
    .01$0/
    console.log(a);
    var a = 1;
    ༗झޠ๏
    ࣥߦظ
    console.log(a);
    a = 1;
    undefined
    1
    2
    2

    View Slide

  38. ޒഒላӃ
    .01$0/
    খଌᱛ
    ༗झޠ๏

    View Slide

  39. ޒഒላӃ
    .01$0/
    var a = 1;
    var a;
    console.log(a); // 會印出什什麼?
    ༗झޠ๏
    1

    View Slide

  40. ޒഒላӃ
    .01$0/
    if (false) {
    var a = 1;
    }
    console.log(a); // 會印出什什麼?
    ༗झޠ๏
    undefined

    View Slide

  41. ޒഒላӃ
    .01$0/
    另ҰछᏓᏐએࠂ
    ༗झޠ๏

    View Slide

  42. ޒഒላӃ
    .01$0/
    console.log(a); // 會印出什什麼?
    let a = 1;
    ༗झޠ๏
    Reference
    Error

    View Slide

  43. ޒഒላӃ
    .01$0/
    ҼҝMFUෆ။ᏓᏐఏঢʁ
    ༗झޠ๏

    View Slide

  44. ޒഒላӃ
    .01$0/
    console.log(a);
    let a = 1;
    ༗झޠ๏
    ݐཱظ
    console.log(a);
    let a;
    1A
    TDZ

    View Slide

  45. ޒഒላӃ
    .01$0/
    console.log(a);
    let a = 1;
    ༗झޠ๏
    ࣥߦظ
    console.log(a);
    a = 1;
    Reference
    Error
    2

    View Slide

  46. ޒഒላӃ
    .01$0/
    ࢑࣌ࢮე
    5%;5FNQPSBM%FBE;POF
    ༗झޠ๏

    View Slide

  47. ޒഒላӃ
    .01$0/
    let a = 1;
    console.log(a); // 會印出什什麼?
    ༗झޠ๏

    View Slide

  48. ޒഒላӃ
    .01$0/
    let a = 1;
    console.log(a);
    ༗झޠ๏
    ݐཱظ
    let a;
    console.log(a);
    1A
    TDZ

    View Slide

  49. ޒഒላӃ
    .01$0/
    let a = 1;
    console.log(a);
    ༗झޠ๏
    ࣥߦظ
    a = 1;
    console.log(a);
    1
    2
    2

    View Slide

  50. ޒഒላӃ
    .01$0/
    MFU৽൛తWBS
    Ҏޙ౎༻MFUब޷ྃʁ
    ༗झޠ๏

    View Slide

  51. ޒഒላӃ
    .01$0/
    വᏐએࠂ
    ༗झޠ๏

    View Slide

  52. ޒഒላӃ
    .01$0/
    sayHello();
    function sayHello() {
    console.log('hello');
    }
    ༗झޠ๏

    View Slide

  53. ޒഒላӃ
    .01$0/
    sayHello();
    function sayHello() {
    console.log('hello');
    }
    ༗झޠ๏
    ݐཱظ
    1A 1B
    sayHello();
    function sayHello() {
    console.log('hello');
    }
    2

    View Slide

  54. ޒഒላӃ
    .01$0/
    sayHello();
    function sayHello() {
    console.log('hello');
    }
    ༗झޠ๏
    sayHello();
    function sayHello() {
    console.log('hello');
    }
    2
    ࣥߦظ
    hello

    View Slide

  55. ޒഒላӃ
    .01$0/
    { }
    ༗झޠ๏
    物件?
    Block?

    View Slide

  56. ޒഒላӃ
    .01$0/
    {
    hello: '哈囉'
    }
    ༗झޠ๏
    物件

    View Slide

  57. ޒഒላӃ
    .01$0/
    {
    hello: for (var i = 0; i < 10; i++ ) {
    if (i % 2 === 0) {
    continue hello;
    }
    console.log(i);
    }
    }
    ༗झޠ๏
    label
    label
    Block

    View Slide

  58. ޒഒላӃ
    .01$0/
    + 加號?
    十字架?
    ༗झޠ๏

    View Slide

  59. ޒഒላӃ
    .01$0/
    DPFSDJPO<ˋkoʊˈɝː.ʃən>
    5IFVTFPGGPSDFUPQFSTVBEFTPNFPOFUPEP
    TPNFUIJOHUIBUUIFZBSFVOXJMMJOHUPEP
    ༗झޠ๏

    View Slide

  60. ޒഒላӃ
    .01$0/
    +'' // 0
    +[] // 0
    +{} // NaN
    +-1 // -1
    +true // 1
    +false // 0
    +undefined // NaN
    +null // 0
    ༗झޠ๏

    View Slide

  61. ޒഒላӃ
    .01$0/
    [] + [] // ?
    [] + {} // ?
    {} + [] // ?
    ༗झޠ๏

    View Slide

  62. ޒഒላӃ
    .01$0/
    [] + []
    ༗झޠ๏

    View Slide

  63. ޒഒላӃ
    .01$0/
    ༗झޠ๏

    View Slide

  64. ޒഒላӃ
    .01$0/
    [] + []
    [].toString() + [].toString()
    ༗झޠ๏
    空字串
    空字串

    View Slide

  65. ޒഒላӃ
    .01$0/
    [] + {}
    ༗झޠ๏

    View Slide

  66. ޒഒላӃ
    .01$0/
    [] + {}
    [].toString() + {}.toString()
    ༗झޠ๏
    '[object Object]'
    字串串
    空字串

    View Slide

  67. ޒഒላӃ
    .01$0/
    {} + []
    ༗झޠ๏
    Block

    View Slide

  68. ޒഒላӃ
    .01$0/
    [] + {}
    Block 後⾯面跟了了 +[]
    ༗झޠ๏
    0

    View Slide

  69. ޒഒላӃ
    .01$0/
    [] + [] // ''
    [] + {} // '[object Object]'
    {} + [] // 0
    ༗झޠ๏

    View Slide

  70. ޒഒላӃ
    .01$0/
    /B//PU"/VNCFS
    ༗झޠ๏

    View Slide

  71. ޒഒላӃ
    .01$0/
    console.log(typeof NaN); // 會印出什什麼?
    number
    ༗झޠ๏

    View Slide

  72. ޒഒላӃ
    .01$0/
    /B/ੋҰछᏐࣈ
    ୠሏ༻ိදࣔʮෆੋᏐࣈʯ
    ༗झޠ๏

    View Slide

  73. ޒഒላӃ
    .01$0/
    ʮݸ౳ᥒʯ᪑ʮݸ౳ᥒʯతࠩผʁ

    ༗झޠ๏

    View Slide

  74. ޒഒላӃ
    .01$0/
    ʮݸ౳ᥒෆ။ൺֱܕผʁʯ
    ༗झޠ๏

    View Slide

  75. ޒഒላӃ
    .01$0/
    ݸ౳ᥒ᪑ݸ౳ᥒతࠩผʁ
    ༗झޠ๏

    View Slide

  76. ޒഒላӃ
    .01$0/
    ཧղࡉઅ
    ༗झޠ๏

    View Slide

  77. ޒഒላӃ
    .01$0/
    你֘೺ٕೳᴍᏐᴍࡏṜࠣ஍ํʂ
    ਓੜۤ୹

    View Slide

  78. ޒഒላӃ
    .01$0/
    ಓཧେՈ౎஌ಓɼୠೳ၏౸తᔒଟগ
    ਓੜᴍᏐ

    View Slide

  79. ޒഒላӃ
    .01$0/
    ٕೳᴍᏐ༗ݶ
    ਓੜᴍᏐ

    View Slide

  80. ޒഒላӃ
    .01$0/
    ೗Ռཁ౤ࢿࡏ+BWB4DSJQUత࿩
    ਓੜᴍᏐ

    View Slide

  81. ޒഒላӃ
    .01$0/
    ਂೖ+BWB4DSJQU
    w෺݅ಋ޲
    wവᏐ$MPTVSF
    wUIJT
    wඇಉ㑊႔ཧ
    w&4.PEVMF

    View Slide

  82. ޒഒላӃ
    .01$0/
    ֘ላલ୺ᐽՍ嗎ʁ֘ላ哪Ұݸʁ
    ਓੜᴍᏐ
    "

    View Slide

  83. ޒഒላӃ
    .01$0/
    ೥ؐཁෆཁላK2VFSZʁ
    ਓੜᴍᏐ

    View Slide

  84. ޒഒላӃ
    .01$0/
    ֘ላࢿྉ݁ߏɺԋࢉ๏嗎ʁ
    ਓੜᴍᏐ

    View Slide

  85. ޒഒላӃ
    .01$0/
    ؐ༗ॄኄʁ
    ਓੜᴍᏐ

    View Slide

  86. ޒഒላӃ
    .01$0/
    ൛ຊ߇੍
    ਓੜᴍᏐ
    非業配

    View Slide

  87. ޒഒላӃ
    .01$0/
    "TTFUଧแ޻۩
    ਓੜᴍᏐ

    View Slide

  88. ޒഒላӃ
    .01$0/
    ཆ੒؃จ݅తश׳
    ਓੜᴍᏐ

    View Slide

  89. ޒഒላӃ
    .01$0/
    ӳจ
    ਓੜᴍᏐ

    View Slide

  90. ޒഒላӃ
    .01$0/
    ౤ࢿҰఆ༗෩ᯃɼٕज़౤ࢿ༗ᩲ༗ഛɼ
    ਃߪલጯৄ閱ެ։說໌ॻɻ
    ਓੜᴍᏐ

    View Slide

  91. ޒഒላӃ
    .01$0/
    ኺ৽ख্࿏౸࿝അ్ࣝ

    View Slide

  92. ޒഒላӃ
    .01$0/
    ૉਓ᫚৬੒ޭతՄೳੑʁ
    ৽खᢛ࿝അ

    View Slide

  93. ޒഒላӃ
    .01$0/
    զෆੋՊ൝ඟۀత
    ৽खᢛ࿝അ

    View Slide

  94. ޒഒላӃ
    .01$0/
    զཁઌላ哪Ұ׺ఔࣜޠݴʁ
    ৽खᢛ࿝അ

    View Slide

  95. ޒഒላӃ
    .01$0/
    ઌ૝辦๏፤౸໳ථʂ
    ৽खᢛ࿝അ

    View Slide

  96. ޒഒላӃ
    .01$0/
    ઌᏓ੒ʮ৽खʯ
    ৽खᢛ࿝അ

    View Slide

  97. ޒഒላӃ
    .01$0/
    ၏ላ໰తํࣜ
    ৽खᢛ࿝അ

    View Slide

  98. ޒഒላӃ
    .01$0/
    େ෦份తٕज़ඃᚙ໌ग़ိ
    ੋཁղܾಛఆ໰୊త
    ৽खᢛ࿝അ

    View Slide

  99. ޒഒላӃ
    .01$0/
    ࿝അ్ࣝ೭༌ೖἫ
    ৽खᢛ࿝അ

    View Slide

  100. ޒഒላӃ
    .01$0/
    ॏᴍɿ׭໢จ݅ن֨ख࡭
    ࣗզ੒௕
    ৽खᢛ࿝അ

    View Slide

  101. ޒഒላӃ
    .01$0/
    ৽खᢛ࿝അ

    View Slide

  102. ޒഒላӃ
    .01$0/
    ৽खᢛ࿝അ

    View Slide

  103. ޒഒላӃ
    .01$0/
    ཧղࡉઅ
    ৽खᢛ࿝അ

    View Slide

  104. ޒഒላӃ
    .01$0/
    อ࣋޷ح৺
    ৽खᢛ࿝അ

    View Slide

  105. ޒഒላӃ
    .01$0/
    ෆཁ࠶૬৴ᔒ༗ࠜᎦత說๏ྃ
    ৽खᢛ࿝അ

    View Slide

  106. ޒഒላӃ
    .01$0/
    ؁҆፻ʁ
    ৽खᢛ࿝അ

    View Slide

  107. ޒഒላӃ
    .01$0/
    ᩇॻʂ
    ৽खᢛ࿝അ

    View Slide

  108. ޒഒላӃ
    .01$0/
    ਪનॻ໨
    ৽खᢛ࿝അ

    View Slide

  109. ޒഒላӃ
    .01$0/
    ਪનॻ໨
    w:PV%POU,OPX+4ܥྻ
    w᮷阱ʂޡղʂఱॏ৽ೝࣝ+BWB4DSJQUʂ
    w&MPRVFOU+BWB4DSJQU
    w&GGFDUJWF+BWB4DSJQU

    View Slide

  110. ޒഒላӃ
    .01$0/
    閱ᩇݪ࢝ᛰ
    ৽खᢛ࿝അ

    View Slide

  111. ޒഒላӃ
    .01$0/
    ( function( global, factory ) {
    "use strict";
    // 略略
    } )( typeof window !== "undefined" ? window : this,
    function( window, noGlobal ) {
    // 略略
    IIFE
    ৽खᢛ࿝അ

    View Slide

  112. ޒഒላӃ
    .01$0/
    ࿝അ్ࣝ೭༌ग़Ἣ
    ৽खᢛ࿝അ

    View Slide

  113. ޒഒላӃ
    .01$0/
    ࢪൺडߋ༗ಘ
    ৽खᢛ࿝അ

    View Slide

  114. ޒഒላӃ
    .01$0/
    ʮ೗Ռ你ߨ౸࿈你Ѩ嫲౎ᡒత懂త࿩ʯ
    ৽खᢛ࿝അ

    View Slide

  115. ޒഒላӃ
    .01$0/
    㑚Өࣗݴࣗޠʂ
    ৽खᢛ࿝അ

    View Slide

  116. ޒഒላӃ
    .01$0/
    ሜจষ
    ৽खᢛ࿝അ

    View Slide

  117. ޒഒላӃ
    .01$0/
    ሜจষෆੋҝྃ૝ߚɺ
    ࣕੋҝྃࢥߟᢛࣗզሣ࿩
    ৽खᢛ࿝അ

    View Slide

  118. ޒഒላӃ
    .01$0/
    J5)PNF᭿ਓᩱ
    ৽खᢛ࿝അ

    View Slide

  119. ޒഒላӃ
    .01$0/
    4JEF1SPKFDU
    ৽खᢛ࿝അ

    View Slide

  120. ޒഒላӃ
    .01$0/
    ৽ख্࿏
    ৽खᢛ࿝അ

    View Slide

  121. ޒഒላӃ
    .01$0/
    ෆཁযྀɺෆཁᛇ๩

    View Slide

  122. ޒഒላӃ
    .01$0/
    photo by redjar

    View Slide

  123. ޒഒላӃ
    .01$0/
    photo by Quality & Style

    View Slide

  124. ޒഒላӃ
    .01$0/
    Ҏ্Ͱ͢ʂ

    View Slide

  125. ޒഒላӃ
    .01$0/
    歡迎加
    好友

    View Slide