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

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. ࣭໰λΠϜ?