Understanding JavaScript - Part 2

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

A B O U T N I G A M • Principal Developer at Hyatt • @nigam02 • nigam-patel • nigampatel

Slide 3

Slide 3 text

R E C A P - S C O P E • Block Scope • Lexical Scope • Cheating Lexical • with • eval • IIFE

Slide 4

Slide 4 text

I I F E

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

H O I S T I N G //one //two //one

Slide 7

Slide 7 text

H O I S T I N G //42

Slide 8

Slide 8 text

H O I S T I N G //42

Slide 9

Slide 9 text

H O I S T I N G //undefined

Slide 10

Slide 10 text

H O I S T I N G //undefined //two //one

Slide 11

Slide 11 text

H O I S T I N G

Slide 12

Slide 12 text

H O I S T I N G //I’m Hoisted First

Slide 13

Slide 13 text

H O I S T I N G //NO! I’m Hoisted First

Slide 14

Slide 14 text

W T F I S

Slide 15

Slide 15 text

I N T H E O RY D Y N A M I C S C O P I N G

Slide 16

Slide 16 text

‘ 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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

t h i s - D E FA U LT B I N D I N G Nigam

Slide 19

Slide 19 text

t h i s - D E FA U LT B I N D I N G TypeError: `this` is `undefined`

Slide 20

Slide 20 text

t h i s - I M P L I C I T B I N D I N G Robb

Slide 21

Slide 21 text

t h i s - I M P L I C I T B I N D I N G Tony

Slide 22

Slide 22 text

t h i s - E X P L I C I T B I N D I N G

Slide 23

Slide 23 text

t h i s - E X P L I C I T B I N D I N G // Nigam // Mark

Slide 24

Slide 24 text

t h i s - H A R D B I N D I N G // Nigam // Nigam

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

t h i s - N E W B I N D I N G // Nigam

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

c l o s u re Remember Lexical Scope? In order to understand closure, you must understand lexical scope.

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

c l o s u re - H o w c a n w e f i x t h i s

Slide 32

Slide 32 text

c l o s u re

Slide 33

Slide 33 text

c l o s u re

Slide 34

Slide 34 text

c l o s u re 1 2 3

Slide 35

Slide 35 text

c l o s u re - L o o p s 5 5 5 5 5

Slide 36

Slide 36 text

c l o s u re - L o o p s 0 1 2 3 4

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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 ?

Slide 39

Slide 39 text

W H AT W E D I S C U S S • Hoisting • this • Closure

Slide 40

Slide 40 text

N E X T TA L K • Continue Closure… • Prototype