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
What's this -- いまさら聞けない JavaScript の this
Search
Shuhei Kagawa
October 31, 2014
Programming
3
1.9k
What's this -- いまさら聞けない JavaScript の this
JavaScript の this は関数定義時に決まるのではなく、関数の呼び出し方によって変わることを解説します。
Shuhei Kagawa
October 31, 2014
Tweet
Share
More Decks by Shuhei Kagawa
See All by Shuhei Kagawa
Profiling Node.js apps on production
shuhei
0
850
Building a Pixel Art Editor with Elm
shuhei
1
760
Redux Middleware Wars (Japanese)
shuhei
8
1.8k
Redux Middleware Wars (English)
shuhei
0
160
Draw Animated Chart on React Native
shuhei
0
8.7k
Angular 2 Offline Compiler
shuhei
0
5.4k
Weird Attractors
shuhei
0
840
Angular 2 @ JS Ojisan #6-3
shuhei
1
3k
Introduction to Angular 2
shuhei
2
150
Other Decks in Programming
See All in Programming
個人アプリを2年ぶりにアプデしたから褒めて / I just updated my personal app, praise me!
lovee
0
350
Pulsar2 を雰囲気で使ってみよう
anoken
0
240
GitHub Actions × RAGでコードレビューの検証の結果
sho_000
0
260
仕様変更に耐えるための"今の"DRY原則を考える / Rethinking the "Don't repeat yourself" for resilience to specification changes
mkmk884
0
190
負債になりにくいCSSをデザイナとつくるには?
fsubal
9
2.4k
Conform を推す - Advocating for Conform
mizoguchicoji
3
690
第3回 Snowflake 中部ユーザ会- dbt × Snowflake ハンズオン
hoto17296
4
370
昭和の職場からアジャイルの世界へ
kumagoro95
1
380
Multi Step Form, Decentralized Autonomous Organization
pumpkiinbell
1
740
Linux && Docker 研修/Linux && Docker training
forrep
24
4.5k
技術を根付かせる / How to make technology take root
kubode
1
250
Immutable ActiveRecord
megane42
0
140
Featured
See All Featured
BBQ
matthewcrist
87
9.5k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
100
18k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Embracing the Ebb and Flow
colly
84
4.6k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.1k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.6k
Into the Great Unknown - MozCon
thekraken
35
1.6k
Music & Morning Musume
bryan
46
6.3k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
GitHub's CSS Performance
jonrohan
1030
460k
How GitHub (no longer) Works
holman
314
140k
Transcript
What’s “this”? ͍·͞Βฉ͚ͳ͍ JavaScript ͷ this @M3 Tech Talk 2014/10/31
߳ पฏ
͜͏͍͏ίʔυʹݟ֮͑͋Γ·ͤΜ͔ʁ var header = { init: function(selector) { this.el =
$(selector); this.el.find('.show-modal').on('click', function(e) { this.showModal(); }); this.el.find('.hide-modal').on('click', function(e) { this.hideModal(); }); }, showModal: function() { /* Show modal */ }, hideModal: function() { /* Hide modal */ } }; header.init('.header');
͜ͷίʔυಈ͖·ͤΜ var header = { init: function(selector) { this.el =
$(selector); this.el.find('.show-modal').on('click', function(e) { this.showModal(); }); this.el.find('.hide-modal').on('click', function(e) { this.hideModal(); }); }, showModal: function() { /* Show modal */ }, hideModal: function() { /* Hide modal */ } }; header.init('.header');
this ʹԿ͕ೖͬͯ͘Δ͔ Ͳ͏ܾͬͯ·ΔͰ͠ΐ͏ʁ 1. this ΛแΉؔͷఆٛ࣌ͷείʔϓͰܾ·Δɻ 2. this ΛแΉؔͷఆٛͷํͰܾ·Δɻ 3.
this ΛแΉؔͷ࣮ߦ࣌ͷείʔϓͰܾ·Δɻ 4. this ΛแΉؔͷ࣮ߦͷํͰܾ·Δɻ
this ʹԿ͕ೖͬͯ͘Δ͔ Ͳ͏ܾͬͯ·ΔͰ͠ΐ͏ʁ 1. this ΛแΉؔͷఆٛ࣌ͷείʔϓͰܾ·Δɻ 2. this ΛแΉؔͷఆٛͷํͰܾ·Δɻ 3.
this ΛแΉؔͷ࣮ߦ࣌ͷείʔϓͰܾ·Δɻ 4. this ΛแΉؔͷ࣮ߦͷํͰܾ·Δɻ
this 0 ݸͷҾ • this ɺؔͷఆٛ࣌Ͱͳ͘ɺؔͷݺͼग़͠ํ ʹΑ࣮ͬͯߦ࣌ʹܾ·Δɻ
ؔݺͼग़͠ͷύλʔϯ 1. ϝιουݺͼग़͠: obj.func() 2. ؔݺͼग़͠: func() 3. ίϯετϥΫλݺͼग़͠: new
Func() 4. call, apply: func.call(obj), func.apply(obj) 5. ଞͷਓʹ࣮ߦΛͤΔ: ΠϕϯτϦεφʔͳͲ
1. ϝιουݺͼग़͠ • obj.func() ͱ͢Δͱɺthis obj ʹͳΔɻ var world
= { name: ‘World’, greet: function(greeting) { console.log(greeting + ‘, ‘ + this.name); } }; world.greet(‘Hello’); // Hello, World!
2. ؔݺͼग़͠ function greet(greeting) { console.log(greeting + ‘, ‘ +
this.name); } greet(‘Hello’); // Hello, undefined var name = ‘Window’; greet(‘Hello’); // Hello, Window • func() ͱ͢Δͱɺthis άϩʔόϧΦϒδΣΫτʢϒϥβͰ windowʣʹͳΔɻ
‘use strict’; Λ͓͏ function world() { 'use strict'; console.log('Hello, '
+ this.name); } world(); // TypeError: Cannot read property 'name' of undefined • ͨͩ͠ strict mode ͩͱ undefined ʹͳΓɺΤϥʔʹؾ ͖͍ͮ͢ɻ
3. ίϯετϥΫλݺͼग़͠ function Person(name, age) { this.name = name; this.age
= age; } var shuhei = new Person('shuhei', 32); console.log(shuhei.name, shuhei.age); // shuhei 32 • new func() ͷܗࣜͰݺͼग़͢ͱɺthis ίϯελϥΫλ ͕ฦ͢ΠϯελϯεʹͳΔɻ
4. call, apply function greet(greeting) { console.log(greeting + ', '
+ this.name); } greet.call({ name: 'call' }, ‘Hi'); // Hi, call greet.apply({ name: 'apply' }, [‘Hello']); // Hello, apply • this Λࢦఆͯؔ͠Λ࣮ߦͰ͖Δɻ • call ॱ൪ʹҾΛࢦఆ͢Δɻapply ҾΛྻͰͤΔɻ
5. ଞͷਓʹ࣮ߦΛ·͔ͤΔ var header = { init: function(selector) { this.el
= $(selector); this.el.find('.show-button').on('click', function(e) { this.showModal(); }); this.el.find('.hide-button').on('click', function(e) { this.hideModal(); }); }, showModal: function() { /* Show modal */ }, hideModal: function() { /* Hide modal */ } }; header.init('.header'); • ଞͷਓ࣍ୈɾɾɾ͓ͦΒ͘ 2 ͔ 4ɻ2ʢάϩʔόϧʣͩͱେมʂ • DOM ͷΠϕϯτϦεφʔͷ߹ɺthis ΠϕϯτΛൃՐͨ͠ DOM ཁૉɻ
ରࡦ this.el.find(‘.show-button’).on('click', this.showModal.bind(this)); this.el.find(‘.hide-button').on('click', this.hideModal.bind(this)); • มʹ this ΛೖΕ͓͍ͯͯɺมΛ͏ɻself, that,
_this ͳͲ͕Α͘ΘΕΔɻ var self = this; this.el.find('.show-button').on('click', function(e) { self.showModal(); }); this.el.find('.hide-button').on('click', function(e) { self.hideModal(); }); • Function.prototype.bind Ͱ this Λࢦఆͨؔ͠Λ࡞ΔɻIE9 Ҏ߱Ͱ͑Δ͕ PhantomJS Ͱ͑ͳ͍ͷͨΊɺCI Ͱཁҙɻes5-shim ͳͲΛೖΕΕ͑ΔΑ͏ʹͳΔɻ
·ͱΊ 1. ϝιουݺͼग़͠: obj.func() -> obj 2. ؔݺͼग़͠: func() ->
άϩʔόϧΦϒδΣΫτʢwindow) • strict mode ͳΒ undefined 3. ίϯετϥΫλݺͼग़͠: new Func() -> Πϯελϯε 4. call, apply: func.call(obj), func.apply(obj) -> obj 5. ଞͷਓʹ࣮ߦΛͤΔ: ΠϕϯτϦεφʔͳͲ -> ଞͷਓͷ࣮࣍ୈ