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 : 2112  
 
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 END DEVELOPMENT.

 
 
 

Artículos relacionados

Modo oscuro en el sitio web usando CSS y JavaScript

En el artículo de hoy vamos a aprender a construir más o menos estándar en estos días en las páginas web y que es el modo de color alternativo y…

Javascript: los operadores Spread y Rest

En el artículo de hoy vamos a hablar de una de las características de la versión ES6 (ECMAScript 2015) de JavaScript que es el operador Spreadasí como el operador Rest. Estas…

Cookies HTTP: cómo funcionan y cómo usarlas

Hoy vamos a escribir sobre la forma de almacenar datos en un navegador, por qué los sitios web utilizan cookies y cómo funcionan en detalle. Continúa leyendo para averiguar cómo implementarlas…

Todas las funciones de javascript y los métodos para manipular los arrays

Este artículo mostrará las funciones prominentes de las arrays de JavaScript, entre ellas .map() , .filter() , y .reduce() , y luego pasará a través de ejemplos de casos en los que .every() …

Como construir mejores componentes de alto nivel (Higher-order components) con el Vue 3

El Vue 3 será lanzado pronto con la introducción del API de composición (Composition API). Viene con muchos cambios y mejoras en el rendimiento. Los componentes de orden superior (HOC…

Node.js: herramientas de código abierto para los desarrolladores

De la amplia gama de herramientas disponibles para simplificar el desarrollo de Node.js, aquí están las mejores. Una encuesta en StackOverflow afirma que el 49% de los desarrolladores usan Node.js para…

Renderización lado servidor de Vue.js on Php

¿Intentas que el renderizado del lado del servidor funcione con PHP para renderizar tu aplicación Vue.js pero se atasca? Hay un montón de grandes recursos por ahí, pero hasta ahra no…

Integración de Bootstrap 4 con Vue.js usando Bootstrap-Vue

React y Vue.js son dos marcos de trabajo líderes y modernos de JavaScript para el desarrollo del front-end. Mientras que React tiene una curva de aprendizaje considerable, y un proceso…

Cómo crear un aplicación Vue.js en 5 minutos

Vue.js se está volviendo cada vez más popular, convirtiéndose en un competidor significativo de frameworks como Angular o React.js. Como front-end framework para principiantes, conquista con éxito los corazones de…

Vue.js 3, la programación orientada al futuro que no hay que perderse!

Si estás interesado en Vue.js, probablemente conozcas la 3ª versión de este framework, que se publicará en breve. La nueva versión de momento está en desarrollo, pero todas las características…

Vue.js - Cómo usar (con seguridad) un plugin de jQuery con Vue.js

No es una buena idea usar jQuery y Vue.js en la misma interfaz. No lo hagas si puedes evitarlo, pero probablemente si estás leyendo esto no porque quieras usar jQuery…

Como construir una web application con Styled Components en Vue.js

Styled-Components es una biblioteca muy popular dentro de la comunidad React y React Native, y ahora puedes usarla en Vue.js. Para aquellos que no lo saben, Styled-Components es una biblioteca muy…

Utilizamos cookies propias y de terceros para mejorar nuestros servicios, elaborar información estadística y analizar sus hábitos de navegación. Esto nos permite personalizar el contenido que ofrecemos y mostrarle publicidad relacionada con sus preferencias. Al clicar en "Entendido" ACEPTA SU USO. También puede CONFIGURAR O RECHAZAR la instalación de cookies clicando en “Configuración" o "Rechazar".

Acepta todos Sólo cookies de sistema Configuración