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
110
第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
110
Other Decks in Technology
See All in Technology
KMP導⼊において、マネジャーとして考えた事
sansantech
PRO
1
180
CloudTrailも、GuardDutyも、VPC Flow logsも… ログ多すぎ問題の整理術
nikuyoshi
5
600
iOS/Androidで無限循環Carousel表現を考えてみる
fumiyasac0921
0
120
TypeScript と歩む OpenAPI の discriminator / OpenAPI discriminator with TypeScript
kaminashi
1
120
JNation 2025 - Quarkus for Spring Developers
edeandrea
PRO
0
100
プラットフォームとしての Datadog / Datadog as Platforms
aoto
PRO
1
310
新卒から4年間、20年もののWebサービスと向き合って学んだソフトウェア考古学 - PHPカンファレンス新潟2025 / new graduate 4year software archeology
oguri
2
330
Okayama WordPress Meetup #12 | そのバックアップ、本当に復元できますか? リストアやってみた!
takeshifurusato
0
110
Rebase エンジニアリング組織の現状とこれから
rebase_engineering
0
130
SmartHRの複数のチームにおけるMCPサーバーの活用事例と課題
yukisnow1823
2
1k
toittaにOpenTelemetryを導入した話 / Mackerel APM リリースパーティ
cohalz
1
410
コードの考古学 〜労務システムから発掘した成長の糧〜
kenta_smarthr
0
160
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.7k
KATA
mclloyd
29
14k
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
GraphQLとの向き合い方2022年版
quramy
46
14k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Agile that works and the tools we love
rasmusluckow
329
21k
Being A Developer After 40
akosma
91
590k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Fontdeck: Realign not Redesign
paulrobertlloyd
84
5.5k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.6k
Music & Morning Musume
bryan
47
6.5k
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ͭ͋ΔɻείʔϓνΣʔϯͷ͠ ɾ࣮͍ͭۙʹ
࣭λΠϜ?