¿Cómo se crea una función constructora de objetos? - Curso de JavaScript de cero a máster - Capítulo 38

JavaScript no funciona del todo igual con las clases que otros lenguajes de programación. Este lenguaje emplea funciones especiales conocidas como constructoras para crear objetos.

Volvemos al ejemplo de los usuarios de un sitio web. ¿Cómo harías para que cuando un usuario se registre se creen tantos objetos como usuarios se registren? Con objetos literales no puedes, ya que en ellos, indicas unos valores y estos pueden ir cambiando, pero no se generan más a partir de ellos.
Aquí es donde entran en juego las funciones constructoras, las cuales, son capaces de especificar una serie de propiedades y métodos comunes para tantos objetos como quieras generar. Después, cada objeto podrá ir variando de valores individualmente.

Dejemos la teoría para pasar ya a la práctica. Creemos una función constructora basada en el objeto literal usuario de ejemplos anteriores.

Código JavaScript

let usuario = {
nombre_completo: ['Enrique', 'Barros', 'Fernández'],
edad: 30,
telefono: '0467489304',
pais_residencia: 'Australia',
idiomas: ['español', 'catalán', 'inglés', 'portugués', 'italiano'],
};

¿Cómo se crea una función constructora de objetos en JavaScript?

Lo primero para crear una función constructora de objetos en JavaScript es utilizar la palabra function. Por convención, el nombre que le vamos a dar a esta función constructora tiene que llevar la primera letra de cada palabra en mayúscula (PascalCase o UpperCamelCase (esto lo expliqué en el Capítulo 5)).

El array del nombre lo sustituyo por un objeto para mayor claridad. El array de todas formas se puede usar.

El uso de this ya lo expliqué en el capítulo 33.

Los nombres especificados en la izquierda (después del punto de cada this) son de pura referencia. Son nombres de propiedad. Los de la derecha, nombre, apellidos, etc.) hacen referencia a los argumentos pasados en la función constructora.

Código JavaScript

function Usuario(nombre, apellidos, edad, telefono, pais_residencia, idiomas) {
	this.nombre_completo = {
		'nombre' : nombre,
		'apellidos' : apellidos
	}
	this.edad = edad;
	this.telefono = telefono;
	this.pais_residencia = pais_residencia;
	this.idiomas = idiomas;
}

¿Cómo se instancian objetos en JavaScript?

Finalmente, para instanciar un objeto derivado de Usuario, tengo que pasar exactamente los mismos argumentos (nombre, apellidos, edad, telefono, pais_residencia, idiomas).

'Enrique' corresponde al argumento nombre, 'Barros Fernández' a apellidos, etc.

Los argumentos los iremos colocando en el mismo orden durante la instanciación, no tiene sentido que pongas el nombre al final, ya que correspondería a la propiedad idiomas.

Código JavaScript

let usuario1 = new Usuario(
	'Enrique',
	'Barros Fernández',
	30,
	'0467489304',
	'Australia',
	['español', 'catalán', 'inglés', 'portugués', 'italiano']
);

terminal Resultado en la consola terminal

edad: 30
idiomas: (5) ['español', 'catalán', 'inglés', 'portugués', 'italiano']
nombre_completo: {nombre: 'Enrique', apellidos: 'Barros Fernandez'}
pais_residencia: "Australia"
telefono: "0467489304"

¿Para qué complicarse tanto? Podíamos crear este objeto literalmente sin utilizar una función constructora. No obstante, supongamos que tienes un formulario de registro de usuarios. Cuando sepas manejar los elementos de formulario desde JavaScript, podrás hacer que tu propia web sea capaz de crear objetos a partir de esta función constructora. Entonces, se irán creando objetos con los datos que los usuarios vayan indicando. Por supuesto, aquí es donde entrará lo del tema de la abstracción, el usuario creará el objeto sin saber como se crea. Le tendremos que preparar el código necesario para que escribiendo en el formulario sus datos y pulsando el botón de enviar, ocurra la magia de fondo sin que este sepa como se crea, no tendría sentido poner al usuario a escribir argumentos para registrarse.

Para crear otro objeto a partir de Usuario, vamos a realizar el mismo procedimiento:

Código JavaScript

let usuario2 = new Usuario(
	'Andrea',
	'Gomila Venegas',
	24,
	'5565784356',
	'México',
	['español', 'portugués', 'inglés', 'chino', 'francés']
);

terminal Resultado en la consola terminal

edad: 24
idiomas: (5) ['español', 'portugués', 'inglés', 'chino', 'francés']
nombre_completo: {nombre: 'Andrea', apellidos: 'Gomila Venegas'}
pais_residencia: "México"
telefono: "5565784356"

Y así, crearemos o nuestro programa creará (cuando sepas hacerlo) todos los objetos que quieras.


Ejercicios de JavaScript

  1. Mediante la función constructora de este capítulo, crea un tercer objeto con tus datos personales (si son reales, abstente de publicarlos en los comentarios por tu privacidad).

La solución la encontrarás aquí: Haz click aquí.


Capítulos


    Suscríbete a mi canal de YouTube para apoyarme

    Si te ha gustado este curso y crees que el trabajo merece la pena, te agradeceré eternamente que te suscribas a mi canal de YouTube para apoyarme y que pueda seguir haciendo cursos gratuitos.

    Además, si te encanta la programación, tienes un montón más de cursos gratuitos para ver.

    No solo eso, podrás participar enviándome comentarios con tus sugerencias para temas específicos o cursos completos o incluso las dudas que tengas y las intentaré ir resolviendo en los cursos que estén todavía abiertos.


    Comentarios

    Si te quedan dudas sobre el temario, sobre JavaScript, o cualquier otra cosa relacionada o simplemente quieres agradecer, aquí tienes tu sitio para dejar tu granito de arena. Gracias por tus comentarios y por darle vida a este sitio web.