Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
>< nextprevious
Javascript Under The Hood
The Mysterious Parts
Tran Duc Thang
Framgia Vietnam - Business Strategy Office - ...
>< nextprevious
“Javascript is the World's
Most Misunderstood
Programming Language!”
~ Douglas Crockford ~
2
>< nextprevious
3
Too much to remember, too weird to understand?
first-class functions
lexical scope
function scope
closure...
>< nextprevious
Some JS Quizes
4
http://jsbin.com/tojavun/edit?html,js,console,output
>< nextprevious
Some JS Quizes
5
http://jsbin.com/wabedaf/3/edit?html,js,output
Table of Contents
01
Basic Introductions
‣ First-class functions
‣ IIFE
‣ Hoisting
02
03
04
>< nextprevious
Scope
‣ Lexica...
>< nextprevious
First-class functions
‣ Javascript value types
‣ string
‣ number
‣ boolean
‣ null
‣ undefined
‣ symbol (ES6...
>< nextprevious
First-class functions
‣ Everything which is not primitive is object.
‣ Function (and even Class in ES6) in...
>< nextprevious
First-class functions
9
>< nextprevious
First-class functions
‣ First-class citizen (also type, object, entity, or
value) is an entity which suppo...
>< nextprevious
First-class functions
‣ A programming language is said to have first-
class functions if it treats function...
>< nextprevious
First-class functions
12
>< nextprevious
First-class functions
‣ Function Statement
‣ Function Expression
13
>< nextprevious
First-class functions
14
Function Statement Function Expression
Defines function. Also known as
function de...
>< nextprevious
First-class functions
15
>< nextprevious
First-class functions
‣ IIFE: Immediately Invoked Function Expression
is a Javascript function that runs a...
>< nextprevious
First-class functions
17
>< nextprevious
Hoisting
‣ Hoisting: The ability to use variable, function
before they are declared.
‣ Javascript only hoi...
>< nextprevious
Hoisting
19
>< nextprevious
Scope
‣ Scope is the set of variables, objects, and
functions you have access to
‣ 2 ways to create a Scop...
>< nextprevious
Scope
‣ Lexical Scope vs Dynamic Scope
‣ Lexical Scope, or Static Scope: The scope of a
variable is defined...
>< nextprevious
Scope
22
‣ Global Scope
‣ Local Scope
‣ Nested Scope
‣ Outer Scope
‣ Inner Scope
‣ Function Scope
‣ Block ...
>< nextprevious
Scope
23
IIFE can be used to
create a new scope!
>< nextprevious
Closure
‣ Closure is a function that can remember and
access its lexical scope even when it's
invoked outs...
>< nextprevious
Closure
25
Unravel the problems
http://jsbin.com/wabedaf/3/edit?html,js,output
>< nextprevious
“this” keyword
‣ “this” does not refer to the function itself.
‣ “this” does not refer to the function’s l...
>< nextprevious
“this” keyword
‣ “this” does not refer to the function itself.
27
>< nextprevious
“this” keyword
‣ Default binding: Standalone function invocation.
“this” is bind to global object (in non-...
>< nextprevious
“this” keyword
‣ Implicit binding:
Function is invoked from a
containing object. “this” is
bind to the con...
>< nextprevious
“this” keyword
‣ Explicit binding:
Function is called with
call, apply or bind
method. “this” is bind to
t...
>< nextprevious
“this” keyword
‣ new keyword binding: “this” is bind to the new
object that is created
31
>< nextprevious
“this” keyword
‣ Arrow function: “this” is lexically adopted from the
enclosing scope
32
>< nextprevious
“this” keyword
‣ Binding priority
‣ Arrow function
‣ new keyword
‣ Explicit binding, by using call, apply ...
>< nextprevious
Some best practices
‣ Try to avoid Global variables
‣ Always declare variables
‣ Put variables declaration...
>< nextprevious
References
‣ You don’t know JS (https://github.com/getify/You-
Dont-Know-JS)
‣ Speaking JS (http://speakin...
>< nextprevious
Thank you for listening!
Q&A
For any discussion, you can refer this post on Viblo
https://viblo.asia/thang...
Próxima SlideShare
Cargando en…5
×

Javascript under the hood 1

2.097 visualizaciones

Publicado el

Javascript Under The Hood 1 ~ The Mysterious Parts - Demystifying Javascript’s “First-class functions”, “Scope”, “Closure”, and “this” keyword binding ~

Publicado en: Tecnología
  • Sé el primero en comentar

Javascript under the hood 1

  1. 1. >< nextprevious Javascript Under The Hood The Mysterious Parts Tran Duc Thang Framgia Vietnam - Business Strategy Office - Human Development Section Demystifying Javascript’s “First-class functions”, “Scope”, “Closure”, and “this” keyword binding 1
  2. 2. >< nextprevious “Javascript is the World's Most Misunderstood Programming Language!” ~ Douglas Crockford ~ 2
  3. 3. >< nextprevious 3 Too much to remember, too weird to understand? first-class functions lexical scope function scope closure IIFE prototype function statement function expression hoisting this function constructor new block scope
  4. 4. >< nextprevious Some JS Quizes 4 http://jsbin.com/tojavun/edit?html,js,console,output
  5. 5. >< nextprevious Some JS Quizes 5 http://jsbin.com/wabedaf/3/edit?html,js,output
  6. 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. 7. >< nextprevious First-class functions ‣ Javascript value types ‣ string ‣ number ‣ boolean ‣ null ‣ undefined ‣ symbol (ES6) ‣ object 7 Primitive values Object
  8. 8. >< nextprevious First-class functions ‣ Everything which is not primitive is object. ‣ Function (and even Class in ES6) in Javascript is actually object. 8
  9. 9. >< nextprevious First-class functions 9
  10. 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. 11. >< nextprevious First-class functions ‣ A programming language is said to have first- class functions if it treats functions as first- class citizens. ‣ Javascript has first-class functions! 11
  12. 12. >< nextprevious First-class functions 12
  13. 13. >< nextprevious First-class functions ‣ Function Statement ‣ Function Expression 13
  14. 14. >< nextprevious First-class functions 14 Function Statement Function Expression Defines function. Also known as function declaration. Defines 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)
  15. 15. >< nextprevious First-class functions 15
  16. 16. >< nextprevious First-class functions ‣ IIFE: Immediately Invoked Function Expression is a Javascript function that runs as soon as it is defined. 16
  17. 17. >< nextprevious First-class functions 17
  18. 18. >< nextprevious Hoisting ‣ Hoisting: The ability to use variable, function before they are declared. ‣ Javascript only hoists declarations, not initializations 18
  19. 19. >< nextprevious Hoisting 19
  20. 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. 21. >< nextprevious Scope ‣ Lexical Scope vs Dynamic Scope ‣ Lexical Scope, or Static Scope: The scope of a variable is defined 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. 22. >< nextprevious Scope 22 ‣ Global Scope ‣ Local Scope ‣ Nested Scope ‣ Outer Scope ‣ Inner Scope ‣ Function Scope ‣ Block Scope
  23. 23. >< nextprevious Scope 23 IIFE can be used to create a new scope!
  24. 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. 25. >< nextprevious Closure 25 Unravel the problems http://jsbin.com/wabedaf/3/edit?html,js,output
  26. 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. 27. >< nextprevious “this” keyword ‣ “this” does not refer to the function itself. 27
  28. 28. >< nextprevious “this” keyword ‣ Default binding: Standalone function invocation. “this” is bind to global object (in non-strict mode) 28
  29. 29. >< nextprevious “this” keyword ‣ Implicit binding: Function is invoked from a containing object. “this” is bind to the containing object. 29
  30. 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. 31. >< nextprevious “this” keyword ‣ new keyword binding: “this” is bind to the new object that is created 31
  32. 32. >< nextprevious “this” keyword ‣ Arrow function: “this” is lexically adopted from the enclosing scope 32
  33. 33. >< nextprevious “this” keyword ‣ Binding priority ‣ Arrow function ‣ new keyword ‣ Explicit binding, by using call, apply and bind ‣ Implicit binding ‣ Default binding 33
  34. 34. >< nextprevious Some best practices ‣ Try to avoid Global variables ‣ Always declare variables ‣ Put variables declaration on top 34 Use Strict Mode
  35. 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. 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

×