What we should know when using closure

Transcript

1. ( on ES6+ ) What we should know when using closure 2018. 07. 23 / #wejs CC-BY-4.0 ariaki4dev
2. 第一級オブジェクト function
3. 関数定義
4. 関数を代入
5. [ ES5 ] 無名関数 や 即時関数 は 何に使われていたか？
6. 使用例 ブロックスコープの代替手段（グローバル汚染の回避）
7. - 即時関数を使いたくないたい人向け - ブロックスコープ ( let ) の使用 - モジュール化 ( <script type=”module”>...</script> ) - Symbol や WeakMap を使う - 将来的にプライベートフィールドができるかも ( tc39-proposal ) - Private Field - Public Field グローバル汚染の回避方法
8. 関数閉包 closure
9. - プログラミング言語における関数オブジェクトの一種 - 無名関数で実現している - 引数以外の変数を自身の静的スコープで解決する - 関数の中に関数を定義することができる - 外側の関数で宣言された変数を内側の関数で操作できる - 主な利点はグローバル変数の削減 closure https://ja.wikipedia.org/wiki/クロージャ
10. closure example # 1 - 関数内で関数を定義している - say 内で外部変数 message が解決できている
11. closure example # 2 - say を関数外に持ち出しても message が解決できている
12. closure example # 3 - 即時関数を即時呼び出し
13. closure example # 4 - outer / inner 引数の組み合わせ例
14. closure example # 5 encapsulation
15. 余談）Function.prototype instance scope global scope
16. 余談）object
17. 余談）class
18. スコープと生存期間 scope & extent
19. 静的スコープ 動的スコープ static / lexical scope dynamic scope
20. 浅いアクセス 深いアクセス 深い束縛 浅い束縛
21. スコープが静的に閉じられている（閉包） → closure closure
22. scope chain inner outer global - shadowing … スコープを挟んで名前を重複定義できる - masking … 一番近い変数が優先される
23. activation object activation object arguments this activation object arguments this vars vars variable objects vars Global Outer Inner
24. activation object - scope chain - 関数のコール毎に activation object が生成される - 自分では直接触る事ができない object - メモリを都度確保する - closure はメモリ使用量増加の原因になる - prototype chain - prototype が格納される - scope chain 探索後に対象となる ( scope chain が優先 )
25. closure によるメモリリークの発生 memory leak
26. 1. Timer / EventListener
27. 2. Variables
28. 3. Circular reference myfunc elem myfunc
29. - 第一級オブジェクトっていろんな書き方ができる - closure は宣言時参照なので外部変数の GC を阻害する - Javascript 楽しい まとめ
30. Build Something Amazing ariaki4dev written by