El 14 de septiembre de 2017, publicamos una versión revisada de nuestra Política de privacidad. Tu uso continuado de video2brain.com significa que aceptas este documento revisado, por lo que te recomendamos que dediques unos minutos a leerlo y comprenderlo.

JavaScript esencial

Herencia de métodos y propiedades

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
La programación orientada a objetos ofrece muchas buenas características y, por consecuencia, mucha flexibilidad, por lo cual la llamada herencia de objetos puede ofrecerte interesantes alternativas al momento de estar programando.
07:45

Transcripción

Cuando trabajamos con programación orientada a objetos, muchas veces creamos plantillas o clases muy genéricas. Y este tipo de clases nos van a servir porque a partir de estas se van a derivar otras clases, es decir, vamos a tener clases padre y vamos a tener clases hijo. Para este ejercicio, lo que vamos a hacer nosotros es generar una nueva clase. Hemos estado trabajando con una clase'pantalla'. Vamos a imaginar que estamos trabajando en una aplicación que va a controlar los productos de una tienda. Para esto, nuestra clase general es una clase llamada'producto'. En esta clase llamada'producto', nosotros tenemos varias propiedades. Primero, cuando se inicialice el producto recibimos un número de serie. Después de esto, tenemos también un tiempo de garantía, es decir, todos los productos van a tener este mismo tiempo de garantía. Tiene un método llamado'infoTienda'para saber en dónde se adquirió este producto. Y después de esto tiene un par de métodos para poder establecer la garantía, es decir, vamos a modificar la garantía del producto. Vamos a inventar ahorita también una regla. Por ejemplo, si nosotros tenemos un producto que es Pantalla, la garantía va ir disminuyendo día a día, pero en este caso va a disminuir con cada uso, es decir, cada que encendamos la pantalla. Obviamente, este es un ejemplo no muy tradicional, pero nos ayudará a entender la herencia de métodos y propiedades trabajando en orientación a objetos. Ahora, aquí ya tenemos dos clases, estas dos clases pueden trabajar independientemente, pero nosotros lo que queremos hacer es que la clase'pantalla'extienda de producto, es decir, herede todos los métodos y propiedades que están disponibles. Para eso, lo que vamos a utilizar es una palabra reservada llamada'extends' y después vamos a decirle sobre quién queremos extender. Ahora tenemos una clase'pantalla'que extiende de'producto', es decir, que está aceptando que la clase padre es'producto'. Después de que nosotros tenemos esto, vamos a guardar y actualizar nuestro navegador y vamos a encontrar que primero tenemos un error. Es decir, aquí no ha acabado todo. Nosotros tenemos un error que dice que se debe llamar al "superconstructor", pero ¿qué es esto? Cada clase tiene un constructor, pero obviamente necesitamos inicializar el primero para que pueda funcionar el segundo. Como'pantalla'ahora es hijo de'producto', hay una secuencia en cadena que se necesita cumplir. Para que esto pueda cumplirse satisfactoriamente, lo único que tenemos que hacer es utilizar la palabra reservada 'super' dentro del constructor del hijo, en este caso en la pantalla. Aquí nosotros estamos agregando'super'y vamos a trabajar con el número de serie. ¿Y por qué con el número de serie? Porque si te das cuenta, en la clase que tenemos definido aquí arriba, tenemos que el constructor inicializa con un número de serie, entonces eso quiere decir que ahora que yo estoy trabajando con estas funciones voy a tener que hacer algunas modificaciones. Por ejemplo, yo tengo que mandar inicialmente el número de serie y vamos a mandar aquí, por ejemplo, '13579'. Y en la sección de abajo vamos a mandar otro número de serie y vamos a ponerle que sea ahora uno distinto y que sea'24680'. Cerramos las comillas adecuadamente, y después de esto vamos a modificar obviamente el constructor que nosotros tenemos de'pantalla'para que reciba el número de serie. Actualizamos nuestro navegador y vemos como ahora el error ya se fue. Pero ¿qué sucede? Ahora yo puedo acceder al número de serie. 'Pantalla'no tiene el número de serie como tal, quién sí lo tiene es'producto', a través de su propiedad'numSerie', así que vamos a poner ahora'tvSala', punto, 'numSerie' y, listo, ya tenemos acceso a las propiedades del padre. Es como si tu padre te prestara un auto, si validas que tú realmente seas su hijo, entonces puedes utilizar su auto; de lo contrario, no podrás utilizarlo. Ahora, ¿recuerdas la regla extravagante que habíamos hablado sobre la garantía? Bueno, lo que queremos es que cada que se ejecute el método encendido, esto modifique el valor de la garantía. Vamos a validar primero cuánto tiene garantía ahora. Ejecutamos'tvSala. garantia'y vemos que tiene el valor de 100, pero cuando yo le enciendo quiero que este valor disminuya, para lo cual voy a usar la palabra reservada'this', punto, y voy a acceder a'garantia'. ¿Y por qué puedo acceder a'garantia'de aquí? Porque simplemente estamos extendiendo de producto, es decir, estamos accediendo a la propiedad del padre y lo único que vamos a hacer, por ahora, es enviarle un valor. ¿Por qué un valor? Porque yo, dentro de'garantia', voy a estar decrementando dicho valor. En este caso, en el método'garantia', cuando lo recibimos de esta manera, ejecuta una operación "menos, igual", es decir, 'tiempoGarantía' es igual a'tiempoGarantía', menos el valor que estamos recibiendo, por tanto, tendrá que ir decrementando de uno en uno. Actualizamos el navegador y volvemos a repetir esto, vemos que tenemos en'tvSala. garantia'. Ahora vamos a encender la televisión, utilizamos el método'encendido', y para esto no olvides el uso de paréntesis. Cuando nosotros lo encendemos vemos como aquí tenemos el texto que dice "La pantalla Master se ha encendido". Vamos a probar la garantía nuevamente y vemos como ahora la garantía ha disminuido. Supongamos que se apagó la pantalla, volvamos a prenderla nuevamente. Listo, accedamos a la garantía, la garantía va disminuyendo de uno en uno. Ahora, ¿recuerdas que hace unos segundos te dije que no olvidaras utilizar los paréntesis? Esto ¿por qué? Porque si tú no los utilizas, cuando ejecutas la acción te escribe la función, es decir, te pone algo conocido como el "blue print" o la estructura de la función. Entonces, lo único que verás aquí es cómo está escrito. Ahora veamos una cosa más que es muy importante y estos son los métodos o las propiedades estáticas. Por ejemplo, en la clase'producto'tenemos un método llamado'infoTienda'. Aquí vamos a escribir la palabra reservada'static'. ¿Qué es lo que va a hacer esta palabra reservada? Va a hacer que el método'infoTienda', en la clase Producto, esté disponible, aunque no hagamos una instancia, es decir, aunque nosotros no hagamos un'new Pantalla'y generemos un nuevo producto. Entonces, vamos a actualizar nuestro navegador, vamos a ver que ahora tenemos entonces: 'Producto', punto, y vamos a utilizar el método estático que acabamos de crear y escribiremos'infoTienda'. Aquí nos generó un error porque lo utilizamos con paréntesis, y esto, si recuerdas, cuando trabajamos con'get'y'set' lo accedemos sin paréntesis. Escribimos ahora de nuevo y vemos como ya podemos acceder a esa información. Si te das cuenta, jamás hicimos una instancia del producto, pero eso no significa que'pantalla'también lo tenga. Entonces, vamos a probarlo rápidamente y vamos a escribir aquí 'Pantalla', punto, 'infoTienda', lo ejecutamos y, claro, también existe entonces. ¿Por qué? Porque, si recuerdas, esta información se extiende. Entonces todas las propiedades del padre y todos los métodos del padre van a pertenecer también al hijo. Pero, de la misma manera, no fue necesario que nosotros tuviéramos que hacer una instancia de ese objeto para poder utilizarlo.

JavaScript esencial

Aprende y conoce JavaScript empezando por entender sus conceptos más básicos y esenciales, pero considerando en todo momento la nueva especificación del lenguaje ES6.

5:26 horas (90 Videos)
Actualmente no hay comentarios.
 
Software:
Fecha de publicación:12/09/2017

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.