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

Slide 1

Slide 1 text

ຊؾͷ JavaScript

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

ࣗݾ঺հ

Slide 5

Slide 5 text

ࣗݾ঺հ • ౻ଜ ୓໵ (id: tlync) • ϞόΠϧࣄۀຊ෦ اը։ൃ෦  • εϚʔτϑΥϯ޲͚ΞϓϦ։ൃ  • υϫϯΰ৽ࢀऀ … ೖࣾ3ϲ݄໨

Slide 6

Slide 6 text

ͱ͜ΖͰ

Slide 7

Slide 7 text

͋Δਓ͸͜͏ݴ͍·ͨ͠

Slide 8

Slide 8 text

“JavaScript is the only language that people think they can program without actually learning it.” ! - Douglas Crockford

Slide 9

Slide 9 text

೔ຊޠͰ͓k?

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

ศརա͗Δ

Slide 13

Slide 13 text

Ͱ΋…

Slide 14

Slide 14 text

jQuery ͕࢖͑Δ ≠ JavaScript ͕࢖͑Δ

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

ͱ͍͏ࣄͰ

Slide 17

Slide 17 text

ࠓ೔ͷ໨ඪ

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

ࠓ೔ֶͿ͜ͱ

Slide 20

Slide 20 text

3͚ͭͩ

Slide 21

Slide 21 text

ࠓ೔ֶͿ͜ͱ

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

1.Object Λཧղ͢Δ  ɾ΄ͱΜͲ͢΂ͯ͸ Object  ɾ͢΂ͯͷ Object ͸ࣗ਎ͷݪܕΛ஌͍ͬͯΔ ࠓ೔ֶͿ͜ͱ 2. Function Λཧղ͢Δ  ɾFunction ͷ 2 ͭͷإ  ɾܧঝͷ࢓૊Έ - prototype ͱ __proto__ 3. Closure Λཧղ͢Δ  ɾ໊લղܾͷ࢓૊Έ - είʔϓνΣΠϯ  ɾ࣮͸͍ͭ΋਎ۙʹ

Slide 25

Slide 25 text

ࠓ೔΍Βͳ͍ࣄ

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

• จ๏ͷ͸ͳ͠  … ͍͍ͩͨΈΜͳ஌ͬͯΔΑͶ  … ஌Βͳ͚Ε͹ Mozilla ͷαΠτͱ͔ ࠓ೔΍Βͳ͍ࣄ •ΫϥΠΞϯταΠυεΫϦϓτͷ͸ͳ͠  … DOM ͱ͔ Ajax ͱ͔  … ͦΕ IE ͩͱ(ry •ECMA Script 5 ͷ͸ͳ͠  … ͕࣌ؒͳ͔ͬͨͷͰػձ͕͋Ε͹·ͨ  … ิ଍ͱͯ͠࿩ͤΔͱ͜Ζ͸࿩͠·͢

Slide 29

Slide 29 text

• 5෼ͰֶͿ JavaScript ͷྺ࢙ • Object ͔Βཧղ͢Δ JavaScript • Function ͷ2ͭͷإ • Closure ͱείʔϓ • ࣭໰λΠϜ Agenda

Slide 30

Slide 30 text

5෼ͰֶͿ JavaScript ͷྺ࢙

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

࣌͸ 1995 ೥…

Slide 34

Slide 34 text

Netscape Navigator 2.0 ͕ϦϦʔε

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

ͳʹ͔͜͏…΋ͬͱ؆୯ͳ…

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

Netscape Navigator ʹ εΫϦϓτݴޠΛ!

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

ϒϨϯμϯᐌ͘

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

ͦΜͳ͜Μͳ͕ JavaScript ͷੜ·Ε

Slide 53

Slide 53 text

ର͢Δ MS

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

ͦͷͨΊ…

Slide 57

Slide 57 text

IE 3.0 Beta JavaScript ࢖͑ΔΑ!

Slide 58

Slide 58 text

IE 3.0 ਖ਼ࣜ൛ JavaScript ࢖͑ΔΑ!

Slide 59

Slide 59 text

IE 3.0 ਖ਼ࣜ൛

Slide 60

Slide 60 text

IE 3.0 ਖ਼ࣜ൛ ແ͔ͬͨ͜ͱʹ

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

W3C?

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

ඪ४Խ΁ͷཱྀ…

Slide 66

Slide 66 text

ḷΓ͍ͭͨͷ͸…

Slide 67

Slide 67 text

ECMA

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

•ಛهࣄ߲ͳ͠ •ఏग़༻ʹࣈ໘Λͪΐͬͱมߋ ES 2

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

ແ͔ͬͨ͜ͱʹ (தࢭ)

Slide 79

Slide 79 text

ES 5 •݁ہ ES 3.1 ϕʔεʹ •৽͍͠จ๏͸௥Ճ͠ͳ͍ •strict Ϟʔυ •JSON αϙʔτ •ϓϩύςΟΞΫηοα·ΘΓ ※࠷ۙͷϒϥ΢β͸΄΅ରԠ͍ͯ͠Δ http://kangax.github.com/es5-compat-table/

Slide 80

Slide 80 text

ES Harmony •Class ͳͲ ES 4 ͷ࢓༷͕Ұ෦ΧϜόοΫ? •2೥ޙ͘Β͍? •ৄࡉ͸ wiki ࢀর http://wiki.ecmascript.org/doku.php?id=harmony:harmony

Slide 81

Slide 81 text

5෼ͰֶͿ JavaScript ͷྺ࢙ ׬

Slide 82

Slide 82 text

Object ͔Βཧղ͢Δ JavaScript

Slide 83

Slide 83 text

͢΂ͯ͸ Object

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

Object ܕ  Object  Function  Array  String  Number  Boolean  RegExp  Date  etc...  ͨͩɺ΄ͱΜͲ͸ Object null  undeﬁned ※ࣗಈม׵ string  number  boolean جຊσʔλܕ

Slide 86

Slide 86 text

ͭ·Γ…

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

Object ͱ͸Կ͔Λཧղ͢Δͱ JavaScript ΁ͷཧղ͕ਂ·Δ

Slide 90

Slide 90 text

Ͱ͸ Object ͱ͸Կ͔?

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

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

Slide 93

Slide 93 text

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

Slide 94

Slide 94 text

• ۭͷ Object ͷੜ੒  … ஋ͷ௥Ճ  … ଞͷΦϒδΣΫτͷ௥Ճ ༡ΜͰΈΔ •ϏϧτΠϯΦϒδΣΫτΛ͍͡Δ  … ͑ͬɺ͜Ε΋ૢ࡞Ͱ͖Δͷ?

Slide 95

Slide 95 text

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

Slide 96

Slide 96 text

΋͏ͻͱͭେ੾ͳ͜ͱ

Slide 97

Slide 97 text

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

Slide 98

Slide 98 text

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

Slide 99

Slide 99 text

ϓϩτλΠϓ(__proto__) miyukki name miyukki age 18 __proto__ toString ಺෦࣮૷ ଞ… ಺෦࣮૷ __proto__ OVMM Object.prototype ※ __proto__ ͷϓϩύςΟ໊͸ॲཧܥʹΑͬͯҟͳΔ ྫ͑͹ IE Ͱ͸࢖͑ͳ͍ ·ͨ ES 5 Ͱ͸ඇਪ঑

Slide 100

Slide 100 text

ࢼͯ͠ΈΔ

Slide 101

Slide 101 text

Object ·ͱΊ

Slide 102

Slide 102 text

• ΄ͱΜͲ͢΂ͯ͸ Object  ɾجຊσʔλܕɺnull, undeﬁned Ҏ֎͸ Object  ɾجຊσʔλܕ͸҉໧తʹ Object ͱͯ͠ৼΔ·͏ Object ·ͱΊ

Slide 103

Slide 103 text

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

Slide 104

Slide 104 text

• ΄ͱΜͲ͢΂ͯ͸ Object  ɾجຊσʔλܕɺnull, undeﬁned Ҏ֎͸ Object  ɾجຊσʔλܕ͸҉໧తʹ Object ͱͯ͠ৼΔ·͏ Object ·ͱΊ •Object ͸ϓϩύςΟͷೖΕ΋ͷ (= ϋογϡ)  ɾ໊લ(จࣈྻ)ɺ஋(ͳΜͰ΋)ͷϖΞʔͷೖΕ΋ͷ  ɾಈతʹϓϩύςΟΛ௥Ճɺ࡟আͰ͖Δ •͢΂ͯͷ Object ͸ࣗ਎ͷݪܕ(__proto__)Λ࣋ͭ  ɾࠓ͸ͱΓ͋͑ͣͳΜͱͳ͘ͷཧղͰ OK   

Slide 105

Slide 105 text

Function ͷ 2 ͭͷإ

Slide 106

Slide 106 text

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

Slide 107

Slide 107 text

> typeof sayHello

Slide 108

Slide 108 text

> typeof sayHello 'function'

Slide 109

Slide 109 text

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

Slide 110

Slide 110 text

> typeof Object

Slide 111

Slide 111 text

> typeof Object 'function'

Slide 112

Slide 112 text

No content

Slide 113

Slide 113 text

͑ɺ'function' ?

Slide 114

Slide 114 text

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

Slide 115

Slide 115 text

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'  ... 

Slide 116

Slide 116 text

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  ... 

Slide 117

Slide 117 text

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

Slide 118

Slide 118 text

࣮͸…

Slide 119

Slide 119 text

Function ͸2ͭͷ໾ׂΛ΋ͭ

Slide 120

Slide 120 text

ίϯετϥΫλ

Slide 121

Slide 121 text

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

Slide 122

Slide 122 text

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

Slide 123

Slide 123 text

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

Slide 124

Slide 124 text

1.ۭͷ Object Λੜ੒ 2.಺෦తʹ [[Class]] ͱ͍͏छผΛද͢ϓϩύ ςΟΛ͕ηοτ͞ΕΔ 3.prototype ΦϒδΣΫτ͕ɺ৽͍͠ Object ͷ __proto__ ϓϩύςΟʹηοτ͞ΕΔ 4.࡞੒ͨ͠ Object Λ this ͱͯ͠ίϯετϥΫ λΛ࣮ߦ 5.ઃఆ͞Εͨ৽͍͠ Object Λฦ͢ ίϯετϥΫλͰߦΘΕΔ͜ͱ

Slide 125

Slide 125 text

ࢼͯ͠ΈΔ

Slide 126

Slide 126 text

Person __proto__ Function.prototype sayHello Function __proto__ Object.prototype ૊ΈࠐΈؔ਺… Object __proto__ OVMM ૊ΈࠐΈؔ਺… __proto__ Λḷͬͯ  ϓϩύςΟ͕୳͞ΕΔ var miyukki = new Person('miyukki'); miyukki.toString(); // Object.prototype ͷϝιου

Slide 127

Slide 127 text

͜Ε͕ϓϩτλΠϓνΣʔϯ

Slide 128

Slide 128 text

Function ·ͱΊ

Slide 129

Slide 129 text

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

Slide 130

Slide 130 text

• Function ͸ new ΩʔϫʔυͱηοτͰίϯε τϥΫλͱͯ͠ػೳ͢Δ - ίϯετϥΫλؔ਺ʹఆٛ͞Εͨ prototype ΦϒδΣ Ϋτ͕ɺ৽͘͠࡞੒͞ΕΔΦϒδΣΫτͷϓϩτλΠ ϓ(__proto__)ͱͯ͠ηοτ͞ΕΔ - ͜͏ͯ͠ Prototype Chain ͕࡞ΒΕΔ Function ·ͱΊ •ϓϩτλΠϓʹ͸ 2 ͭͷ֓೦͕͋Δ - Function ʹఆٛ͢Δ prototype ͸ɺͦͷίϯετϥΫλ ͔Βੜ੒͞ΕΔΦϒδΣΫτୡͰڞ༗͍ͨ͠ΦϒδΣΫτ Λఆٛ͢Δҝʹ࢖͍ɺ - Object ʹඥ෇͘ __proto__ ͸ɺͦͷڞ༗ΦϒδΣΫτ Λࢀর͢Δ(ḷΔ)ҝʹ࢖ΘΕΔ

Slide 131

Slide 131 text

஫ҙॻ͖

Slide 132

Slide 132 text

• ES5 Ͱ͸ new Λ࢖Θͳ͍ Object.create ϝ ιου͕༻ҙ͞Ε͍ͯΔɻ • ES3 Ͱ͸ग़དྷͳ͍ null Λ prototype ͱͨ͠ɺ ຊ౰ͷۭͷ Object Λ࡞Δ͜ͱ΋Ͱ͖Δɻ ஫ҙॻ͖

Slide 133

Slide 133 text

Closure ͬͯͳ͊ʹ?

Slide 134

Slide 134 text

Closure ͬͯͳ͊ʹ? ※೉қ౓͔ͨΊ

Slide 135

Slide 135 text

…ͱͦͷલʹ

Slide 136

Slide 136 text

JavaScript ͷείʔϓΛ͓͞Β͍

Slide 137

Slide 137 text

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

Slide 138

Slide 138 text

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

Slide 139

Slide 139 text

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

Slide 140

Slide 140 text

Slide 141

Slide 141 text

ཁ͸ ! Ͳ͔͜ΒͰ΋ΞΫηεͰ͖ΔྖҬ͕ɺ ʮάϩʔόϧείʔϓʯ ! ؔ਺಺ͷΈ͔ΒΞΫηεͰ͖ΔྖҬ͕ ʮϩʔΧϧείʔϓʯ ! ͦΕ͚ͩɻ

Slide 142

Slide 142 text

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

Slide 143

Slide 143 text

είʔϓνΣΠϯ

Slide 144

Slide 144 text

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

Slide 145

Slide 145 text

ྫ͑͹͜ͷ༷ͳ࣌ var hoge = ‘hoge’; ! function add(n1, n2){ var sum = n1 + n2; return sum; } ! add(10, 20); 

Slide 146

Slide 146 text

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

Slide 147

Slide 147 text

ྫ͑͹͜ͷ༷ͳ࣌ var hoge = ‘hoge’; ! function add(n1, n2){ var sum = n1 + n2; return sum; } ! add(10, 20);  BEE n1 10 n2 20 sum undefined arguments {0: 10, 1: 20,...} HMPCBM hoge 'hoge' add ଞ૊ΈࠐΈͷม਺

Slide 148

Slide 148 text

BEE n1 10 n2 20 sum undefined arguments {0: 10, 1: 20,...} HMPCBM hoge 'hoge' add ଞ૊ΈࠐΈͷม਺ ͜ͷॱ൪Ͱม਺͕୳͞ΕΔ

Slide 149

Slide 149 text

͜Ε͕είʔϓνΣʔϯ

Slide 150

Slide 150 text

Ͱ͸ Closure ͱ͸

Slide 151

Slide 151 text

࣮͸΋͏ී௨ʹ࢖ͬͯΔ

Slide 152

Slide 152 text

ࢼͯ͠ΈΔ

Slide 153

Slide 153 text

Closure + είʔϓ ·ͱΊ

Slide 154

Slide 154 text

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

Slide 155

Slide 155 text

Closure + είʔϓ ·ͱΊ •جຊతͳείʔϓ͸2छྨ - άϩʔόϧείʔϓͱϩʔΧϧείʔϓ - ϩʔΧϧείʔϓ಺Ͱ͸Ͳ͜Ͱએݴͯ͠΋ಉ͡ =   ϒϩοΫείʔϓ͕ͳ͍ •ม਺ͷ໊લղܾͷ࢓૊Έ - ؔ਺ͷ࣮ߦίϯςΩετຖʹม਺Λอ࣋͢ΔΦϒδΣ΢τ ͕ੜ੒͞ΕΔɻͪͳΈʹ͜ΕΛ Activation ΦϒδΣΫ τ ͱݺͿɻάϩʔόϧͷྫ͸ ม਺ΦϒδΣΫτ ͱݺͿ - ม਺͸ͦΕΒͷΦϒδΣΫτΛอ࣋ͨ͠ είʔϓνΣΠ ϯ ḷͬͯղܾ͞ΕΔɻ 

Slide 156

Slide 156 text

Closure + είʔϓ ·ͱΊ

Slide 157

Slide 157 text

• Closure ͱ͸ɺείʔϓΛอ࣋ͨؔ͠਺ͱม਺ ͷ·ͱ·Γ - ͋Δؔ਺ʹ͓͚Δ֎ଆͷྖҬΛ ϨΩγΧϧείʔϓ ͱݺͿ - jQuery ࢖ͬͯΔͱී௨ʹ࢖ͬͯΔ - ࢖͍ಓ͸ແݶେɻෳࡶͳॲཧ͕ޮ཰తʹɺΤϨΨϯτ ʹॻ͚ͨΓ Closure + είʔϓ ·ͱΊ

Slide 158

Slide 158 text

·ͱΊ

Slide 159

Slide 159 text

ࠓ೔ֶΜͩ͜ͱ

Slide 160

Slide 160 text

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

Slide 161

Slide 161 text

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

Slide 162

Slide 162 text

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

Slide 163

Slide 163 text

࣭໰λΠϜ?