Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Clase 4- Objetos (Parte 2)

Clase 4- Objetos (Parte 2)

Se concluye con lo mas relevante de objetos, incluyendo modificación de propiedades, getters, setters, y se presenta clases

Marcos Grillo

November 06, 2014
Tweet

More Decks by Marcos Grillo

Other Decks in Programming

Transcript

  1. Herencia getters y setters Atributos de objetos Serialización de objetos

    Clases Desarrollo web con JAVASCRIPT nivel 1 Marcos Grillo
  2. Herencia getters y setters Atributos de objetos Serialización de objetos

    Clases 1 Herencia Uso de Object.create 2 getters y setters Getters y setters 3 Atributos de objetos Atributo prototype 4 Serialización de objetos Serialización de objetos 5 Clases Clases
  3. Herencia getters y setters Atributos de objetos Serialización de objetos

    Clases Uso de Object.create Uso de Object.create En Javascript se heredan propiedades
  4. Herencia getters y setters Atributos de objetos Serialización de objetos

    Clases Uso de Object.create Uso de Object.create En Javascript se heredan propiedades La herencia en Javascript se realiza en la creción de un objeto usando Object.create() 1 var object1 = { prop1 :1 , prop2 : 2 } ; 2 console . log ( object1 ) ; 3 var object2 = Object . create ( object1 ) ; 4 console . log ( object2 ) ;
  5. Herencia getters y setters Atributos de objetos Serialización de objetos

    Clases Uso de Object.create Uso de Object.create En Javascript se heredan propiedades La herencia en Javascript se realiza en la creción de un objeto usando Object.create() 1 var object1 = { prop1 :1 , prop2 : 2 } ; 2 console . log ( object1 ) ; 3 var object2 = Object . create ( object1 ) ; 4 console . log ( object2 ) ; Cada objeto tiene su propio conjunto de propiedades y el conjunto de propiedades que hereda.
  6. Herencia getters y setters Atributos de objetos Serialización de objetos

    Clases Uso de Object.create Uso de Object.create Cuando se asignan propiedades heredadas, se crea una nueva propiedad en el objeto y se oculta la original 1 var object1 = { prop1 :1 , prop2 : 2 } ; 2 var object2 = Object . create ( object1 ) ; 3 console . log ( object2 ) ; 4 object2 . prop1 = 50; 5 console . log ( object2 ) ; 6 delete ( object2 . prop1 ) ; 7 console . log ( object2 ) ;
  7. Herencia getters y setters Atributos de objetos Serialización de objetos

    Clases Uso de Object.create Uso de Object.create Cuando se asignan propiedades heredadas, se crea una nueva propiedad en el objeto y se oculta la original 1 var object1 = { prop1 :1 , prop2 : 2 } ; 2 var object2 = Object . create ( object1 ) ; 3 console . log ( object2 ) ; 4 object2 . prop1 = 50; 5 console . log ( object2 ) ; 6 delete ( object2 . prop1 ) ; 7 console . log ( object2 ) ; Las propiedades heredadas no modifican a las propiedades de la clase original.
  8. Herencia getters y setters Atributos de objetos Serialización de objetos

    Clases Uso de Object.create Uso de Object.create Cuando se asignan propiedades heredadas, se crea una nueva propiedad en el objeto y se oculta la original 1 var object1 = { prop1 :1 , prop2 : 2 } ; 2 var object2 = Object . create ( object1 ) ; 3 console . log ( object2 ) ; 4 object2 . prop1 = 50; 5 console . log ( object2 ) ; 6 delete ( object2 . prop1 ) ; 7 console . log ( object2 ) ; Las propiedades heredadas no modifican a las propiedades de la clase original. No es posible asignar un valor a una propiedad que sea de solo lectura.
  9. Herencia getters y setters Atributos de objetos Serialización de objetos

    Clases Uso de Object.create Herencia en ECMASCRIPT 3 Es posible simular este comportamiento en ECMASCRIPT 3 con la propiedad prototype. 1 function inhe rit (p) { 2 i f (p == null ) throw TypeError ( ) ; 3 i f ( Object . create ) return Object . create (p) ; 4 var t = typeof p ; 5 i f ( t !== " object " && t !== " function " ) throw TypeError ( ) ; 6 function f ( ) { } ; 7 f . prototype = p ; 8 return new f ( ) ; 9 }
  10. Herencia getters y setters Atributos de objetos Serialización de objetos

    Clases Uso de Object.create Descriptores de propiedades En Javascript una propiedad puede ser: enumberable, writable, configurable y value, este último es el valor de la propiedad
  11. Herencia getters y setters Atributos de objetos Serialización de objetos

    Clases Uso de Object.create Descriptores de propiedades En Javascript una propiedad puede ser: enumberable, writable, configurable y value, este último es el valor de la propiedad Estos valores solo se definen en ECMASCRIPT 5
  12. Herencia getters y setters Atributos de objetos Serialización de objetos

    Clases Uso de Object.create Descriptores de propiedades En Javascript una propiedad puede ser: enumberable, writable, configurable y value, este último es el valor de la propiedad Estos valores solo se definen en ECMASCRIPT 5 La funcion para obtener esta propiedad es Object.getOwnPropertyDescriptor() 1 var object1 = { prop1 :1 , prop2 : 2 } ; 2 Object . getOwnPropertyDescriptor ( object1 , "prop1" ) ;
  13. Herencia getters y setters Atributos de objetos Serialización de objetos

    Clases Uso de Object.create Descriptores de propiedades Para crear una propiedad y asignarle descritores se usa Object.defineProperty() 1 var object1 = { } ; 2 Object . defineProperty ( object1 , "prop3" , { value : 1 , writable : false , enumerable : true , configurable : true } ) ; 3 object1 . prop3 = "xD" ; 4 object1 ; Es posible modificar una propiedad con writable:false, mientras sea configurable: 1 Object . defineProperty ( object1 , "prop3" , { value : 5 } ) ; 2 object1 ;
  14. Herencia getters y setters Atributos de objetos Serialización de objetos

    Clases Uso de Object.create Descriptores de propiedades Esto solo funciona para nuevas propiedades, no para propiedades heredadas, en tal caso, si ya existe, se crea una nueva propiedad con los atributos especificados.
  15. Herencia getters y setters Atributos de objetos Serialización de objetos

    Clases Uso de Object.create Descriptores de propiedades Esto solo funciona para nuevas propiedades, no para propiedades heredadas, en tal caso, si ya existe, se crea una nueva propiedad con los atributos especificados. Es posible crear varias propiedades simultaneamente usando Object.defineProperties() 1 var p = Object . defineProperties ( { } , 2 { x : { value : 1 , writable : true , enumerable : true , configurable : true } , 3 y : { value : 1 , writable : true , enumerable : true , configurable : true } 4 } ) ;
  16. Herencia getters y setters Atributos de objetos Serialización de objetos

    Clases Uso de Object.create Métodos heredados por defecto Todo objeto creado con el inicializador {} o que vengan de un objeto que no haya sido modificado su Object.prototype, posee las siguientes funciones: 1 Object . toString ( ) ; 2 Object . toLocaleString ( ) ; 3 Object . toJSON ( ) ; 4 Object . valueOf ( ) ;
  17. Herencia getters y setters Atributos de objetos Serialización de objetos

    Clases Getters y setters Getters y setters En ECMASCRIPT 5 es posible reemplazar un atributo por funciones de get y set, que se ejecutan cuando la propiedad se accede o es modificada.
  18. Herencia getters y setters Atributos de objetos Serialización de objetos

    Clases Getters y setters Getters y setters En ECMASCRIPT 5 es posible reemplazar un atributo por funciones de get y set, que se ejecutan cuando la propiedad se accede o es modificada. Solo se debe declarar una función pero con get o set en vez de function 1 var objeto = { 2 x_value : 1 , 3 get x ( ) { console . log ( " accesando x" ) ; return this . x_value ; } , 4 set x ( valor ) { console . log ( " sobreescribiendo x" ) ; this . x_value = valor ; } 5 } ; 6 objeto . x ; 7 objeto . x = 5;
  19. Herencia getters y setters Atributos de objetos Serialización de objetos

    Clases Atributo prototype Define las propiedades que hereda un atributo, se asigna cuando se crea el objeto
  20. Herencia getters y setters Atributos de objetos Serialización de objetos

    Clases Atributo prototype Define las propiedades que hereda un atributo, se asigna cuando se crea el objeto Se puede obtener usando la función Object.getPrototypeOf()
  21. Herencia getters y setters Atributos de objetos Serialización de objetos

    Clases Atributo prototype Define las propiedades que hereda un atributo, se asigna cuando se crea el objeto Se puede obtener usando la función Object.getPrototypeOf() Se puede revisar si un objeto es prototipo de otro con la función Object.isPrototypeOf()
  22. Herencia getters y setters Atributos de objetos Serialización de objetos

    Clases Atributo class No hay manera directa de saber la clase de un objeto, se debe usar: 1 function classof (o) { 2 i f (o === null ) return " Null " ; 3 i f (o === undefined ) return " Undefined " ; 4 return Object . prototype . toString . c a l l (o) . s l i c e (8 , -1) ; 5 }
  23. Herencia getters y setters Atributos de objetos Serialización de objetos

    Clases Atributo extensible Especifica si es posible agregar atributos nuevos a un objeto.
  24. Herencia getters y setters Atributos de objetos Serialización de objetos

    Clases Atributo extensible Especifica si es posible agregar atributos nuevos a un objeto. Se puede utilizar la función Object.isExtensible() para saber el valor actual
  25. Herencia getters y setters Atributos de objetos Serialización de objetos

    Clases Atributo extensible Especifica si es posible agregar atributos nuevos a un objeto. Se puede utilizar la función Object.isExtensible() para saber el valor actual Para evitar la creación de nuevas propiedades en un objeto se puede usar Object.preventExtensions()
  26. Herencia getters y setters Atributos de objetos Serialización de objetos

    Clases Atributo extensible Especifica si es posible agregar atributos nuevos a un objeto. Se puede utilizar la función Object.isExtensible() para saber el valor actual Para evitar la creación de nuevas propiedades en un objeto se puede usar Object.preventExtensions() Es posible evitar que todas propiedades de un objeto sean configurables y evitar que sea extensible usando Object.seal() es posible saber si un objeto está sellado con Object.isSealed()
  27. Herencia getters y setters Atributos de objetos Serialización de objetos

    Clases Atributo extensible Especifica si es posible agregar atributos nuevos a un objeto. Se puede utilizar la función Object.isExtensible() para saber el valor actual Para evitar la creación de nuevas propiedades en un objeto se puede usar Object.preventExtensions() Es posible evitar que todas propiedades de un objeto sean configurables y evitar que sea extensible usando Object.seal() es posible saber si un objeto está sellado con Object.isSealed() Object.freeze() adicionalmente hace que las propiedades sean también de solo lectura. Es posible saber si un objeto está congelado con Object.isFrozen()
  28. Herencia getters y setters Atributos de objetos Serialización de objetos

    Clases Objetos (Introducción) Serialización es un proceso mediante el cual se toma un objeto y se encuentra una representación que permita luego ser convertida en objeto nuevamente
  29. Herencia getters y setters Atributos de objetos Serialización de objetos

    Clases Objetos (Introducción) Serialización es un proceso mediante el cual se toma un objeto y se encuentra una representación que permita luego ser convertida en objeto nuevamente En el caso de JAVASCRIPT los objetos se serializan a JSON (JavaScript Object Notation)
  30. Herencia getters y setters Atributos de objetos Serialización de objetos

    Clases Objetos (Introducción) Serialización es un proceso mediante el cual se toma un objeto y se encuentra una representación que permita luego ser convertida en objeto nuevamente En el caso de JAVASCRIPT los objetos se serializan a JSON (JavaScript Object Notation) ECMASCRIPT 5 posee las funciones JSON.stringify() y JSON.parse() para serializar y restituir objetos
  31. Herencia getters y setters Atributos de objetos Serialización de objetos

    Clases Objetos (Introducción) Serialización es un proceso mediante el cual se toma un objeto y se encuentra una representación que permita luego ser convertida en objeto nuevamente En el caso de JAVASCRIPT los objetos se serializan a JSON (JavaScript Object Notation) ECMASCRIPT 5 posee las funciones JSON.stringify() y JSON.parse() para serializar y restituir objetos Las fechas se convierten a formato ISO, sin embargo JSON.parse() lo deja como un String.
  32. Herencia getters y setters Atributos de objetos Serialización de objetos

    Clases Objetos (Introducción) Serialización es un proceso mediante el cual se toma un objeto y se encuentra una representación que permita luego ser convertida en objeto nuevamente En el caso de JAVASCRIPT los objetos se serializan a JSON (JavaScript Object Notation) ECMASCRIPT 5 posee las funciones JSON.stringify() y JSON.parse() para serializar y restituir objetos Las fechas se convierten a formato ISO, sin embargo JSON.parse() lo deja como un String. NaN, Infinity y -Infinity se serializan a null.
  33. Herencia getters y setters Atributos de objetos Serialización de objetos

    Clases Objetos (Introducción) Serialización es un proceso mediante el cual se toma un objeto y se encuentra una representación que permita luego ser convertida en objeto nuevamente En el caso de JAVASCRIPT los objetos se serializan a JSON (JavaScript Object Notation) ECMASCRIPT 5 posee las funciones JSON.stringify() y JSON.parse() para serializar y restituir objetos Las fechas se convierten a formato ISO, sin embargo JSON.parse() lo deja como un String. NaN, Infinity y -Infinity se serializan a null. Las funciones, expresiones regulares, objetos de errores y undefined no se pueden serializar ni recuperar
  34. Herencia getters y setters Atributos de objetos Serialización de objetos

    Clases Clases En JAVASCRIPT una clase es el conjunto de objetos que poseen el mismo prototype.
  35. Herencia getters y setters Atributos de objetos Serialización de objetos

    Clases Clases En JAVASCRIPT una clase es el conjunto de objetos que poseen el mismo prototype. Hay varias formas de definir una clase, una de ellas es la siguiente: 1 function range ( from , to ) { 2 var r = Object . create ( range . methods ) ; 3 r . from = from ; 4 r . to = to ; 5 return r ; 6 } 7 range . methods = { 8 includes : function ( x ) { return this . from <= x && x <= this . to ; } 9 } ; 10 var r = range (1 ,3) ; 11 r . includes (2) ;