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
rubygem開発で鍛える設計力
joker1007
1
170
25分で解説する「最小権限の原則」を実現するための AWS「ポリシー」大全
opelab
11
2.4k
ローカルLLMでファインチューニング
knishioka
0
140
AIのAIによるAIのための出力評価と改善
chocoyama
2
530
SalesforceArchitectGroupOsaka#20_CNX'25_Report
atomica7sei
0
120
VISITS_AIIoTビジネス共創ラボ登壇資料.pdf
iotcomjpadmin
0
150
Oracle Audit Vault and Database Firewall 20 概要
oracle4engineer
PRO
3
1.7k
変化する開発、進化する体系時代に適応するソフトウェアエンジニアの知識と考え方(JaSST'25 Kansai)
mizunori
0
170
Snowflake Summit 2025 データエンジニアリング関連新機能紹介 / Snowflake Summit 2025 What's New about Data Engineering
tiltmax3
0
300
ObsidianをMCP連携させてみる
ttnyt8701
2
140
JSX - 歴史を振り返り、⾯⽩がって、エモくなろう
pal4de
4
1.1k
Snowflake Summit 2025全体振り返り / Snowflake Summit 2025 Overall Review
mtpooh
2
380
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
246
12k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Making the Leap to Tech Lead
cromwellryan
134
9.3k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
For a Future-Friendly Web
brad_frost
179
9.8k
Done Done
chrislema
184
16k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
How STYLIGHT went responsive
nonsquared
100
5.6k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
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ͭ͋ΔɻείʔϓνΣʔϯͷ͠ ɾ࣮͍ͭۙʹ
࣭λΠϜ?