Introducción a las funciones constructoras de JavaScript

Resumen: en este tutorial, aprenderás sobre la función de constructor de JavaScript y cómo usar la palabra clave new para crear un objeto.

Introducción a las funciones constructoras de JavaScript  

En el artículo anterior, "Introducción a los objetos en JavaScript", vimos cómo crear objetos utilizando la notación de objetos literales. Sin embargo, existe otra forma de crear objetos en JavaScript: las funciones constructoras.

Las funciones constructoras son una técnica para crear objetos personalizados con valores predeterminados y métodos específicos. Al contrario de la notación de objetos literales, las funciones constructoras deben ser llamadas con la palabra clave "new" para asegurar que se está creando un nuevo objeto.

Con las funciones constructoras podemos crear varios objetos a partir de una sola función y cada uno podrá tener valores diferentes, algo que no es posible con los objetos literales. Además, las funciones constructoras nos permiten crear métodos específicos para los objetos creados a partir de ellas, lo que nos permite tener un mejor control sobre el comportamiento de los objetos.

En esta sección, vamos a ver cómo crear objetos utilizando funciones constructoras, cómo crear métodos para estos objetos y cómo evitar errores comunes al trabajar con funciones constructoras

Crear una función constructora

Es importante tener en cuenta que las funciones constructoras deben ser llamadas con la palabra clave "new" para asegurar que un nuevo objeto sea creado.

Ejemplo de una función constructora en JavaScript

function Car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;
}

En este ejemplo:

• Cree una función constructora llamada "Car", que toma tres argumentos: make, model y year.
• Dentro de la función, estamos asignando cada uno de estos argumentos a las propiedades del objeto "this". "this" hace referencia al objeto que se está construyendo.

Crear un objeto utilizando una función constructora

Para crear un nuevo objeto "Car" utilizando esta función constructora, puedes llamarla utilizando la palabra clave "new", como se ve a continuación:

let myCar = new Car("Toyota", "Camry", 2020);

En este ejemplo:

• Se crea una nueva variable "myCar" que es una instancia de la función constructora "Car".
• Se pasan los valores "Toyota", "Camry" y 2020 como argumentos a la función constructora, que a su vez se asignarán a las propiedades "make", "model" y "year" del objeto "myCar".

Es importante notar que, si se omite la palabra clave "new" al llamar a la función constructora, la función se ejecutará como una función normal y no se creará un nuevo objeto.

Acceder a las propiedades de un objeto

Para acceder a las propiedades de un objeto creado a partir de una función constructora, se utiliza el operador punto (.) o la notación de corchetes [].

Entonces podrías acceder a las propiedades del objeto myCar de esta manera:

// Acceso a la propiedad "make" utilizando el operador punto
console.log(myCar.make); 

// Acceso a la propiedad "model" utilizando la notación de corchetes
console.log(myCar["model"]);

También puedes acceder a las propiedades y metodos de un objeto mediante una variable o una expresión, esto es llamado notación de corchetes

let prop = "make"
console.log(myCar[prop])

Es importante mencionar que si intentas acceder a una propiedad que no existe en el objeto obtendrás undefined, es importante manejar estos casos con una estrategia adecuada en caso de que este sea un valor esperado o manejarlo mediante un control de excepciones.

Crear métodos a las funciones del constructor de JavaScript  

Una de las ventajas de las funciones constructoras es que puedes agregar métodos personalizados a los objetos creados a partir de ellas. Esto se logra asignando funciones a la propiedad "prototype" de la función constructora. De esta manera, todos los objetos creados a partir de esa función constructora tendrán acceso a esos métodos.

Ejemplo para agregar un método a una función constructora

En el siguiente ejemplo, se crea una función constructora "Car" con dos propiedades "make" y "model". Luego, se agrega un método "drive" a la función constructora utilizando la propiedad "prototype". El método "drive" utiliza las propiedades "make" y "model" del objeto para imprimir una cadena en la consola.

function Car(make, model) {
    this.make = make;
    this.model = model;
}

// Agregando el método "drive" a la función constructora "Car"
Car.prototype.drive = function() {
    console.log("Vroom vroom! I'm driving my " + this.make + " " + this.model);
}

var myCar = new Car("Tesla", "Model S");
myCar.drive(); // Output: "Vroom vroom! I'm driving my Tesla Model S"

• Para agregar el método "drive" se utiliza la propiedad "prototype" de la función constructora "Car" y se asigna una función anónima. Esta función tiene acceso a las propiedades del objeto mediante el uso de la palabra clave "this"
• Luego, se crea un nuevo objeto "myCar" a partir de la función constructora "Car" con los valores "Tesla" y "Model S" para las propiedades "make" y "model" respectivamente.
• Finalmente, se llama al método "drive" en el objeto "myCar" y se imprime "Vroom vroom! I'm driving my Tesla Model S" en la consola.

Es importante mencionar que los métodos agregados a una función constructora mediante la propiedad "prototype" son compartidos por todos los objetos creados a partir de esa función constructora, lo que significa que si se crean varios objetos a partir de la función constructora "Car" todos tendrán acceso al método "drive" y no se crearán copias del mismo para cada objeto creado, esto ayuda a optimizar el uso de memoria y a evitar tener que definir el mismo método varias veces.

Llamar a una función constructora sin la palabra clave new  

Es importante tener en cuenta que, si una función constructora se llama sin la palabra clave "new", no se creará un nuevo objeto, sino que la función se ejecutará como una función normal. Esto puede causar problemas, ya que las variables y métodos de la función constructora podrían sobrescribir variables y métodos existentes en el ámbito global.

Ejemplo llamar función constructora sin la palabra new

En el siguiente ejemplo, se crea una función constructora "Car" con dos propiedades "make" y "model". Luego, se llama a la función constructora "Car" sin la palabra clave "new", y se asigna el resultado a la variable "myCar".

function Car(make, model) {
    this.make = make;
    this.model = model;
}

var myCar = Car("Tesla", "Model S"); // Llamando a la función constructora sin "new"
console.log(myCar); // Output: undefined
console.log(make); // Output: "Tesla"
console.log(model); // Output: "Model S"

• Al imprimir "myCar" en la consola, se obtiene "undefined" ya que no se ha creado un nuevo objeto.
• Por otro lado, al no usar la palabra clave "new" se está creando variables en el ámbito global con el nombre de las propiedades de la función constructora, en este caso "make" y "model" con los valores "Tesla" y "Model S" respectivamente, lo que puede generar problemas en el código si ya existen variables con ese nombre o si no se espera que estas variables sean creadas.

Es importante siempre utilizar la palabra clave "new" al llamar a una función constructora para asegurar que se crea un nuevo objeto y no se estén creando variables en el ámbito global.

Resumen  

En resumen, las funciones constructoras en JavaScript son una forma poderosa de crear objetos personalizados con valores predeterminados y métodos. Es importante recordar siempre utilizar la palabra clave "new" al llamar a una función constructora para asegurar que se cree un nuevo objeto, y también evitar llamar una función constructora como una función normal para evitar problemas en el ámbito global.

¡Gracias por leer este tutorial! Si te ha sido útil, por favor, compártelo y déjame un comentario con tus pensamientos e ideas. <Estoy aquí para ayudarte/>.