Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
第7回みゆっき☆Think 本気で学ぶ JavaScript
Search
Takuya Fujimura
September 02, 2011
Technology
0
99
第7回みゆっき☆Think 本気で学ぶ JavaScript
2011/09 にニコ生で放送した「みゆっき☆Think」の資料
http://www.nicovideo.jp/watch/1315569331
Takuya Fujimura
September 02, 2011
Tweet
Share
More Decks by Takuya Fujimura
See All by Takuya Fujimura
国技と Scala (Japan's national sport and Scala)
tlync
8
12k
Trait とは? その使い道を考えてみる
tlync
0
100
Other Decks in Technology
See All in Technology
Passkey Autofill に賭けるマネーフォワード ID - Money Forward Tech Day 2024
nov
1
260
PDF Viewer作成の今までとこれから
hunachi
0
480
やってやろうじゃないかメカアジャイル! / Let's do it, mechanical agile!
psj59129
1
700
効果的なオンコール対応と障害対応
ryuichi1208
6
3.1k
あなたの知らないiOS開発の世界
recruitengineers
PRO
3
190
Road to Single Activity
yurihondo
2
240
DroidKaigi 2024 たすけて!ViewModel
mhidaka
5
1.1k
プロダクトエンジニアを支えるための開発生産性向上施策
tsukakei
0
150
watsonx.ai Dojo 環境準備について
oniak3ibm
PRO
0
360
「認証認可」という体験をデザインする ~Nekko Cloud認証認可基盤計画
logica0419
2
460
AI前提のサービス運用ってなんだろう?
ryuichi1208
3
1.1k
2024年のナビゲーション・フォーカス対応:Composeでキーボード・ナビゲーションをサポートしよう
tahia910
0
110
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
36
7k
The Cult of Friendly URLs
andyhume
76
6k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
278
13k
What the flash - Photography Introduction
edds
67
11k
Side Projects
sachag
451
42k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
354
29k
Building Applications with DynamoDB
mza
90
6k
Designing for humans not robots
tammielis
248
25k
Infographics Made Easy
chrislema
239
18k
Become a Pro
speakerdeck
PRO
22
4.9k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
43
2k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.2k
Transcript
ຊؾͷ JavaScript
ຊؾͷ JavaScript ϓϩάϥϛϯάݴޠͱͯ͠ͷجૅͷجૅ
ຊؾͷ JavaScript ϓϩάϥϛϯάݴޠͱͯ͠ͷجૅͷجૅ
ࣗݾհ
ࣗݾհ • ౻ଜ (id: tlync) • ϞόΠϧࣄۀຊ෦ اը։ൃ෦ •
εϚʔτϑΥϯ͚ΞϓϦ։ൃ • υϫϯΰ৽ࢀऀ … ೖࣾ3ϲ݄
ͱ͜ΖͰ
͋Δਓ͜͏ݴ͍·ͨ͠
“JavaScript is the only language that people think they can
program without actually learning it.” ! - Douglas Crockford
ຊޠͰ͓k?
“JavaScript ΈΜͳษڧ͠ͳͯ͘ग़དྷΔ ͱࢥͬͯΔ།ҰͷݴޠͩΑͶ HAHA” (ҙ༁) - μάϥε ΫϩοϑΥʔυ ϚδࠔΔΘʔ(૾)
None
ศརա͗Δ
Ͱ…
jQuery ͕͑Δ ≠ JavaScript ͕͑Δ
ྑ͘ѱ͘ ͪΐͬͱαΠτΛ͍͡ΔҐͳΒ ݴޠͦͷͷͷཧղ͕ͳͯ͘ ͑ͯ͠·͏
ͱ͍͏ࣄͰ
ࠓͷඪ
JavaScript ͷ ϓϩάϥϛϯάݴޠͱͯ͠ͷجૅ Λཧղ͢Δ
ࠓֶͿ͜ͱ
3͚ͭͩ
ࠓֶͿ͜ͱ
1.Object Λཧղ͢Δ ɾ΄ͱΜͲͯ͢ Object ɾͯ͢ͷ Object ࣗͷݪܕΛ͍ͬͯΔ ࠓֶͿ͜ͱ
1.Object Λཧղ͢Δ ɾ΄ͱΜͲͯ͢ Object ɾͯ͢ͷ Object ࣗͷݪܕΛ͍ͬͯΔ ࠓֶͿ͜ͱ 2. Function
Λཧղ͢Δ ɾFunction ͷ 2 ͭͷإ ɾܧঝͷΈ - prototype ͱ __proto__
1.Object Λཧղ͢Δ ɾ΄ͱΜͲͯ͢ Object ɾͯ͢ͷ Object ࣗͷݪܕΛ͍ͬͯΔ ࠓֶͿ͜ͱ 2. Function
Λཧղ͢Δ ɾFunction ͷ 2 ͭͷإ ɾܧঝͷΈ - prototype ͱ __proto__ 3. Closure Λཧղ͢Δ ɾ໊લղܾͷΈ - είʔϓνΣΠϯ ɾ࣮͍ͭۙʹ
ࠓΒͳ͍ࣄ
• จ๏ͷͳ͠ … ͍͍ͩͨΈΜͳͬͯΔΑͶ … Βͳ͚Ε Mozilla ͷαΠτͱ͔ ࠓΒͳ͍ࣄ
• จ๏ͷͳ͠ … ͍͍ͩͨΈΜͳͬͯΔΑͶ … Βͳ͚Ε Mozilla ͷαΠτͱ͔ ࠓΒͳ͍ࣄ •ΫϥΠΞϯταΠυεΫϦϓτͷͳ͠
… DOM ͱ͔ Ajax ͱ͔ … ͦΕ IE ͩͱ(ry
• จ๏ͷͳ͠ … ͍͍ͩͨΈΜͳͬͯΔΑͶ … Βͳ͚Ε Mozilla ͷαΠτͱ͔ ࠓΒͳ͍ࣄ •ΫϥΠΞϯταΠυεΫϦϓτͷͳ͠
… DOM ͱ͔ Ajax ͱ͔ … ͦΕ IE ͩͱ(ry •ECMA Script 5 ͷͳ͠ … ͕࣌ؒͳ͔ͬͨͷͰػձ͕͋Ε·ͨ … ิͱͯͤ͠Δͱ͜Ζ͠·͢
• 5ͰֶͿ JavaScript ͷྺ࢙ • Object ͔Βཧղ͢Δ JavaScript • Function
ͷ2ͭͷإ • Closure ͱείʔϓ • ࣭λΠϜ Agenda
5ͰֶͿ JavaScript ͷྺ࢙
5ͰֶͿ JavaScript ͷྺ࢙ ※: Ͱ͓ฉ͖͍ͩ͘͞
ఏڙ ࣮ɺԼهࢿྉͷωλͷେΛύΫഈआ͖ͤͯ͞·ͨ͠ɻ ৺Α͘ڐ͍ͨ @bad_at_math ͞Μ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ http://www.slideshare.net/badatmath/js-shistory
࣌ 1995 …
Netscape Navigator 2.0 ͕ϦϦʔε
͜ͷ࣌ҰॹʹϦϦʔε͞Εͨͷ͕ ࠷ॳͷ JavaScript (։ൃॳ LiveScript ͱݺΕ͍ͯͨ)
࡞ͬͨͷ͜ͷਓ ϒϨϯμϯ ΞΠΫ ݱ Mozilla CTO
࣮ͱͱ Java ࡌ༧ఆͩͬͨ(Β͍͠)
•Java Applet ෳࡶ͗͢ •ॳ৺ऀʹෑډ͕͔͍ͨ ݒҊࣄ߲
ͳʹ͔͜͏…ͬͱ؆୯ͳ…
εΫϦϓτݴޠ͕΄͍͠!
Netscape Navigator ʹ εΫϦϓτݴޠΛ!
ΒΕͨͷ͜ͷਓ ϒϨϯμϯ ΞΠΫ ݱ Mozilla CTO http://brendaneich.com/tag/history/
ʮScheme Λϒϥβ্ʹ…ʯ http://brendaneich.com/tag/history/
ʮ·͡Ͱ!? Γ͍ͨ!ʯ ※SICP େ͖ͬࢠ http://brendaneich.com/tag/history/
స৬ http://brendaneich.com/tag/history/
ʮͬͺ Java ͬΆ͍ͷΛཔΉʯ http://brendaneich.com/tag/history/
ʮ͑!? Scheme ͷ…?ʯ ※SICP େ͖ͬࢠ http://brendaneich.com/tag/history/
•ظ… •Java ͷษڧ͜Ε͔Β͞…… •Gabage Collection ඞཁ!? ͎͋……… ࣮
Scheme (ؔܕͷҰ෦ͷಛੑ) Self (Prototype ϕʔεͷOOP) Java (จ๏) JavaScript
ϒϨϯμϯᐌ͘
“͏ͪΐͬͱ࣌ؒ͘ΕΕɺ ͋ͷ Global Object ͷ༁͔Βͳ͍ ࣮ͳΜͯ͠ͳ͔ͬͨͷʹ…” http://brendaneich.com/tag/history/
ͦΜͳ͜Μͳ͕ JavaScript ͷੜ·Ε
ର͢Δ MS
•Netscape ʹै •JavaScript ͷϚχϡΞϧΛݩʹಠ࣮ࣗ JScript
•Netscape ʹै •JavaScript ͷϚχϡΞϧΛݩʹಠ࣮ࣗ JScript ϚχϡΞϧʹؒҧ͍͕͋ΔͳͲͷཁҼͰɺ ࣮͕൵ࢂͳ͜ͱʹ…
ͦͷͨΊ…
IE 3.0 Beta JavaScript ͑ΔΑ!
IE 3.0 ਖ਼ࣜ൛ JavaScript ͑ΔΑ!
IE 3.0 ਖ਼ࣜ൛
IE 3.0 ਖ਼ࣜ൛ ແ͔ͬͨ͜ͱʹ
•͜ͷ··͡ΌMS ʹ৯ΘΕΔ… •ඪ४Խͯ͠ΛಀΕΑ͏ Netscape ਞӦ
W3C?
ʮ͍ɺࠓ·Ͱ͖উख͖ͬͯͯΔ͠ɺ ࠓ͞Β… ͪΐͬͱͶ… ʯ
ʮ͍ɺࠓ·Ͱ͖উख͖ͬͯͯΔ͠ɺ ࠓ͞Β… ͪΐͬͱͶ… ʯ ※W3Cඪ४Λແࢹͯ͠৭ʑ࣮ʹ͚͖ͬͭͯͨ͘
ඪ४Խͷཱྀ…
ḷΓ͍ͭͨͷ…
ECMA
•εΠεɺδϡωʔϒʹຊڌΛஔ͘ඪ४ػ ؔ •Microsoft ҕһΛͭͱΊ͍ͯΔ ECMA
͜͏ͯ͠͡·ͬͨ ECMA Script(ES) ͷྺ࢙
※ JavaScript ͷݴޠͱͯ͠ͷ༷ ECMA ͍ͬͯ͏ͱ͜ΖͰ ܾΊ͍ͯΔͬͯ͜ͱ
•͘͝جຊతͳจ๏ •͘͝جຊతͳԋࢉࢠ •͘͝جຊతͳΦϒδΣΫτ • IEEE754 (ޙʹࡂ͍ͷݩͱͳΔ…) •ϛχϚϜͳ༷ ES 1
•ಛهࣄ߲ͳ͠ •ఏग़༻ʹࣈ໘Λͪΐͬͱมߋ ES 2
•ਖ਼نදݱಋೖ •String ·ΘΓͷڧԽ •try/catch ͷྫ֎ॲཧ •Τϥʔॲཧ·ΘΓ ES 3 ※ࠓͷͷϕʔε
ES 4 •Ϋϥε •ΠϯλʔϑΣʔε •໊લۭؒ •ύοέʔδͳͲ… •ϔϏʔڃ
ES 4 •Ϋϥε •ΠϯλʔϑΣʔε •໊લۭؒ •ύοέʔδͳͲ… •ϔϏʔڃ $SPDLGPSEઅɺᖵ྾ ͦΜͳ༷ೝΊΒΕΔ͔͊οοοʂʂʂ μάϥε
ΫϩοϑΥʔυ ݱΔ
ES 4 $SPDLGPSEઅɺᖵ྾ ͦΜͳ༷ೝΊΒΕΔ͔͊οοοʂʂʂ μάϥε ΫϩοϑΥʔυ ݱΔ
$SPDLGPSEઅɺᖵ྾ ͦΜͳ༷ೝΊΒΕΔ͔͊οοοʂʂʂ μάϥε ΫϩοϑΥʔυ ݱΔ
ແ͔ͬͨ͜ͱʹ (தࢭ)
ES 5 •݁ہ ES 3.1 ϕʔεʹ •৽͍͠จ๏Ճ͠ͳ͍ •strict Ϟʔυ •JSON
αϙʔτ •ϓϩύςΟΞΫηοα·ΘΓ ※࠷ۙͷϒϥβ΄΅ରԠ͍ͯ͠Δ http://kangax.github.com/es5-compat-table/
ES Harmony •Class ͳͲ ES 4 ͷ༷͕Ұ෦ΧϜόοΫ? •2ޙ͘Β͍? •ৄࡉ wiki
ࢀর http://wiki.ecmascript.org/doku.php?id=harmony:harmony
5ͰֶͿ JavaScript ͷྺ࢙
Object ͔Βཧղ͢Δ JavaScript
ͯ͢ Object
…ͱݴ͍͍ͨͱ͜Ζ͚ͩͲ ͦ͏Ͱͳ͍
Object ܕ Object Function Array String Number Boolean RegExp Date
etc... ͨͩɺ΄ͱΜͲ Object null undefined ※ࣗಈม string number boolean جຊσʔλܕ
ͭ·Γ…
Object Λ੍͢Δͷ͕ JavScript Λ੍͢
Object Λ੍͢Δͷ͕ JavScript Λ੍͢ ※͜Ε͕ݴ͍͔͚ͨͬͨͩͱ͍͏ᷚ
Object ͱԿ͔Λཧղ͢Δͱ JavaScript ͷཧղ͕ਂ·Δ
Ͱ Object ͱԿ͔?
Object ͱɺ ໊લ͖ͷͷೖΕͷͰ͋Δ
Object ͱɺ ໊લ͖ͷͷೖΕͷͰ͋Δ ͦͯ͠ɺ͍ͭͰɺ͍͔Α͏ʹͰૢ࡞Ͱ͖Δ
Object ͱɺ ໊લ͖ͷͷೖΕͷͰ͋Δ ͦͯ͠ɺ͍ͭͰɺ͍͔Α͏ʹͰૢ࡞Ͱ͖Δ ͦ͏ɺͦΕ͕ϏϧτΠϯΦϒδΣΫτͰ͋ͬͯ…
• ۭͷ Object ͷੜ … ͷՃ … ଞͷΦϒδΣΫτͷՃ ༡ΜͰΈΔ •ϏϧτΠϯΦϒδΣΫτΛ͍͡Δ
… ͑ͬɺ͜Εૢ࡞Ͱ͖Δͷ?
• ۭͷ Object ࡞ {} ͔ new Object() ɾ{} ͷදهཪͰ
new Object() ͕ݺΕ͍ͯΔ ɾυοτ͔தׅހͰϓϩύςΟΞΫηεͰ͖Δ ɾޙऀ Java ʹ͓͚ΔϦϑϨΫγϣϯΈ͍ͨʹ͑Δ ͔ͬͨ͜ͱ •Object ܕಈతʹՃআͳΜͰͰ͖Δ ɾجຊσʔλܕ͚ͩͰͳؔ͘ Object ؚࣗΊΒ ΕΔ ɾҰ෦ɺॲཧܥʹΑͬͯίΞͱͳΔΦϒδΣΫτ ແཧͳͷ͋Δ
͏ͻͱͭେͳ͜ͱ
ͯ͢ͷ Object ࣗͷݪܕͱ ͳͬͨ Object Λ࣋ͭ
ϓϩτλΠϓ(__proto__) miyukki name miyukki age 18 __proto__ toString ෦࣮ ଞ…
෦࣮ __proto__ OVMM Object.prototype
ϓϩτλΠϓ(__proto__) miyukki name miyukki age 18 __proto__ toString ෦࣮ ଞ…
෦࣮ __proto__ OVMM Object.prototype ※ __proto__ ͷϓϩύςΟ໊ॲཧܥʹΑͬͯҟͳΔ ྫ͑ IE Ͱ͑ͳ͍ ·ͨ ES 5 Ͱඇਪ
ࢼͯ͠ΈΔ
Object ·ͱΊ
• ΄ͱΜͲͯ͢ Object ɾجຊσʔλܕɺnull, undefined Ҏ֎ Object ɾجຊσʔλܕ҉తʹ Object ͱͯ͠ৼΔ·͏
Object ·ͱΊ
• ΄ͱΜͲͯ͢ Object ɾجຊσʔλܕɺnull, undefined Ҏ֎ Object ɾجຊσʔλܕ҉తʹ Object ͱͯ͠ৼΔ·͏
Object ·ͱΊ •Object ϓϩύςΟͷೖΕͷ (= ϋογϡ) ɾ໊લ(จࣈྻ)ɺ(ͳΜͰ)ͷϖΞʔͷೖΕͷ ɾಈతʹϓϩύςΟΛՃɺআͰ͖Δ
• ΄ͱΜͲͯ͢ Object ɾجຊσʔλܕɺnull, undefined Ҏ֎ Object ɾجຊσʔλܕ҉తʹ Object ͱͯ͠ৼΔ·͏
Object ·ͱΊ •Object ϓϩύςΟͷೖΕͷ (= ϋογϡ) ɾ໊લ(จࣈྻ)ɺ(ͳΜͰ)ͷϖΞʔͷೖΕͷ ɾಈతʹϓϩύςΟΛՃɺআͰ͖Δ •ͯ͢ͷ Object ࣗͷݪܕ(__proto__)Λ࣋ͭ ɾࠓͱΓ͋͑ͣͳΜͱͳ͘ͷཧղͰ OK
Function ͷ 2 ͭͷإ
function sayHello(){ console.log('Hello!'); }
> typeof sayHello
> typeof sayHello 'function'
ͳΜͷมͳ͍ී௨ͷؔͰ͢Ͷ
> typeof Object
> typeof Object 'function'
None
͑ɺ'function' ?
Object ܕ Object Function Array String Number Boolean RegExp Date
etc...
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' ...
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 ...
Ͳ͏Β͍ͭ͜Β Function Β͍͠
࣮…
Function 2ͭͷׂΛͭ
ίϯετϥΫλ
ίϯετϥΫλ ΦϒδΣΫτΛੜ͢Δؔ
new ΩʔϫʔυͱҰॹʹ͏ͱ ผਓ֨ͷ Function ͕ൃಈ
ίϯετϥΫλͰߦΘΕΔ͜ͱ
1.ۭͷ Object Λੜ 2.෦తʹ [[Class]] ͱ͍͏छผΛද͢ϓϩύ ςΟΛ͕ηοτ͞ΕΔ 3.prototype ΦϒδΣΫτ͕ɺ৽͍͠ Object
ͷ __proto__ ϓϩύςΟʹηοτ͞ΕΔ 4.࡞ͨ͠ Object Λ this ͱͯ͠ίϯετϥΫ λΛ࣮ߦ 5.ઃఆ͞Εͨ৽͍͠ Object Λฦ͢ ίϯετϥΫλͰߦΘΕΔ͜ͱ
ࢼͯ͠ΈΔ
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 ͷϝιου
͜Ε͕ϓϩτλΠϓνΣʔϯ
Function ·ͱΊ
• Function new ΩʔϫʔυͱηοτͰίϯε τϥΫλͱͯ͠ػೳ͢Δ - ίϯετϥΫλؔʹఆٛ͞Εͨ prototype ΦϒδΣ
Ϋτ͕ɺ৽͘͠࡞͞ΕΔΦϒδΣΫτͷϓϩτλΠ ϓ(__proto__)ͱͯ͠ηοτ͞ΕΔ - ͜͏ͯ͠ Prototype Chain ͕࡞ΒΕΔ Function ·ͱΊ
• Function new ΩʔϫʔυͱηοτͰίϯε τϥΫλͱͯ͠ػೳ͢Δ - ίϯετϥΫλؔʹఆٛ͞Εͨ prototype ΦϒδΣ
Ϋτ͕ɺ৽͘͠࡞͞ΕΔΦϒδΣΫτͷϓϩτλΠ ϓ(__proto__)ͱͯ͠ηοτ͞ΕΔ - ͜͏ͯ͠ Prototype Chain ͕࡞ΒΕΔ Function ·ͱΊ •ϓϩτλΠϓʹ 2 ͭͷ֓೦͕͋Δ - Function ʹఆٛ͢Δ prototype ɺͦͷίϯετϥΫλ ͔Βੜ͞ΕΔΦϒδΣΫτୡͰڞ༗͍ͨ͠ΦϒδΣΫτ Λఆٛ͢Δҝʹ͍ɺ - Object ʹඥ͘ __proto__ ɺͦͷڞ༗ΦϒδΣΫτ Λࢀর͢Δ(ḷΔ)ҝʹΘΕΔ
ҙॻ͖
• ES5 Ͱ new ΛΘͳ͍ Object.create ϝ ιου͕༻ҙ͞Ε͍ͯΔɻ • ES3
Ͱग़དྷͳ͍ null Λ prototype ͱͨ͠ɺ ຊͷۭͷ Object Λ࡞Δ͜ͱͰ͖Δɻ ҙॻ͖
Closure ͬͯͳ͊ʹ?
Closure ͬͯͳ͊ʹ? ※қ͔ͨΊ
…ͱͦͷલʹ
JavaScript ͷείʔϓΛ͓͞Β͍
جຊతͳείʔϓ2छྨ͚ͩ •άϩʔόϧείʔϓ •ϩʔΧϧείʔϓ
جຊతͳείʔϓ2छྨ͚ͩ •άϩʔόϧείʔϓ •ϩʔΧϧείʔϓ ※ with Ωʔϫʔυͱ͍͏είʔϓΛมߋ͢Δํ๏͋Δ͚Ͳɺ͜͜ͰׂѪ
<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>
<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> ؔ => ϩʔΧϧείʔϓ ؔ֎ => άϩʔόϧείʔϓ
ཁ ! Ͳ͔͜ΒͰΞΫηεͰ͖ΔྖҬ͕ɺ ʮάϩʔόϧείʔϓʯ ! ؔͷΈ͔ΒΞΫηεͰ͖ΔྖҬ͕ ʮϩʔΧϧείʔϓʯ ! ͦΕ͚ͩɻ
Ͱɺείʔϓͷม Ͳ͏ղܾ͞ΕΔ͔
είʔϓνΣΠϯ
είʔϓνΣΠϯ ※ͪΐͬͱ؆ૉ൛
ྫ͑͜ͷ༷ͳ࣌ <script type="text/javascript"> var hoge = ‘hoge’; ! function add(n1,
n2){ var sum = n1 + n2; return sum; } ! add(10, 20); </script>
ྫ͑͜ͷ༷ͳ࣌ <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,...}
ྫ͑͜ͷ༷ͳ࣌ <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> ଞΈࠐΈͷม
BEE n1 10 n2 20 sum undefined arguments {0: 10,
1: 20,...} HMPCBM hoge 'hoge' add <function> ଞΈࠐΈͷม ͜ͷॱ൪Ͱม͕୳͞ΕΔ
͜Ε͕είʔϓνΣʔϯ
Ͱ Closure ͱ
࣮͏ී௨ʹͬͯΔ
ࢼͯ͠ΈΔ
Closure + είʔϓ ·ͱΊ
Closure + είʔϓ ·ͱΊ •جຊతͳείʔϓ2छྨ - άϩʔόϧείʔϓͱϩʔΧϧείʔϓ - ϩʔΧϧείʔϓͰͲ͜Ͱએݴͯ͠ಉ͡ =
ϒϩοΫείʔϓ͕ͳ͍
Closure + είʔϓ ·ͱΊ •جຊతͳείʔϓ2छྨ - άϩʔόϧείʔϓͱϩʔΧϧείʔϓ - ϩʔΧϧείʔϓͰͲ͜Ͱએݴͯ͠ಉ͡ =
ϒϩοΫείʔϓ͕ͳ͍ •มͷ໊લղܾͷΈ - ؔͷ࣮ߦίϯςΩετຖʹมΛอ࣋͢ΔΦϒδΣτ ͕ੜ͞ΕΔɻͪͳΈʹ͜ΕΛ Activation ΦϒδΣΫ τ ͱݺͿɻάϩʔόϧͷྫ มΦϒδΣΫτ ͱݺͿ - มͦΕΒͷΦϒδΣΫτΛอ࣋ͨ͠ είʔϓνΣΠ ϯ ḷͬͯղܾ͞ΕΔɻ
Closure + είʔϓ ·ͱΊ
• Closure ͱɺείʔϓΛอ࣋ͨؔ͠ͱม ͷ·ͱ·Γ - ͋Δؔʹ͓͚Δ֎ଆͷྖҬΛ ϨΩγΧϧείʔϓ ͱݺͿ - jQuery
ͬͯΔͱී௨ʹͬͯΔ - ͍ಓແݶେɻෳࡶͳॲཧ͕ޮతʹɺΤϨΨϯτ ʹॻ͚ͨΓ Closure + είʔϓ ·ͱΊ
·ͱΊ
ࠓֶΜͩ͜ͱ
1.Object ɹ ɾ΄ͱΜͲͯ͢ Objectɻ ɾϓϩύςΟͷೖΕͷɻ͔͠ಈతɺࣗ༝ࣗࡏɻ ࠓֶΜͩ͜ͱ
1.Object ɹ ɾ΄ͱΜͲͯ͢ Objectɻ ɾϓϩύςΟͷೖΕͷɻ͔͠ಈతɺࣗ༝ࣗࡏɻ ࠓֶΜͩ͜ͱ 2. Functionɹ ɾFunction ͷ͏ͻͱͭͷإίϯετϥΫλ
ɾ2ͭͷϓϩτλΠϓͱϓϩτλΠϓνΣʔϯͷ͠
1.Object ɹ ɾ΄ͱΜͲͯ͢ Objectɻ ɾϓϩύςΟͷೖΕͷɻ͔͠ಈతɺࣗ༝ࣗࡏɻ ࠓֶΜͩ͜ͱ 2. Functionɹ ɾFunction ͷ͏ͻͱͭͷإίϯετϥΫλ
ɾ2ͭͷϓϩτλΠϓͱϓϩτλΠϓνΣʔϯͷ͠ 3. Closure ɹ ɾείʔϓ2ͭ͋ΔɻείʔϓνΣʔϯͷ͠ ɾ࣮͍ͭۙʹ
࣭λΠϜ?