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

JavaScript no funciona del todo igual con las clases que otros lenguajes de programación. Este lenguaje emplea unciones 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.

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.

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.

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

edad: 30
idiomas: (5) ['español', 'catalán', 'inglés', 'portugués', 'italiano']
nombre_completo: {nombre: 'Enrique', apellidos: 'Barros Fernández'}
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:

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

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

79. 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í: Ejercicios resueltos de JavaScript.