Javascript under the hood 1
?
1 like?2,922 views
Javascript Under The Hood discusses key Javascript concepts like first-class functions, scope, closures, and the "this" keyword. It explains how functions are first-class citizens in Javascript and can be passed as arguments or assigned to variables. The document also covers lexical scope, block scope, function scope and how closures allow functions to remember their enclosing scope even when invoked outside it. Finally, it discusses the "this" keyword and how its binding depends on how a function is called rather than where it is declared.
Javascript under the hood 1
- 1. >< nextprevious Javascript Under The Hood The Mysterious Parts Tran Duc Thang Framgia Vietnam - Business Strategy Of?ce - Human Development Section Demystifying Javascript¨s ＾First-class functions￣, ＾Scope￣, ＾Closure￣, and ＾this￣ keyword binding 1
- 2. >< nextprevious ＾Javascript is the World's Most Misunderstood Programming Language!￣ ~ Douglas Crockford ~ 2
- 3. >< nextprevious 3 Too much to remember, too weird to understand? ?rst-class functions lexical scope function scope closure IIFE prototype function statement function expression hoisting this function constructor new block scope
- 4. >< nextprevious Some JS Quizes 4 http://jsbin.com/tojavun/edit?html,js,console,output
- 5. >< nextprevious Some JS Quizes 5 http://jsbin.com/wabedaf/3/edit?html,js,output
- 6. Table of Contents 01 Basic Introductions ? First-class functions ? IIFE ? Hoisting 02 03 04 >< nextprevious Scope ? Lexical Scope ? Function Scope vs Block Scope Closure ? Understanding Closure ? Fixing the problems with Closure this keyword binding ? Understanding this keyword ? Binding this 6
- 7. >< nextprevious First-class functions ? Javascript value types ? string ? number ? boolean ? null ? unde?ned ? symbol (ES6) ? object 7 Primitive values Object
- 8. >< nextprevious First-class functions ? Everything which is not primitive is object. ? Function (and even Class in ES6) in Javascript is actually object. 8
- 10. >< nextprevious First-class functions ? First-class citizen (also type, object, entity, or value) is an entity which supports all the operations generally available to other entities. ? These operations typically include being passed as an argument, returned from a function, and assigned to a variable 10
- 11. >< nextprevious First-class functions ? A programming language is said to have ?rst- class functions if it treats functions as ?rst- class citizens. ? Javascript has ?rst-class functions! 11
- 13. >< nextprevious First-class functions ? Function Statement ? Function Expression 13
- 14. >< nextprevious First-class functions 14 Function Statement Function Expression De?nes function. Also known as function declaration. De?nes a function as a part of a larger expression syntax Must begins with ＾function￣ keyword Must not begin with ＾function￣ keyword Must have a name Can have a name or not (can be anonymous)
- 16. >< nextprevious First-class functions ? IIFE: Immediately Invoked Function Expression is a Javascript function that runs as soon as it is de?ned. 16
- 18. >< nextprevious Hoisting ? Hoisting: The ability to use variable, function before they are declared. ? Javascript only hoists declarations, not initializations 18
- 20. >< nextprevious Scope ? Scope is the set of variables, objects, and functions you have access to ? 2 ways to create a Scope: Function and Block* 20
- 21. >< nextprevious Scope ? Lexical Scope vs Dynamic Scope ? Lexical Scope, or Static Scope: The scope of a variable is de?ned by its location within the source code and nested functions have access to variables declared in their outer scope. ? Dynamic Scope: The scope of a variable depends on where the functions and scopes are called from ? Lexical Scope is write-time, whereas Dynamic Scope is runtime ? Javascript has Lexical Scope! 21
- 22. >< nextprevious Scope 22 ? Global Scope ? Local Scope ? Nested Scope ? Outer Scope ? Inner Scope ? Function Scope ? Block Scope
- 23. >< nextprevious Scope 23 IIFE can be used to create a new scope!
- 24. >< nextprevious Closure ? Closure is a function that can remember and access its lexical scope even when it's invoked outside its lexical scope 24
- 25. >< nextprevious Closure 25 Unravel the problems http://jsbin.com/wabedaf/3/edit?html,js,output
- 26. >< nextprevious ＾this￣ keyword ? ＾this￣ does not refer to the function itself. ? ＾this￣ does not refer to the function¨s lexical scope. ? In most cases, the value of ＾this￣ is determined by how a function is called. ? ＾this￣ may be different each time the function is called. 26
- 27. >< nextprevious ＾this￣ keyword ? ＾this￣ does not refer to the function itself. 27
- 28. >< nextprevious ＾this￣ keyword ? Default binding: Standalone function invocation. ＾this￣ is bind to global object (in non-strict mode) 28
- 29. >< nextprevious ＾this￣ keyword ? Implicit binding: Function is invoked from a containing object. ＾this￣ is bind to the containing object. 29
- 30. >< nextprevious ＾this￣ keyword ? Explicit binding: Function is called with call, apply or bind method. ＾this￣ is bind to the object passed to the binding method. 30
- 31. >< nextprevious ＾this￣ keyword ? new keyword binding: ＾this￣ is bind to the new object that is created 31
- 32. >< nextprevious ＾this￣ keyword ? Arrow function: ＾this￣ is lexically adopted from the enclosing scope 32
- 33. >< nextprevious ＾this￣ keyword ? Binding priority ? Arrow function ? new keyword ? Explicit binding, by using call, apply and bind ? Implicit binding ? Default binding 33
- 34. >< nextprevious Some best practices ? Try to avoid Global variables ? Always declare variables ? Put variables declaration on top 34 Use Strict Mode
- 35. >< nextprevious References ? You don¨t know JS (https://github.com/getify/You- Dont-Know-JS) ? Speaking JS (http://speakingjs.com/) ? Exploring ES6 (http://exploringjs.com/es6/) ? http://www.2ality.com/ JavaScript and more ? Mozilla Developer Network (https:// developer.mozilla.org/en-US/docs/Web/ JavaScript) ? T━m hi?u v? Strict Mode trong Javascript (https:// viblo.asia/thangtd90/posts/jaqG0QQevEKw) 35
- 36. >< nextprevious Thank you for listening! Q&A For any discussion, you can refer this post on Viblo https://viblo.asia/thangtd90/posts/WApGx3P3M06y 36