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 we should know when using closure
Search
Akira Morikawa
July 23, 2018
Technology
0
140
What we should know when using closure
Akira Morikawa
July 23, 2018
Tweet
Share
More Decks by Akira Morikawa
See All by Akira Morikawa
コロナ禍だからこそ考えるオフラインコミュニティの意義 / significance of community
ariaki
0
1.6k
アウトプットの始め方/start output 20230121
ariaki
0
210
web-secure-phpcon2020
ariaki
3
3.1k
オブジェクトライフサイクルとメモリ管理を学ぼう / OOC 2020
ariaki
8
3.3k
エンジニアはアウトプットによって成長できるのか? / Grow with your output
ariaki
24
6.1k
アウトプットを始めよう / How to begin output jawsug-bgnr
ariaki
2
3.5k
参加者の安全を守れていますか? / Protecting community safety
ariaki
1
6.2k
タピオカに学ぶ二段階認証 / tapioca-mfa
ariaki
5
1.2k
古に学ぶ個人開発のススメ / My recommendation of personal development
ariaki
1
1.2k
Other Decks in Technology
See All in Technology
Dive Deep in Cloud Run: Automatic Base Image update
aoto
PRO
0
900
X-Correlation Injections (or How to break server-side contexts)
fransrosen
0
340
いまからでも遅くない! コンテナでWebアプリケーションを 動かしてみよう(1)Gitハンズオン
nomu
0
280
Oracle Database Backup Service:サービス概要のご紹介
oracle4engineer
PRO
0
4k
トレタO/X アーキテクチャ移行記 Next.js App Router化への道のり / TORETA TECH UPDATE 1
okunokentaro
2
520
エンジニア採用ノウハウ0から継続的な採用に至るまで / Try recruiting engineers
ohageeq
0
130
Eventual Detection Engineering
ken5scal
0
300
Oracle Database 23ai 新機能 #3 Oracle Globally Distributed Database(GDD)
oracle4engineer
PRO
1
160
標準ライブラリの奥深アップデートを掘り下げよう!
logica0419
2
380
バックログを導入し やっぱやめた話
ota42y
0
160
HolidayJp.jl を作りました
mrkn
0
110
夏休みの(最後の)宿題 for JuliaTokyo #12
antimon2
0
130
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
294
20k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
325
21k
Being A Developer After 40
akosma
82
580k
Intergalactic Javascript Robots from Outer Space
tanoku
268
26k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
157
15k
GraphQLとの向き合い方2022年版
quramy
43
13k
Creatively Recalculating Your Daily Design Routine
revolveconf
215
12k
A Modern Web Designer's Workflow
chriscoyier
690
190k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
24
2k
Unsuck your backbone
ammeep
667
57k
Building a Scalable Design System with Sketch
lauravandoore
458
32k
Testing 201, or: Great Expectations
jmmastey
35
6.9k
Transcript
( on ES6+ ) What we should know when using
closure 2018. 07. 23 / #wejs CC-BY-4.0 ariaki4dev
第一級オブジェクト function
関数定義
関数を代入
[ ES5 ] 無名関数 や 即時関数 は 何に使われていたか?
使用例 ブロックスコープの代替手段(グローバル汚染の回避)
- 即時関数を使いたくないたい人向け - ブロックスコープ ( let ) の使用 - モジュール化
( <script type=”module”>...</script> ) - Symbol や WeakMap を使う - 将来的にプライベートフィールドができるかも ( tc39-proposal ) - Private Field - Public Field グローバル汚染の回避方法
関数閉包 closure
- プログラミング言語における関数オブジェクトの一種 - 無名関数で実現している - 引数以外の変数を自身の静的スコープで解決する - 関数の中に関数を定義することができる - 外側の関数で宣言された変数を内側の関数で操作できる
- 主な利点はグローバル変数の削減 closure https://ja.wikipedia.org/wiki/クロージャ
closure example # 1 - 関数内で関数を定義している - say 内で外部変数 message
が解決できている
closure example # 2 - say を関数外に持ち出しても message が解決できている
closure example # 3 - 即時関数を即時呼び出し
closure example # 4 - outer / inner 引数の組み合わせ例
closure example # 5 encapsulation
余談)Function.prototype instance scope global scope
余談)object
余談)class
スコープと生存期間 scope & extent
静的スコープ 動的スコープ static / lexical scope dynamic scope
浅いアクセス 深いアクセス 深い束縛 浅い束縛
スコープが静的に閉じられている(閉包) → closure closure
scope chain inner outer global - shadowing … スコープを挟んで名前を重複定義できる -
masking … 一番近い変数が優先される
activation object activation object arguments this activation object arguments this
vars vars variable objects vars Global Outer Inner
activation object - scope chain - 関数のコール毎に activation object が生成される
- 自分では直接触る事ができない object - メモリを都度確保する - closure はメモリ使用量増加の原因になる - prototype chain - prototype が格納される - scope chain 探索後に対象となる ( scope chain が優先 )
closure によるメモリリークの発生 memory leak
1. Timer / EventListener
2. Variables
3. Circular reference myfunc elem myfunc
- 第一級オブジェクトっていろんな書き方ができる - closure は宣言時参照なので外部変数の GC を阻害する - Javascript 楽しい
まとめ
Build Something Amazing ariaki4dev written by