JavaScript Deep Dive
description
Transcript of JavaScript Deep Dive
![Page 1: JavaScript Deep Dive](https://reader035.fdocuments.net/reader035/viewer/2022081505/56815e35550346895dcc98e8/html5/thumbnails/1.jpg)
#RefreshCache
JavaScript Deep DiveThis might sting a little…
Jason OffuttSoftware Engineer
Central Christian Church
Email: [email protected]: @jasonoffutt
![Page 2: JavaScript Deep Dive](https://reader035.fdocuments.net/reader035/viewer/2022081505/56815e35550346895dcc98e8/html5/thumbnails/2.jpg)
Understanding ‘this’• To understand ‘this’, we need to start with
understanding function invocation– Calling a function– Accessing a function’s value
• As a set of instructions
![Page 3: JavaScript Deep Dive](https://reader035.fdocuments.net/reader035/viewer/2022081505/56815e35550346895dcc98e8/html5/thumbnails/3.jpg)
Function call shorthand• The function primitive actually has ‘call’ and
‘apply’ methods• Allows you to directly manipulate the contextual
value of ‘this’
![Page 4: JavaScript Deep Dive](https://reader035.fdocuments.net/reader035/viewer/2022081505/56815e35550346895dcc98e8/html5/thumbnails/4.jpg)
Closures & ScopeStay with me here…
![Page 5: JavaScript Deep Dive](https://reader035.fdocuments.net/reader035/viewer/2022081505/56815e35550346895dcc98e8/html5/thumbnails/5.jpg)
Block Scope? Nope• Code blocks (e.g. – if,
while, for, switch, etc) have no scope
• Only functions provide scope
![Page 6: JavaScript Deep Dive](https://reader035.fdocuments.net/reader035/viewer/2022081505/56815e35550346895dcc98e8/html5/thumbnails/6.jpg)
Lexical Scope? Yep• A fancy way of describing the physical
placement of a function within written source code– The scope of the containing function gets
associated with variables, etc
![Page 7: JavaScript Deep Dive](https://reader035.fdocuments.net/reader035/viewer/2022081505/56815e35550346895dcc98e8/html5/thumbnails/7.jpg)
Closures• A closure is a reference to a function
– One is created every time you declare a function– Variable values and surrounding context are bound
by reference to the function– They are not immediately deallocated from memory
when they lose scope
![Page 8: JavaScript Deep Dive](https://reader035.fdocuments.net/reader035/viewer/2022081505/56815e35550346895dcc98e8/html5/thumbnails/8.jpg)
How is any of this useful?• Write clean/reusable
JavaScript• Ensure your code won’t
break other modules• Avoid shooting yourself
in the foot
![Page 9: JavaScript Deep Dive](https://reader035.fdocuments.net/reader035/viewer/2022081505/56815e35550346895dcc98e8/html5/thumbnails/9.jpg)
Namespacing• Building off of closures• Allows you to keep your code more modular• Adds additional ways to avoid collisions with
external code
![Page 10: JavaScript Deep Dive](https://reader035.fdocuments.net/reader035/viewer/2022081505/56815e35550346895dcc98e8/html5/thumbnails/10.jpg)
Popular approaches• Global Object• Singleton• Cascading
![Page 11: JavaScript Deep Dive](https://reader035.fdocuments.net/reader035/viewer/2022081505/56815e35550346895dcc98e8/html5/thumbnails/11.jpg)
Prototypes• Prototypes provide hooks into the JavaScript
object model• Allow you to create and override instance
methods and properties on objects
![Page 12: JavaScript Deep Dive](https://reader035.fdocuments.net/reader035/viewer/2022081505/56815e35550346895dcc98e8/html5/thumbnails/12.jpg)
Questions?• For a copy of these slides, my notes and code
samples, head over to Github:– https://github.com/JasonOffutt/RefreshCache2011