Upgrade to Pro — share decks privately, control downloads, hide ads and more …

第7回みゆっき☆Think 本気で学ぶ JavaScript

第7回みゆっき☆Think 本気で学ぶ JavaScript

2011/09 にニコ生で放送した「みゆっき☆Think」の資料
http://www.nicovideo.jp/watch/1315569331

B6b32d5d2a05b7cebaea86bdf3e95077?s=128

Takuya Fujimura

September 02, 2011
Tweet

Transcript

  1. ຊؾͷ JavaScript

  2. ຊؾͷ JavaScript ϓϩάϥϛϯάݴޠͱͯ͠ͷجૅͷجૅ

  3. ຊؾͷ JavaScript ϓϩάϥϛϯάݴޠͱͯ͠ͷجૅͷجૅ

  4. ࣗݾ঺հ

  5. ࣗݾ঺հ • ౻ଜ ୓໵ (id: tlync) • ϞόΠϧࣄۀຊ෦ اը։ൃ෦
 •

    εϚʔτϑΥϯ޲͚ΞϓϦ։ൃ
 • υϫϯΰ৽ࢀऀ … ೖࣾ3ϲ݄໨
  6. ͱ͜ΖͰ

  7. ͋Δਓ͸͜͏ݴ͍·ͨ͠

  8. “JavaScript is the only language that people think they can

    program without actually learning it.”  ! - Douglas Crockford
  9. ೔ຊޠͰ͓k?

  10. “JavaScript ͸ΈΜͳษڧ͠ͳͯ͘΋ग़དྷΔ ͱࢥͬͯΔ།ҰͷݴޠͩΑͶ HAHA” (ҙ༁)  - μάϥε ΫϩοϑΥʔυ ϚδࠔΔΘʔ(૝૾)

  11. None
  12. ศརա͗Δ

  13. Ͱ΋…

  14. jQuery ͕࢖͑Δ ≠ JavaScript ͕࢖͑Δ

  15. ྑ͘΋ѱ͘΋ ͪΐͬͱαΠτΛ͍͡ΔҐͳΒ ݴޠͦͷ΋ͷͷཧղ͕ͳͯ͘΋ ࢖͑ͯ͠·͏

  16. ͱ͍͏ࣄͰ

  17. ࠓ೔ͷ໨ඪ

  18. JavaScript ͷ ϓϩάϥϛϯάݴޠͱͯ͠ͷجૅ Λཧղ͢Δ

  19. ࠓ೔ֶͿ͜ͱ

  20. 3͚ͭͩ

  21. ࠓ೔ֶͿ͜ͱ

  22. 1.Object Λཧղ͢Δ
 ɾ΄ͱΜͲ͢΂ͯ͸ Object
 ɾ͢΂ͯͷ Object ͸ࣗ਎ͷݪܕΛ஌͍ͬͯΔ ࠓ೔ֶͿ͜ͱ

  23. 1.Object Λཧղ͢Δ
 ɾ΄ͱΜͲ͢΂ͯ͸ Object
 ɾ͢΂ͯͷ Object ͸ࣗ਎ͷݪܕΛ஌͍ͬͯΔ ࠓ೔ֶͿ͜ͱ 2. Function

    Λཧղ͢Δ
 ɾFunction ͷ 2 ͭͷإ
 ɾܧঝͷ࢓૊Έ - prototype ͱ __proto__
  24. 1.Object Λཧղ͢Δ
 ɾ΄ͱΜͲ͢΂ͯ͸ Object
 ɾ͢΂ͯͷ Object ͸ࣗ਎ͷݪܕΛ஌͍ͬͯΔ ࠓ೔ֶͿ͜ͱ 2. Function

    Λཧղ͢Δ
 ɾFunction ͷ 2 ͭͷإ
 ɾܧঝͷ࢓૊Έ - prototype ͱ __proto__ 3. Closure Λཧղ͢Δ
 ɾ໊લղܾͷ࢓૊Έ - είʔϓνΣΠϯ
 ɾ࣮͸͍ͭ΋਎ۙʹ
  25. ࠓ೔΍Βͳ͍ࣄ

  26. • จ๏ͷ͸ͳ͠
 … ͍͍ͩͨΈΜͳ஌ͬͯΔΑͶ
 … ஌Βͳ͚Ε͹ Mozilla ͷαΠτͱ͔ ࠓ೔΍Βͳ͍ࣄ

  27. • จ๏ͷ͸ͳ͠
 … ͍͍ͩͨΈΜͳ஌ͬͯΔΑͶ
 … ஌Βͳ͚Ε͹ Mozilla ͷαΠτͱ͔ ࠓ೔΍Βͳ͍ࣄ •ΫϥΠΞϯταΠυεΫϦϓτͷ͸ͳ͠


    … DOM ͱ͔ Ajax ͱ͔
 … ͦΕ IE ͩͱ(ry
  28. • จ๏ͷ͸ͳ͠
 … ͍͍ͩͨΈΜͳ஌ͬͯΔΑͶ
 … ஌Βͳ͚Ε͹ Mozilla ͷαΠτͱ͔ ࠓ೔΍Βͳ͍ࣄ •ΫϥΠΞϯταΠυεΫϦϓτͷ͸ͳ͠


    … DOM ͱ͔ Ajax ͱ͔
 … ͦΕ IE ͩͱ(ry •ECMA Script 5 ͷ͸ͳ͠
 … ͕࣌ؒͳ͔ͬͨͷͰػձ͕͋Ε͹·ͨ
 … ิ଍ͱͯ͠࿩ͤΔͱ͜Ζ͸࿩͠·͢
  29. • 5෼ͰֶͿ JavaScript ͷྺ࢙ • Object ͔Βཧղ͢Δ JavaScript • Function

    ͷ2ͭͷإ • Closure ͱείʔϓ • ࣭໰λΠϜ Agenda
  30. 5෼ͰֶͿ JavaScript ͷྺ࢙

  31. 5෼ͰֶͿ JavaScript ͷྺ࢙ ※஫: ࿩൒෼Ͱ͓ฉ͖͍ͩ͘͞

  32. ఏڙ 
 ࣮͸ɺԼهࢿྉͷωλͷେ൒ΛύΫഈआͤͯ͞௖͖·ͨ͠ɻ
 ৺Α͘ڐ୚௖͍ͨ @bad_at_math ͞Μ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ
 http://www.slideshare.net/badatmath/js-shistory

  33. ࣌͸ 1995 ೥…

  34. Netscape Navigator 2.0 ͕ϦϦʔε

  35. ͜ͷ࣌ҰॹʹϦϦʔε͞Εͨͷ͕ ࠷ॳͷ JavaScript (։ൃ౰ॳ͸ LiveScript ͱݺ͹Ε͍ͯͨ)

  36. ࡞ͬͨͷ͸͜ͷਓ ϒϨϯμϯ ΞΠΫ ݱ Mozilla CTO

  37. ࣮͸΋ͱ΋ͱ Java ౥ࡌ༧ఆͩͬͨ(Β͍͠)

  38. •Java Applet ͸ෳࡶ͗͢ •ॳ৺ऀʹ͸ෑډ͕͔͍ͨ ݒҊࣄ߲

  39. ͳʹ͔͜͏…΋ͬͱ؆୯ͳ…

  40. εΫϦϓτݴޠ͕΄͍͠!

  41. Netscape Navigator ʹ εΫϦϓτݴޠΛ!

  42. ௼ΒΕͨͷ͸͜ͷਓ ϒϨϯμϯ ΞΠΫ ݱ Mozilla CTO http://brendaneich.com/tag/history/

  43. ʮScheme Λϒϥ΢β্ʹ…ʯ http://brendaneich.com/tag/history/

  44. ʮ·͡Ͱ!? ΍Γ͍ͨ!ʯ ※SICP େ޷͖ͬࢠ http://brendaneich.com/tag/history/

  45. స৬ http://brendaneich.com/tag/history/

  46. ʮ΍ͬͺ Java ͬΆ͍ͷΛཔΉʯ http://brendaneich.com/tag/history/

  47. ʮ͑!? Scheme ͷ࿩͸…?ʯ ※SICP େ޷͖ͬࢠ http://brendaneich.com/tag/history/

  48. •௒୹ظ… •Java ͷษڧ΋͜Ε͔Β͞…… •Gabage Collection ΋ඞཁ!? ͎͋……… ࣮૷΁

  49. Scheme
 (ؔ਺ܕͷҰ෦ͷಛੑ) Self
 (Prototype ϕʔεͷOOP) Java
 (จ๏) JavaScript

  50. ϒϨϯμϯᐌ͘

  51. “΋͏ͪΐͬͱ࣌ؒ͘ΕΕ͹ɺ ͋ͷ Global Object ͷ༁෼͔Βͳ͍ ࣮૷ͳΜͯ͠ͳ͔ͬͨͷʹ…” http://brendaneich.com/tag/history/

  52. ͦΜͳ͜Μͳ͕ JavaScript ͷੜ·Ε

  53. ର͢Δ MS

  54. •Netscape ʹ௥ै •JavaScript ͷϚχϡΞϧΛݩʹಠ࣮ࣗ૷ JScript

  55. •Netscape ʹ௥ै •JavaScript ͷϚχϡΞϧΛݩʹಠ࣮ࣗ૷ JScript ϚχϡΞϧʹؒҧ͍͕͋ΔͳͲͷཁҼͰɺ
 ࣮૷͕൵ࢂͳ͜ͱʹ…

  56. ͦͷͨΊ…

  57. IE 3.0 Beta JavaScript ࢖͑ΔΑ!

  58. IE 3.0 ਖ਼ࣜ൛ JavaScript ࢖͑ΔΑ!

  59. IE 3.0 ਖ਼ࣜ൛

  60. IE 3.0 ਖ਼ࣜ൛ ແ͔ͬͨ͜ͱʹ

  61. •͜ͷ··͡ΌMS ʹ৯ΘΕΔ… •ඪ४Խͯ͠೉ΛಀΕΑ͏ Netscape ਞӦ

  62. W3C?

  63. ʮ͍΍ɺࠓ·Ͱ޷͖উख΍͖ͬͯͯΔ͠ɺ ࠓ͞Β… ͪΐͬͱͶ… ʯ

  64. ʮ͍΍ɺࠓ·Ͱ޷͖উख΍͖ͬͯͯΔ͠ɺ ࠓ͞Β… ͪΐͬͱͶ… ʯ ※W3Cඪ४Λແࢹͯ͠৭ʑ࣮૷ʹ͚͖ͬͭͯͨ͘

  65. ඪ४Խ΁ͷཱྀ…

  66. ḷΓ͍ͭͨͷ͸…

  67. ECMA

  68. •εΠεɺδϡωʔϒʹຊڌ஍Λஔ͘ඪ४ػ ؔ •Microsoft ΋ҕһΛͭͱΊ͍ͯΔ ECMA

  69. ͜͏ͯ͠͸͡·ͬͨ ECMA Script(ES) ͷྺ࢙

  70. ※ JavaScript ͷݴޠͱͯ͠ͷ࢓༷͸ ECMA ͍ͬͯ͏ͱ͜ΖͰ ܾΊ͍ͯΔͬͯ͜ͱ

  71. •͘͝جຊతͳจ๏ •͘͝جຊతͳԋࢉࢠ •͘͝جຊతͳΦϒδΣΫτ •਺஋͸ IEEE754 (ޙʹࡂ͍ͷݩͱͳΔ…) •௒ϛχϚϜͳ࢓༷ ES 1

  72. •ಛهࣄ߲ͳ͠ •ఏग़༻ʹࣈ໘Λͪΐͬͱมߋ ES 2

  73. •ਖ਼نදݱಋೖ •String ·ΘΓͷڧԽ •try/catch ͷྫ֎ॲཧ •Τϥʔॲཧ·ΘΓ ES 3
 ※ࠓ೔ͷ࿩ͷϕʔε

  74. ES 4 •Ϋϥε •ΠϯλʔϑΣʔε •໊લۭؒ •ύοέʔδͳͲ… •ϔϏʔڃ

  75. ES 4 •Ϋϥε •ΠϯλʔϑΣʔε •໊લۭؒ •ύοέʔδͳͲ… •ϔϏʔڃ $SPDLGPSEઅɺᖵ྾ ͦΜͳ࢓༷ೝΊΒΕΔ͔͊οοοʂʂʂ μάϥε

    ΫϩοϑΥʔυ ݱΔ
  76. ES 4 $SPDLGPSEઅɺᖵ྾ ͦΜͳ࢓༷ೝΊΒΕΔ͔͊οοοʂʂʂ μάϥε ΫϩοϑΥʔυ ݱΔ

  77. $SPDLGPSEઅɺᖵ྾ ͦΜͳ࢓༷ೝΊΒΕΔ͔͊οοοʂʂʂ μάϥε ΫϩοϑΥʔυ ݱΔ

  78. ແ͔ͬͨ͜ͱʹ (தࢭ)

  79. ES 5 •݁ہ ES 3.1 ϕʔεʹ •৽͍͠จ๏͸௥Ճ͠ͳ͍ •strict Ϟʔυ •JSON

    αϙʔτ •ϓϩύςΟΞΫηοα·ΘΓ ※࠷ۙͷϒϥ΢β͸΄΅ରԠ͍ͯ͠Δ http://kangax.github.com/es5-compat-table/
  80. ES Harmony •Class ͳͲ ES 4 ͷ࢓༷͕Ұ෦ΧϜόοΫ? •2೥ޙ͘Β͍? •ৄࡉ͸ wiki

    ࢀর http://wiki.ecmascript.org/doku.php?id=harmony:harmony
  81. 5෼ͰֶͿ JavaScript ͷྺ࢙ ׬

  82. Object ͔Βཧղ͢Δ JavaScript

  83. ͢΂ͯ͸ Object

  84. …ͱݴ͍͍ͨͱ͜Ζ͚ͩͲ
 ͦ͏Ͱ͸ͳ͍

  85. Object ܕ
 Object
 Function
 Array
 String
 Number
 Boolean
 RegExp
 Date


    etc...
 ͨͩɺ΄ͱΜͲ͸ Object null
 undefined ※ࣗಈม׵ string
 number
 boolean جຊσʔλܕ
  86. ͭ·Γ…

  87. Object Λ੍͢Δ΋ͷ͕ JavScript Λ੍͢

  88. Object Λ੍͢Δ΋ͷ͕ JavScript Λ੍͢ ※͜Ε͕ݴ͍͔͚ͨͬͨͩͱ͍͏ᷚ΋

  89. Object ͱ͸Կ͔Λཧղ͢Δͱ JavaScript ΁ͷཧղ͕ਂ·Δ

  90. Ͱ͸ Object ͱ͸Կ͔?

  91. Object ͱ͸ɺ ໊લ෇͖ͷ஋ͷೖΕ΋ͷͰ͋Δ

  92. Object ͱ͸ɺ ໊લ෇͖ͷ஋ͷೖΕ΋ͷͰ͋Δ ͦͯ͠ɺ͍ͭͰ΋ɺ͍͔Α͏ʹͰ΋ૢ࡞Ͱ͖Δ

  93. Object ͱ͸ɺ ໊લ෇͖ͷ஋ͷೖΕ΋ͷͰ͋Δ ͦͯ͠ɺ͍ͭͰ΋ɺ͍͔Α͏ʹͰ΋ૢ࡞Ͱ͖Δ ͦ͏ɺͦΕ͕ϏϧτΠϯΦϒδΣΫτͰ͋ͬͯ΋…

  94. • ۭͷ Object ͷੜ੒
 … ஋ͷ௥Ճ
 … ଞͷΦϒδΣΫτͷ௥Ճ ༡ΜͰΈΔ •ϏϧτΠϯΦϒδΣΫτΛ͍͡Δ


    … ͑ͬɺ͜Ε΋ૢ࡞Ͱ͖Δͷ?
  95. • ۭͷ Object ࡞੒͸ {} ͔ new Object()
 ɾ{} ͷදه͸ཪͰ

    new Object() ͕ݺ͹Ε͍ͯΔ 
 ɾυοτ͔தׅހͰϓϩύςΟ΁ΞΫηεͰ͖Δ
 ɾޙऀ͸ Java ʹ͓͚ΔϦϑϨΫγϣϯΈ͍ͨʹ࢖͑Δ ෼͔ͬͨ͜ͱ •Object ܕ͸ಈతʹ௥Ճ΋࡟আͳΜͰ΋Ͱ͖Δ
 ɾجຊσʔλܕ͚ͩͰͳؔ͘਺΋ Object ࣗ਎΋ؚΊΒ
 ΕΔ
 ɾҰ෦ɺॲཧܥʹΑͬͯ͸ίΞͱͳΔΦϒδΣΫτ͸ 
 ແཧͳ΋ͷ΋͋Δ
  96. ΋͏ͻͱͭେ੾ͳ͜ͱ

  97. ͢΂ͯͷ Object ͸ ࣗ਎ͷݪܕͱ ͳͬͨ Object Λ࣋ͭ

  98. ϓϩτλΠϓ(__proto__) miyukki name miyukki age 18 __proto__ toString ಺෦࣮૷ ଞ…

    ಺෦࣮૷ __proto__ OVMM Object.prototype
  99. ϓϩτλΠϓ(__proto__) miyukki name miyukki age 18 __proto__ toString ಺෦࣮૷ ଞ…

    ಺෦࣮૷ __proto__ OVMM Object.prototype ※ __proto__ ͷϓϩύςΟ໊͸ॲཧܥʹΑͬͯҟͳΔ ྫ͑͹ IE Ͱ͸࢖͑ͳ͍ ·ͨ ES 5 Ͱ͸ඇਪ঑
  100. ࢼͯ͠ΈΔ

  101. Object ·ͱΊ

  102. • ΄ͱΜͲ͢΂ͯ͸ Object
 ɾجຊσʔλܕɺnull, undefined Ҏ֎͸ Object
 ɾجຊσʔλܕ͸҉໧తʹ Object ͱͯ͠ৼΔ·͏

    Object ·ͱΊ
  103. • ΄ͱΜͲ͢΂ͯ͸ Object
 ɾجຊσʔλܕɺnull, undefined Ҏ֎͸ Object
 ɾجຊσʔλܕ͸҉໧తʹ Object ͱͯ͠ৼΔ·͏

    Object ·ͱΊ •Object ͸ϓϩύςΟͷೖΕ΋ͷ (= ϋογϡ)
 ɾ໊લ(จࣈྻ)ɺ஋(ͳΜͰ΋)ͷϖΞʔͷೖΕ΋ͷ
 ɾಈతʹϓϩύςΟΛ௥Ճɺ࡟আͰ͖Δ
  104. • ΄ͱΜͲ͢΂ͯ͸ Object
 ɾجຊσʔλܕɺnull, undefined Ҏ֎͸ Object
 ɾجຊσʔλܕ͸҉໧తʹ Object ͱͯ͠ৼΔ·͏

    Object ·ͱΊ •Object ͸ϓϩύςΟͷೖΕ΋ͷ (= ϋογϡ)
 ɾ໊લ(จࣈྻ)ɺ஋(ͳΜͰ΋)ͷϖΞʔͷೖΕ΋ͷ
 ɾಈతʹϓϩύςΟΛ௥Ճɺ࡟আͰ͖Δ •͢΂ͯͷ Object ͸ࣗ਎ͷݪܕ(__proto__)Λ࣋ͭ
 ɾࠓ͸ͱΓ͋͑ͣͳΜͱͳ͘ͷཧղͰ OK
 

  105. Function ͷ 2 ͭͷإ

  106. function sayHello(){ console.log('Hello!'); }

  107. > typeof sayHello

  108. > typeof sayHello 'function'

  109. ͳΜͷม఩΋ͳ͍ී௨ͷؔ਺Ͱ͢Ͷ

  110. > typeof Object

  111. > typeof Object 'function'

  112. None
  113. ͑ɺ'function' ?

  114. Object ܕ
 Object
 Function
 Array
 String
 Number
 Boolean
 RegExp
 Date


    etc...

  115. Object ܕ
 typeof Object => 'function'
 typeof Function => 'function'


    typeof Array => 'function'
 typeof String => 'function'
 typeof Number => 'function'
 typeof Boolean => 'function'
 typeof RegExp => 'function'
 typeof Date => 'function'
 ...

  116. Object ܕ
 Object instanceof Function=> true
 Function instanceof Function =>

    true
 Array instanceof Function => true
 String instanceof Function => true
 Number instanceof Function => true
 Boolean instanceof Function => true
 RegExp instanceof Function => true
 Date instanceof Function => true
 ...

  117. Ͳ͏΍Β͍ͭ͜Β͸ Function Β͍͠

  118. ࣮͸…

  119. Function ͸2ͭͷ໾ׂΛ΋ͭ

  120. ίϯετϥΫλ

  121. ίϯετϥΫλ ΦϒδΣΫτΛੜ੒͢Δؔ਺

  122. new ΩʔϫʔυͱҰॹʹ࢖͏ͱ ผਓ֨ͷ Function ͕ൃಈ

  123. ίϯετϥΫλͰߦΘΕΔ͜ͱ

  124. 1.ۭͷ Object Λੜ੒ 2.಺෦తʹ [[Class]] ͱ͍͏छผΛද͢ϓϩύ ςΟΛ͕ηοτ͞ΕΔ 3.prototype ΦϒδΣΫτ͕ɺ৽͍͠ Object

    ͷ __proto__ ϓϩύςΟʹηοτ͞ΕΔ 4.࡞੒ͨ͠ Object Λ this ͱͯ͠ίϯετϥΫ λΛ࣮ߦ 5.ઃఆ͞Εͨ৽͍͠ Object Λฦ͢ ίϯετϥΫλͰߦΘΕΔ͜ͱ
  125. ࢼͯ͠ΈΔ

  126. Person __proto__ Function.prototype sayHello <function> Function __proto__ Object.prototype ૊ΈࠐΈؔ਺… <function>

    Object __proto__ OVMM ૊ΈࠐΈؔ਺… <function> __proto__ Λḷͬͯ
 ϓϩύςΟ͕୳͞ΕΔ var miyukki = new Person('miyukki'); miyukki.toString(); // Object.prototype ͷϝιου
  127. ͜Ε͕ϓϩτλΠϓνΣʔϯ

  128. Function ·ͱΊ

  129. • Function ͸ new ΩʔϫʔυͱηοτͰίϯε τϥΫλͱͯ͠ػೳ͢Δ - ίϯετϥΫλؔ਺ʹఆٛ͞Εͨ prototype ΦϒδΣ

    Ϋτ͕ɺ৽͘͠࡞੒͞ΕΔΦϒδΣΫτͷϓϩτλΠ ϓ(__proto__)ͱͯ͠ηοτ͞ΕΔ - ͜͏ͯ͠ Prototype Chain ͕࡞ΒΕΔ Function ·ͱΊ
  130. • Function ͸ new ΩʔϫʔυͱηοτͰίϯε τϥΫλͱͯ͠ػೳ͢Δ - ίϯετϥΫλؔ਺ʹఆٛ͞Εͨ prototype ΦϒδΣ

    Ϋτ͕ɺ৽͘͠࡞੒͞ΕΔΦϒδΣΫτͷϓϩτλΠ ϓ(__proto__)ͱͯ͠ηοτ͞ΕΔ - ͜͏ͯ͠ Prototype Chain ͕࡞ΒΕΔ Function ·ͱΊ •ϓϩτλΠϓʹ͸ 2 ͭͷ֓೦͕͋Δ - Function ʹఆٛ͢Δ prototype ͸ɺͦͷίϯετϥΫλ ͔Βੜ੒͞ΕΔΦϒδΣΫτୡͰڞ༗͍ͨ͠ΦϒδΣΫτ Λఆٛ͢Δҝʹ࢖͍ɺ - Object ʹඥ෇͘ __proto__ ͸ɺͦͷڞ༗ΦϒδΣΫτ Λࢀর͢Δ(ḷΔ)ҝʹ࢖ΘΕΔ
  131. ஫ҙॻ͖

  132. • ES5 Ͱ͸ new Λ࢖Θͳ͍ Object.create ϝ ιου͕༻ҙ͞Ε͍ͯΔɻ • ES3

    Ͱ͸ग़དྷͳ͍ null Λ prototype ͱͨ͠ɺ ຊ౰ͷۭͷ Object Λ࡞Δ͜ͱ΋Ͱ͖Δɻ ஫ҙॻ͖
  133. Closure ͬͯͳ͊ʹ?

  134. Closure ͬͯͳ͊ʹ? ※೉қ౓͔ͨΊ

  135. …ͱͦͷલʹ

  136. JavaScript ͷείʔϓΛ͓͞Β͍

  137. جຊతͳείʔϓ͸2छྨ͚ͩ •άϩʔόϧείʔϓ •ϩʔΧϧείʔϓ

  138. جຊతͳείʔϓ͸2छྨ͚ͩ •άϩʔόϧείʔϓ •ϩʔΧϧείʔϓ ※ with Ωʔϫʔυͱ͍͏είʔϓΛมߋ͢Δํ๏΋͋Δ͚Ͳɺ͜͜Ͱ͸ׂѪ

  139. <script type="text/javascript"> // ؔ਺֎Ͱͷએݴ => άϩʔόϧείʔϓ => άϩʔόϧม਺
 var count

    = 10; console.log(count); //=> 10 ! ! var hello = function(){ // ؔ਺಺Ͱͷએݴ => ϩʔΧϧείʔϓ => ϩʔΧϧม਺ var hoge = 'hoge'; ! // ϩʔΧϧม਺ => ͜ͷؔ਺಺͔ΒͷΞΫηεՄೳ console.log(hoge); //=> hoge ! // άϩʔόϧม਺ => Ͳ͔͜ΒͰ΋ΞΫηεՄೳ console.log(count); //=> 10 }
 </script>
  140. <script type="text/javascript"> // ؔ਺֎Ͱͷએݴ => άϩʔόϧείʔϓ => άϩʔόϧม਺
 var count

    = 10; console.log(count); //=> 10 ! ! var hello = function(){ // ؔ਺಺Ͱͷએݴ => ϩʔΧϧείʔϓ => ϩʔΧϧม਺ var hoge = 'hoge'; ! // ϩʔΧϧม਺ => ͜ͷؔ਺಺͔ΒͷΞΫηεՄೳ console.log(hoge); //=> hoge ! // άϩʔόϧม਺ => Ͳ͔͜ΒͰ΋ΞΫηεՄೳ console.log(count); //=> 10 }
 </script> ؔ਺಺ => ϩʔΧϧείʔϓ ؔ਺֎ => άϩʔόϧείʔϓ
  141. ཁ͸ ! Ͳ͔͜ΒͰ΋ΞΫηεͰ͖ΔྖҬ͕ɺ ʮάϩʔόϧείʔϓʯ ! ؔ਺಺ͷΈ͔ΒΞΫηεͰ͖ΔྖҬ͕ ʮϩʔΧϧείʔϓʯ ! ͦΕ͚ͩɻ

  142. Ͱ͸ɺείʔϓ಺ͷม਺͸ Ͳ͏ղܾ͞ΕΔ͔

  143. είʔϓνΣΠϯ

  144. είʔϓνΣΠϯ ※ͪΐͬͱ؆ૉ൛

  145. ྫ͑͹͜ͷ༷ͳ࣌ <script type="text/javascript"> var hoge = ‘hoge’; ! function add(n1,

    n2){ var sum = n1 + n2; return sum; } ! add(10, 20);
 </script>
  146. ྫ͑͹͜ͷ༷ͳ࣌ <script type="text/javascript"> var hoge = ‘hoge’; ! function add(n1,

    n2){ var sum = n1 + n2; return sum; } ! add(10, 20);
 </script> BEE n1 10 n2 20 sum undefined arguments {0: 10, 1: 20,...}
  147. ྫ͑͹͜ͷ༷ͳ࣌ <script type="text/javascript"> var hoge = ‘hoge’; ! function add(n1,

    n2){ var sum = n1 + n2; return sum; } ! add(10, 20);
 </script> BEE n1 10 n2 20 sum undefined arguments {0: 10, 1: 20,...} HMPCBM hoge 'hoge' add <function> ଞ૊ΈࠐΈͷม਺
  148. BEE n1 10 n2 20 sum undefined arguments {0: 10,

    1: 20,...} HMPCBM hoge 'hoge' add <function> ଞ૊ΈࠐΈͷม਺ ͜ͷॱ൪Ͱม਺͕୳͞ΕΔ
  149. ͜Ε͕είʔϓνΣʔϯ

  150. Ͱ͸ Closure ͱ͸

  151. ࣮͸΋͏ී௨ʹ࢖ͬͯΔ

  152. ࢼͯ͠ΈΔ

  153. Closure + είʔϓ ·ͱΊ

  154. Closure + είʔϓ ·ͱΊ •جຊతͳείʔϓ͸2छྨ - άϩʔόϧείʔϓͱϩʔΧϧείʔϓ - ϩʔΧϧείʔϓ಺Ͱ͸Ͳ͜Ͱએݴͯ͠΋ಉ͡ =

    
 ϒϩοΫείʔϓ͕ͳ͍
  155. Closure + είʔϓ ·ͱΊ •جຊతͳείʔϓ͸2छྨ - άϩʔόϧείʔϓͱϩʔΧϧείʔϓ - ϩʔΧϧείʔϓ಺Ͱ͸Ͳ͜Ͱએݴͯ͠΋ಉ͡ =

    
 ϒϩοΫείʔϓ͕ͳ͍ •ม਺ͷ໊લղܾͷ࢓૊Έ - ؔ਺ͷ࣮ߦίϯςΩετຖʹม਺Λอ࣋͢ΔΦϒδΣ΢τ ͕ੜ੒͞ΕΔɻͪͳΈʹ͜ΕΛ Activation ΦϒδΣΫ τ ͱݺͿɻάϩʔόϧͷྫ͸ ม਺ΦϒδΣΫτ ͱݺͿ - ม਺͸ͦΕΒͷΦϒδΣΫτΛอ࣋ͨ͠ είʔϓνΣΠ ϯ ḷͬͯղܾ͞ΕΔɻ

  156. Closure + είʔϓ ·ͱΊ

  157. • Closure ͱ͸ɺείʔϓΛอ࣋ͨؔ͠਺ͱม਺ ͷ·ͱ·Γ - ͋Δؔ਺ʹ͓͚Δ֎ଆͷྖҬΛ ϨΩγΧϧείʔϓ ͱݺͿ - jQuery

    ࢖ͬͯΔͱී௨ʹ࢖ͬͯΔ - ࢖͍ಓ͸ແݶେɻෳࡶͳॲཧ͕ޮ཰తʹɺΤϨΨϯτ ʹॻ͚ͨΓ Closure + είʔϓ ·ͱΊ
  158. ·ͱΊ

  159. ࠓ೔ֶΜͩ͜ͱ

  160. 1.Object ɹ
 ɾ΄ͱΜͲ͢΂ͯ͸ Objectɻ
 ɾϓϩύςΟͷೖΕ΋ͷɻ͔͠΋ಈతɺࣗ༝ࣗࡏɻ ࠓ೔ֶΜͩ͜ͱ

  161. 1.Object ɹ
 ɾ΄ͱΜͲ͢΂ͯ͸ Objectɻ
 ɾϓϩύςΟͷೖΕ΋ͷɻ͔͠΋ಈతɺࣗ༝ࣗࡏɻ ࠓ೔ֶΜͩ͜ͱ 2. Functionɹ
 ɾFunction ͷ΋͏ͻͱͭͷإ͸ίϯετϥΫλ


    ɾ2ͭͷϓϩτλΠϓͱϓϩτλΠϓνΣʔϯͷ࿩͠
  162. 1.Object ɹ
 ɾ΄ͱΜͲ͢΂ͯ͸ Objectɻ
 ɾϓϩύςΟͷೖΕ΋ͷɻ͔͠΋ಈతɺࣗ༝ࣗࡏɻ ࠓ೔ֶΜͩ͜ͱ 2. Functionɹ
 ɾFunction ͷ΋͏ͻͱͭͷإ͸ίϯετϥΫλ


    ɾ2ͭͷϓϩτλΠϓͱϓϩτλΠϓνΣʔϯͷ࿩͠ 3. Closure ɹ
 ɾείʔϓ͸2ͭ͋ΔɻείʔϓνΣʔϯͷ࿩͠
 ɾ࣮͸͍ͭ΋਎ۙʹ

  163. ࣭໰λΠϜ?