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

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

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” (ҙ༁)
    - μάϥε ΫϩοϑΥʔυ ϚδࠔΔΘʔ(૝૾)
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'
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. ࣭໰λΠϜ?