Javascript under the hood 1
1 like2,924 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 Javascripts 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 functions 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 dont 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