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
Railsだからできる 例外業務に禍根を残さない 設定設計パターン
ei_ei_eiichi
0
910
TFLintカスタムプラグインで始める Terraformコード品質管理
bells17
2
170
Cursorハンズオン実践!
eltociear
2
1.1k
実践Claude Code:20の失敗から学ぶAIペアプログラミング
takedatakashi
1
110
品質ワークショップをやってみた
nealle
0
280
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
3.7k
オープンソースソフトウェアへの解像度🔬
utam0k
15
2.9k
PHPに関数型の魂を宿す〜PHP 8.5 で実現する堅牢なコードとは〜 #phpcon_hiroshima / phpcon-hiroshima-2025
shogogg
1
230
kiroとCodexで最高のSpec駆動開発を!!数時間で web3ネイティブなミニゲームを作ってみたよ!
mashharuki
0
490
XP, Testing and ninja testing ZOZ5
m_seki
3
670
Go言語はstack overflowの夢を見るか?
logica0419
0
340
私はどうやって技術力を上げたのか
yusukebe
43
18k
Featured
See All Featured
Facilitating Awesome Meetings
lara
56
6.6k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Faster Mobile Websites
deanohume
310
31k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.5k
A designer walks into a library…
pauljervisheath
209
24k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
Code Review Best Practice
trishagee
72
19k
Reflections from 52 weeks, 52 projects
jeffersonlam
353
21k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
35
6.1k
It's Worth the Effort
3n
187
28k
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. ଞͷਓʹ࣮ߦΛͤΔ: ΠϕϯτϦεφʔͳͲ -> ଞͷਓͷ࣮࣍ୈ