Types, scope, clousures, this & objects

Transcript

1. BAQ.JS ALL THE THINGS JAVASCRIPT GITHUB: BAQJS TWITTER: @BAQ_JS
2. Richard Roncancio Twitter: @Sr_batusai Front End Developer @ Koombea
3. ESTE EVENTO ES TRAIDO A USTEDES GRACIAS A: KOOMBEA AREADOS
4. PORQUE JAVASCRIPT?
5. UNO DE LOS LENGUAJES MAS USADOS EN LA ACTUALIDAD
6. RESPOSITORIO DE PAQUETES MAS GRANDE, NPM
7. UNIVERSAL
8. Browser Server side Bots (Skynet?) Desktop Apps Mobile Apps ...
9. HACE PARTE INTEGRAL DE LA PLATAFORMA WEB
10. ESTA EN CONSTANTE EVOLUCION: ES6, ES7
11. PERO...
12. El lenguaje de programacion Menos comprendido del mundo - Douglas Crockford
13. El Nombre del lenguaje Lenguaje tipo LISP disfrazado de C Errores de diseño Coerción Orientado a objetos, libre de clases, prototipos
14. OBJETIVOS DE BAQ.JS
15. ENTENDER LO RARO
16. SACAR PROVECHO DE LO BUENO
17. CREAR UNA NUEVA MENTALIDAD ENTORNO AL LENGUAJE
19. OBJETOS Y "THIS" EN JAVASCRIPT
20. PERO ANTES...
21. LO BASICO DEL LENGUAJE TIPOS, SCOPE, CLOSURES
22. TIPOS EN JAVASCRIPT
23. undefined null boolean String Number Object
24. t y p e o f " a " ; / / " s t r i n g " t y p e o f 4 2 ; / / " n u m b e r " t y p e o f t r u e ; / / " b o o l e a n " t y p e o f u n d e f i n e d ; / / " u n d e f i n e d " t y p e o f n u l l ; / / " o b j e c t " t y p e o f { } ; / / " o b j e c t " t y p e o f f u n c t i o n ( ) { } ; / / " f u n c t i o n " / / l a s f u n c i o n e s s o n u n s u b t i p o d e " o b j e c t " , C a l l e a b l e O b j e c t s
25. SCOPE: Es el conjunto de reglas para almacenar y buscar variables en alguna ubicacion. "Que Buscar", "Donde Buscar"
26. JAVASCRIPT MANEJA SOLAMENTE* FUNCTION SCOPE
27. FACT: JAVASCRIPT ES UN LENGUAJE COMPILADO! Breaking the JavaScript Speed Limit with V8
28. La ejecucion de un archivo .js se divide en: FASE DE COMPILACION FASE DE EJECUCION
29. UN STATEMENT v a r f o o = " b a z " ; DOS OPERACIONES DIFERENTES, DECLARACION E INICIALIZACION.
30. CONVERSACION ENGINE, SCOPE v a r f o o = " b a z " ; f u n c t i o n b a r ( ) { v a r f o o = " b a z " } f u n c t i o n b a z ( f o o ) { f o o = " b a m " ; b a m = " Y e a h ! " } b a r ( ) ; b a z ( 2 ) ; c o n s o l e . l o g ( f o o ) ; / / " b a z " c o n s o l e . l o g ( b a m ) ; / / " Y e a h ! " LHS(OBJETIVO DE LA ASIGNACION), RHS(FUENTE DE LA ASIGNACION)
31. SCOPE LEXICO: SCOPE DE TIEMPO DE COMPILACION
33. HOISTING a = 2 ; v a r a ; c o n s o l e . l o g ( a ) ; / * - - - - - - - - - - - - - - - - - - - - - - * / v a r a ; a = 2 ; c o n s o l e . l o g ( a ) ; / / 2 c o n s o l e . l o g ( a ) ; v a r a = 2 ; / * - - - - - - - - - - - - - - - - - - - - - - * / v a r a ; c o n s o l e . l o g ( a ) ; / / u n d e f i n e d a = 2 ;
35. THIS KEYWORD Cada funcion, mientras se ejecuta, tiene una referencia a su contexto de ejecución actual, llamado THIS El keyword this siempre referencia a un objeto de los que se puedan obtener propiedades, no a alguna primitiva La decisión de a que objeto referencia el keyword "this" se hace en tiempo de ejecucion, al momento del llamado de la funcion.
36. REGLAS DE ASIGNACION DEL "THIS" default binding: el "this" hace referencia al objeto global* implicit binding: la funcion fue llamada dentro de un objeto contenedor explicit binding: fue llamada con .call() o .apply() la funcion fue llamada con el new keyword
37. DEFAULT BINDING f u n c t i o n f o o ( ) { c o n s o l e . l o g ( t h i s . a ) ; } v a r a = 2 ; f o o ( ) ; / / 2 f u n c t i o n f o o ( ) { " u s e s t r i c t " ; c o n s o l e . l o g ( t h i s . a ) ; } v a r a = 2 ; f o o ( ) ; / / t y p e E r r o r
38. IMPLICIT BINDING f u n c t i o n f o o ( ) { c o n s o l e . l o g ( t h i s . a ) ; } v a r o b j 2 = { a : 4 2 , f o o : f o o } ; v a r o b j 1 = { a : 2 , o b j 2 : o b j 2 } ; o b j 1 . o b j 2 . f o o ( ) ; / / 4 2 v a r b a r = o b j . f o o ; / / f u n c t i o n r e f e r e n c e / a l i a s ! v a r a = " o o p s , g l o b a l " ; / / ` a ` a l s o p r o p e r t y o n g l o b a l o b j e c t b a r ( ) ; / / " o o p s , g l o b a l "
39. EXPLICIT BINDING f u n c t i o n f o o ( ) { c o n s o l e . l o g ( t h i s . a ) ; } v a r o b j = { a : 2 } ; f o o . c a l l ( o b j ) ; / / 2 / * . c a l l ( ) & . a p p l y ( ) h a c e n l o m i s m o , c a m b i a l a f o r m a d e e n v i a r l o s p a r a m e t r o s * /
40. NEW BINDING f u n c t i o n S o m e t h i n g ( ) { t h i s . n a m e = " R i c h a r d " } s o m e t h i n g = n e w S o m e t h i n g ( ) ; c o n s o l e . l o g ( s o m e t h i n g . n a m e ) ; / / " R i c h a r d "
41. NEW OPERATOR Crea un nuevo objeto El nuevo objeto es linkeado al prototipo de la funcion (Un objeto) El objeto recien creado es atado como el "this" para es llamado de esa funcion El llamado a la funcion retorna el objeto recientemente construido
42. CONFUSIONES GENERADAS POR EL "THIS" Asumir que el "this" hace referencia a la funcion en si misma Acceder al scope (lexico) de la funcion
43. CLOSURES es cuando una funcion "recuerda" su scope lexico aun cuando la funcion es ejecutada fuera de ese scope lexico. f u n c t i o n f o o ( ) { v a r b a r = " b a r " ; f u n c t i o n b a z ( ) { c o n s o l e . l o g ( b a r ) ; } b a m ( b a z ) ; } f u n c t i o n b a m ( f n ) { f n ( ) ; / / " b a r " } f o o ( ) ;
44. CLOSURES f u n c t i o n f o o ( ) { v a r a = " H o l a " ; r e t u r n f u n c t i o n ( ) { c o n s o l e . l o g ( a ) ; } } v a r f = f o o ( ) ; f ( ) ; / / " H o l a "
45. COMO CONSTRUIR OBJETOS EN JS
46. OBJECT LITERAL v a r p e r s o n a = { n o m b r e : " r i c h a r d " , h a b l a : f u n c t i o n h a b l a ( ) { c o n s o l e . l o g ( " h o l a , h o l a " ) ; } }
47. FACTORY FUNCTION f u n c t i o n P e r s o n a ( n o m b r e ) { v a r n o m b r e = n o m b r e ; f u n c t i o n h a b l a ( ) { c o n s o l e . l o g ( " H o l a , h o l a , m i n o m b r e e s " + n o m b r e ) ; } f u n c t i o n s e t N o m b r e ( n ) { n o m b r e = n ; } r e t u r n { h a b l a : h a b l a } } v a r r i c h a r d = P e r s o n a ( " R i c h a r d " ) ;
48. PROTOTYPE (OBJETOS LINKEADOS A OTROS OBJETOS) BEHAVIOR DELEGATION
49. Las clases NO EXISTEN EN JS
50. La Herencia NO EXISTE EN JS
51. Lo que realmente importa es que dos objetos terminen vinculados uno a otro a través del [[prototype]] chain
52. Herencia Vs Delegacion
53. FUNCTION CONSTRUCTOR f u n c t i o n F o o ( w h o ) { t h i s . m e = w h o ; } F o o . p r o t o t y p e . i d e n t i f y = f u n c t i o n ( ) { r e t u r n " I a m " + t h i s . m e ; } ; f u n c t i o n B a r ( w h o ) { F o o . c a l l ( t h i s , w h o ) ; } B a r . p r o t o t y p e = O b j e c t . c r e a t e ( F o o . p r o t o t y p e ) ; B a r . p r o t o t y p e . c o n t r u c t o r = B a r , B a r . p r o t o t y p e . s p e a k = f u n c t i o n ( ) { a l e r t ( " H e l l o , " + t h i s . i d e n t i f y ( ) + " . " ) ; } ; v a r b 1 = n e w B a r ( " b 1 " ) ; v a r b 2 = n e w B a r ( " b 2 " ) ; b 1 . s p e a k ( ) ; / / a l e r t s : " H e l l o , I a m b 1 . " b 2 . s p e a k ( ) ; / / a l e r t s : " H e l l o , I a m b 2 . "
54. Function constructor chain
55. OBJECT.CREATE() v a r F o o = { i n i t : f u n c t i o n ( w h o ) { t h i s . m e = w h o ; } , i d e n t i f y : f u n c t i o n ( ) { r e t u r n " I a m " + t h i s . m e ; } } ; v a r B a r = O b j e c t . c r e a t e ( F o o ) ; B a r . s p e a k = f u n c t i o n ( ) { a l e r t ( " H e l l o , " + t h i s . i d e n t i f y ( ) + " . " ) ; } ; v a r b 1 = O b j e c t . c r e a t e ( B a r ) ; b 1 . i n i t ( " b 1 " ) ; v a r b 2 = O b j e c t . c r e a t e ( B a r ) ; b 2 . i n i t ( " b 2 " ) ; b 1 . s p e a k ( ) ; / / a l e r t s : " H e l l o , I a m b 1 . " b 2 . s p e a k ( ) ; / / a l e r t s : " H e l l o , I a m b 2 . "
56. Object.create chain
57. GRACIAS!
58. ELOQUENT JAVASCRIPT JAVASCRIPT FOR CATS YOU DON'T KNOW JAVASCRIPT JAVASCRIPT OBJECTS