Crear clases en Javascript con la funcion call()

Crear clases en Javascript con la funcion call()
by Janeth Kent Date: 31-12-2015 javascript

Una de las cosas que no se podían hacer hasta Javascript 1.3 era el ejecutar multiples constructores en una clase. Cosa que se solucionó con el método call, el cual nos permite crear clases con varios constructores. Pero vamos paso a paso viendo cuál es el problema y la solución.

Si estás en una programación a objetos con Javascript, lo más normal es que definas en clases las entidades con las que trabajas. Por ejemplo podríamos tener las entidades DatosBásicosPersona y Domicilio. Veamos la declaración de estas clases:

  function datosbasicos(nombre,apellido,edad){ 
  this.nombre = nombre; 
  this.apellido = apellido; 
  this.edad = edad; 
  }
  
  function domicilio(direccion,cp,ciudad){ 
  this.direccion = direccion; 
  this.cp = cp; 
  this.ciudad = ciudad; }
  

Dadas estas clases podemos instanciar objetos de las mismas:

  var db1 = new datos basicos("pancho","pizza","12");
  var d1 = new domicilio("calle reina,3","28000","madrid");
  

Pero, cómo podemos reutilizar estas clases para definir una entidad que sea persona en Javascript, la cual aglutine información de estas dos entidades. Pues para ello utilizamos el método call.

Este método nos permite invocar al constructor de una clase, pasándole la clase en la que queremos instanciar el constructor y los atributos de instanciación. Así, podríamos definir la clase persona de la siguiente forma:

  function persona(nombre,apellido,edad,direccion,cp,ciudad){ 
  datosbasicos.call(this,nombre,apellido,edad);
   domicilio.call(this,direccion,cp,ciudad);
   }
  

Vemos que el constructor de la clase persona invoca a los constructores de datosbasicos y domicilios haciéndoselos suyos. Muy importante ver que el primer atributo siempre es this, que hace referencia a la clase persona que inicia la instanciación.

Así, podremos instanciar una persona de la siguiente forma:

  var p1 = new persona("pancho","pizza","12","calle reina,3","28000","Madrid");
  

Y acceder a sus valores:

  document.write("Mi código postal es " + p1.cp);
  

Manteniendo una correcta definición de clases.

Como hemos podido ver, el método call es un poco desconocido, pero es un métdodo de gran utilidad. Sobre todo si programas orientado a objetos con Javascript.

 
by Janeth Kent Date: 31-12-2015 javascript visitas : 3673  
 
Janeth Kent

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN AND DEVELOPMENT.

 
 
 

Artículos relacionados

Crear PDF con Javascript y jsPDF

El formato PDF es muy útil para descargar datos de forma masiva en una aplicación web. Ayuda a los usuarios a descargar contenido dinámico en forma de archivo para que…

Como hacer tu propio cursor personalizado para tu web

Cuando empecé a ojear webs distintas y originales para aprender de ellas, de las primeras cosas que me llamaron la atención fue que algunas de ellas tenían sus propios cursores,…

Explorando la API de CSS Paint: Redondeo de formas parte 1

Añadir bordes a las formas complejas es un auténtico rollo (a veces), pero redondear las esquinas de las formas complejas es un suplicio jejeje. Por suerte, la API de pintura…

Cómo enviar un correo electrónico desde un formulario de contacto HTML

En el artículo de hoy vamos a escribir sobre cómo hacer un formulario que funcione y que al pulsar ese botón de envío sea funcional y envíe el correo electrónico…

Cómo hacer un sitio web multilingüe sin redireccionamiento

Hoy, vamos a hablar de cómo implementar un simple selector de idioma en el sitio web estático o básico, sin necesidad de ningún backend o llamadas a la base de…

Comenzando con Bootstrap-Vue paso a paso

Hoy te mostraremos cómo usar BootstrapVue, describiremos el proceso de instalación y mostraremos la funcionalidad básica. El proyecto está basado en el framework CSS más popular del mundo - Bootstrap, para…

Por qué los desarrolladores de JavaScript deberían preferir Axios a Fetch

Por qué los desarrolladores de JavaScript deberían preferir Axios a Fetch En mi artículo anterior, "Usando la Api Fetch Para Hacer Llamadas Ajax", hablé de los fundamentos de la API Fetch.…

Creación de un sencillo spinner-loader CSS

En el artículo de hoy mostraremos cómo animar un loader básico que gira cuando se define alguna acción predefinida, como cargar una imagen. Eso se puede utilizar en un sitio…

Los mejores selectores de fechas para Bootstrap y tu aplicación

Los selectores de fecha son widgets que permiten a los usuarios elegir una sola fecha o rango de fechas y horas. Es un elemento habitual para todo usuario de Internet,…

Validación de formularios HTML usando BULMA y vanilla JavaScript

Hoy vamos a escribir sobre los formularios de contacto y cómo validarlos usando JavaScript. El formulario de contacto parece ser una de las características principales de toda página web básica. Es…

Cómo usar el efecto Parallax.Js en tu sitio web

Hoy vamos a escribir sobre el efecto de parallax, similar al desplazamiento de parallax, y cómo implementarlo para mejorar su página de aterrizaje. En webdev, dicen que primero el móvil…

Usando la API FETCH para hacer llamadas AJAX - Una promesa cumplida

En este artículo hablamos sobre lo que son las llamadas AJAX y cómo utilizarlas de forma tradicional, utilizando el objeto XMLHttpRequest (XHR). En resumen, gracias a las llamadas AJAX una…

Clicky