Understanding JavaScript - Part 2

This talk covers Hoisting, Closure and this keyword.

Ref: http://tinyurl.com/lcuwzte and http://tinyurl.com/ljsh8z7

Transcript

1. S C O P E , C L O S U R E , T H I S , P R O T O T Y P E U N D E R S TA N D I N G J AVA S C R I P T B Y N I G A M PA T E L
2. A B O U T N I G A M • Principal Developer at Hyatt • @nigam02 • nigam-patel • nigampatel
3. R E C A P - S C O P E • Block Scope • Lexical Scope • Cheating Lexical • with • eval • IIFE
4. I I F E
5. S C O P E - L E X I C A L S C O P E L O C A L G L O B A L
6. H O I S T I N G //one //two //one
7. H O I S T I N G //42
8. H O I S T I N G //42
9. H O I S T I N G //undefined
10. H O I S T I N G //undefined //two //one
11. H O I S T I N G
12. H O I S T I N G //I’m Hoisted First
13. H O I S T I N G //NO! I’m Hoisted First
14. W T F I S
15. I N T H E O RY D Y N A M I C S C O P I N G
16. ‘ t h i s ’ Every function, while executing, has a reference to its current execution context, called this To understand this we have to understand the call-site
17. t h i s - F O U R B I N D I N G R U L E S 1. new() binding 2. Explicit binding 3. Implicit binding 4. Default binding
18. t h i s - D E FA U LT B I N D I N G Nigam
19. t h i s - D E FA U LT B I N D I N G TypeError: `this` is `undefined`
20. t h i s - I M P L I C I T B I N D I N G Robb
21. t h i s - I M P L I C I T B I N D I N G Tony
22. t h i s - E X P L I C I T B I N D I N G
23. t h i s - E X P L I C I T B I N D I N G // Nigam // Mark
24. t h i s - H A R D B I N D I N G // Nigam // Nigam
25. t h i s - H A R D B I N D I N G // Nigam // Nigam https://developer.mozilla.org/en-US/docs/Web/JavaScript/ Reference/Global_Objects/Function/bind
26. t h i s - N E W B I N D I N G // Nigam
27. t h i s - N E W B I N D I N G 1. A brand new object is created (aka, constructed) out of thin air 2. The newly constructed object is [[Prototype]]- linked 3. The newly constructed object is set as the this binding for that function call 4. Unless the function returns its own alternate object, the new-invoked function call will automatically return the newly constructed object. ref: http://tinyurl.com/ohg4gds
28. t h i s - F O U R B I N D I N G R U L E S 1. new() binding 2. Explicit binding 3. Implicit binding 4. Default binding
29. c l o s u re Remember Lexical Scope? In order to understand closure, you must understand lexical scope.
30. c l o s u re What is Closure? Closure is when a function is able to remember and access its lexical scope even when that function is executing outside its lexical scope. ref: http://tinyurl.com/lqy4jwf
31. c l o s u re - H o w c a n w e f i x t h i s
32. c l o s u re
33. c l o s u re
34. c l o s u re 1 2 3
35. c l o s u re - L o o p s 5 5 5 5 5
36. c l o s u re - L o o p s 0 1 2 3 4
37. c l o s u re - F i x i n g i t w i t h c l o s u re 1 2 3
38. c l o s u re - Q u i z - W h a t i s t h e o u t p u t ?
39. W H AT W E D I S C U S S • Hoisting • this • Closure
40. N E X T TA L K • Continue Closure… • Prototype