Scope and hoisting in Javascript

Lighting talking about Javascript

Transcript

1. To know Javascript - Scope and Hoisting By / Han Xiao @justlaputa つづく...
2. How I met Javascript
3. $ -> GOD “jQuery is part of Javascript” $ ( ' # s e l e c t - a n y - t h i n g ' ) . d o _ t h i s ( ) . d o _ t h a t ( ) ;
4. Javascript is wonderful!!
5. But, Really?
6. In the real world What makes me crazy Scope, hoist Function, object Closure, module Prototype, inherit
7. Let's talk about Scope v a r f o o = " f o o " ; f u n c t i o n s c o p e ( ) { v a r b a r = " b a r " ; c o n s o l e . l o g ( " I c a n s e e f o o : " , f o o ) ; / / O K c o n s o l e . l o g ( " I c a n a l s o s e e b a r : " , b a r ) ; / / A l s o O K } s c o p e ( ) ; c o n s o l e . l o g ( " f o o i s a g l o b a l v a r i a b l e : " , f o o ) ; / / O K , f o o i s g l o b a l c o n s o l e . l o g ( " b u t b a r i s l o c a l : " , b a r ) ; / / R e f e r e n c e E r r o r : b a r i s n o t d e f i n e d
8. Why use var f u n c t i o n s c o p e ( ) { f o o = 1 ; } s c o p e ( ) ; c o n s o l e . l o g ( f o o ) ; / / 1 f u n c t i o n s c o p e ( ) { v a r f o o = 1 ; c o n s o l e . l o g ( f o o ) ; } s c o p e ( ) ; c o n s o l e . l o g ( f o o ) ; / / R e f e r e n c e E r r o r : f o o i s n o t d e f i n e d
9. Block scope VS. Function scope
10. In Java(C, C++) p u b l i c c l a s s S c o p e { p u b l i c s t a t i c v o i d m a i n ( S t r i n g [ ] a r g s ) { i f ( t r u e ) { S t r i n g i n B l o c k = " i ' m i n b l o c k " ; S y s t e m . o u t . p r i n t l n ( i n B l o c k ) ; } S y s t e m . o u t . p r i n t l n ( i n B l o c k ) ; / / c a n n o t f i n d s y m b o l } }
11. In Javascript f u n c t i o n s c o p e ( ) { i f ( 1 ) { v a r i n _ b l o c k = " I ' m i n b l o c k " ; c o n s o l e . l o g ( i n _ b l o c k ) ; / / I ' m i n b l o c k } c o n s o l e . l o g ( i n _ b l o c k ) ; / / I ' m i n b l o c k } s c o p e ( ) ;
12. Function Scope? f u n c t i o n s c o p e ( ) { f u n c t i o n i n n e r ( ) { v a r i n F u n c t i o n = " I ' m i n f u n c t i o n " ; c o n s o l e . l o g ( i n F u n c t i o n ) ; / / I ' m i n f u n c t i o n } i n n e r ( ) ; c o n s o l e . l o g ( i n F u n c t i o n ) ; / / R e f e r e n c e E r r o r } s c o p e ( ) ;
13. Hoisting? v a r f o o = 1 ; f u n c t i o n h o i s t ( ) { f o o = 1 0 0 ; c o n s o l e . l o g ( f o o ) ; / / 1 0 0 r e t u r n ; v a r f o o ; } h o i s t ( ) ; c o n s o l e . l o g ( f o o ) ; / / 1 0 0 ? 1 ? v a r f o o = 1 ; f u n c t i o n h o i s t ( ) { v a r f o o ; f o o = 1 0 0 ; c o n s o l e . l o g ( f o o ) ; r e t u r n ; } h o i s t ( ) ; c o n s o l e . l o g ( f o o ) ; / / 1
14. What's happened? f u n c t i o n f o o ( ) { b a r ( ) ; v a r x = 1 ; } f u n c t i o n f o o ( ) { v a r x ; b a r ( ) ; x = 1 ; }
15. Even if it never executes f u n c t i o n f o o ( ) { i f ( f a l s e ) { v a r x = 1 ; } r e t u r n ; v a r y = 1 ; } f u n c t i o n f o o ( ) { v a r x , y ; i f ( f a l s e ) { x = 1 ; } r e t u r n ; y = 1 ; }
16. How about functions? f u n c t i o n h o i s t ( ) { f o o ( ) ; b a r ( ) ; v a r f o o = f u n c t i o n ( ) { c o n s o l e . l o g ( " i n f o o " ) ; } ; f u n c t i o n b a r ( ) { c o n s o l e . l o g ( " i n b a r " ) ; } } h o i s t ( ) ;
17. f u n c t i o n h o i s t ( ) { v a r f o o ; f u n c t i o n b a r ( ) { c o n s o l e . l o g ( " i n b a r " ) ; } f o o ( ) ; b a r ( ) ; f o o = f u n c t i o n ( ) { c o n s o l e . l o g ( " i n f o o " ) ; } ; } h o i s t ( ) ;
18. Now, what should we do? Follow JSLint Declare variables with var Declare all variable with one var And declare at the begining of the scope f u n c t i o n s c o p e ( ) { v a r f o o , b a r = " b a r " , f o o b a r ; / / d o t h i n g s }
19. References JavaScript Scoping and Hoisting JavaScript: The Good Parts
20. Thanks!