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
710
Building a Pixel Art Editor with Elm
shuhei
1
690
Redux Middleware Wars (Japanese)
shuhei
8
1.8k
Redux Middleware Wars (English)
shuhei
0
150
Draw Animated Chart on React Native
shuhei
0
8.5k
Angular 2 Offline Compiler
shuhei
0
5.3k
Weird Attractors
shuhei
0
770
Angular 2 @ JS Ojisan #6-3
shuhei
1
2.9k
Introduction to Angular 2
shuhei
2
130
Other Decks in Programming
See All in Programming
if constexpr文はテンプレート世界のラムダ式である
faithandbrave
3
650
Ruby GitHub Packages
bkuhlmann
0
630
"config" ってなんだ? / What is "config"?
okashoi
0
240
Rubyでたのしむクリエイティブコーディング/Enjoy Creative coding with Ruby
chobishiba
1
180
PHPの次期バージョンはこの時期どうなっているのか - Internalsの開発体制について - PHPカンファレンス小田原
youkidearitai
PRO
1
190
Azure OpenAI Serviceのプロンプトエンジニアリング入門
tomokusaba
3
710
Apache Hive 4 on Treasure Data
ryukobayashi
0
340
#phpcon_odawara オープン・クローズドなテストフィクスチャを求めて / open closed test fixtures
77web
3
230
PHPはいつから死んでいるかの調査
chiroruxx
1
400
StoreKit2によるiOSのアプリ内課金のリニューアル
kangnux
0
110
ONE WEDGE_company_guide
1wedge_one
0
490
Node.js v22 で変わること
yosuke_furukawa
PRO
9
3.5k
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
36
2.1k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
30
6k
RailsConf 2023
tenderlove
4
540
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
Gamification - CAS2011
davidbonilla
76
4.6k
The Language of Interfaces
destraynor
151
23k
Designing Experiences People Love
moore
136
23k
Automating Front-end Workflow
addyosmani
1356
200k
The Cult of Friendly URLs
andyhume
74
5.7k
Docker and Python
trallard
34
2.7k
We Have a Design System, Now What?
morganepeng
43
6.8k
Embracing the Ebb and Flow
colly
80
4.1k
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. ଞͷਓʹ࣮ߦΛͤΔ: ΠϕϯτϦεφʔͳͲ -> ଞͷਓͷ࣮࣍ୈ