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
2k
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
910
Building a Pixel Art Editor with Elm
shuhei
1
800
Redux Middleware Wars (Japanese)
shuhei
8
1.9k
Redux Middleware Wars (English)
shuhei
0
180
Draw Animated Chart on React Native
shuhei
0
8.9k
Angular 2 Offline Compiler
shuhei
0
5.4k
Weird Attractors
shuhei
0
890
Angular 2 @ JS Ojisan #6-3
shuhei
1
3k
Introduction to Angular 2
shuhei
2
160
Other Decks in Programming
See All in Programming
Software Architecture
hschwentner
6
2.3k
CSC305 Lecture 05
javiergs
PRO
0
220
AI駆動で0→1をやって見えた光と伸びしろ
passion0102
1
460
Swift Concurrency - 状態監視の罠
objectiveaudio
2
550
Things You Thought You Didn’t Need To Care About That Have a Big Impact On Your Job
hollycummins
0
230
大規模アプリのDIフレームワーク刷新戦略 ~過去最大規模の並行開発を止めずにアプリ全体に導入するまで~
mot_techtalk
1
470
スキーマ駆動で、Zod OpenAPI Honoによる、API開発するために、Hono Takibiというライブラリを作っている
nakita628
0
170
登壇は dynamic! な営みである / speech is dynamic
da1chi
0
350
チームの境界をブチ抜いていけ
tokai235
0
190
CSC305 Lecture 04
javiergs
PRO
0
270
その面倒な作業、「Dart」にやらせませんか? Flutter開発者のための業務効率化
yordgenome03
1
130
AI Coding Meetup #3 - 導入セッション / ai-coding-meetup-3
izumin5210
0
3.4k
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1032
470k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Writing Fast Ruby
sferik
629
62k
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
Making Projects Easy
brettharned
120
6.4k
Building Applications with DynamoDB
mza
96
6.7k
Fireside Chat
paigeccino
40
3.7k
Raft: Consensus for Rubyists
vanstee
140
7.1k
Optimizing for Happiness
mojombo
379
70k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
Building Adaptive Systems
keathley
44
2.8k
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. ଞͷਓʹ࣮ߦΛͤΔ: ΠϕϯτϦεφʔͳͲ -> ଞͷਓͷ࣮࣍ୈ