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
900
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.8k
Angular 2 Offline Compiler
shuhei
0
5.4k
Weird Attractors
shuhei
0
880
Angular 2 @ JS Ojisan #6-3
shuhei
1
3k
Introduction to Angular 2
shuhei
2
160
Other Decks in Programming
See All in Programming
AIコーディングAgentとの向き合い方
eycjur
0
240
Azure SRE Agentで運用は楽になるのか?
kkamegawa
0
390
A Gopher's Guide to Vibe Coding
danicat
0
180
Namespace and Its Future
tagomoris
6
600
ゲームの物理
fadis
5
1.5k
管你要 trace 什麼、bpftrace 用下去就對了 — COSCUP 2025
shunghsiyu
0
480
AI OCR API on Lambdaを Datadogで可視化してみた
nealle
0
210
Claude Codeで挑むOSSコントリビュート
eycjur
0
180
KessokuでDIでもgoroutineを活用する / Go Connect #6
mazrean
0
120
令和最新版手のひらコンピュータ
koba789
14
8.1k
為你自己學 Python - 冷知識篇
eddie
1
270
レガシープロジェクトで最大限AIの恩恵を受けられるようClaude Codeを利用する
tk1351
3
1.4k
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
PRO
54
11k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
900
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
Faster Mobile Websites
deanohume
309
31k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
480
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Scaling GitHub
holman
462
140k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
570
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
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. ଞͷਓʹ࣮ߦΛͤΔ: ΠϕϯτϦεφʔͳͲ -> ଞͷਓͷ࣮࣍ୈ