Crear objetos de forma manual está bien cuando necesitas uno o dos, pero cuando el proyecto exige cientos de ellos, copiar y pegar deja de ser una opción viable. Las funciones constructoras en JavaScript resuelven exactamente ese problema: permiten fabricar objetos de manera escalable, reutilizable y organizada.
Un objeto es una estructura de datos que permite agrupar información relacionada en una sola unidad. Cada pieza de información se guarda como una propiedad, usando una clave y un valor. Por ejemplo, un usuario puede tener un nombre, una edad y una profesión, todo dentro del mismo objeto.
//Sintaxis
const objeto = {
clave: valor,
clave2: valor2,
};
const user = {
name: "Ana",
age: 20,
isStudent: true,
}; user.name user['age']user.age = 21user.country = 'Colombia' ⁉️ Un metódo es una función dentro de un objeto. Es una acción que ese objeto puede hacer.
const user = {
propiedad: valor,
metodo() {
//código
},
}
//¿Como usarlo?
user.metodo()this para acceder a sus propiedades
const user = {
name: 'Ana',
greet() {
return `Hola , soy ${this.name}`
},
setAge(newAge) {
this.age = newAge
},
}⁉️ Elimina una propiedad (clave + valor) de un objeto. Esto es mediante al operador propio de JavaScript delete. Este no es un método
const user = {
name: 'Ana',
age: 20,
}
delete user.ageUna función constructora es, en esencia, una función cuyo único propósito es construir objetos y así poder hacer el proceso mas corto y rapido. Su sintaxis es la misma que la de cualquier función, con ciertas diferencias importantes:
this para acceder a las propiedades del objeto que se está construyendo.new se utiliza para crear un nuevo objeto.Necesitamos saber que es una instancia. Una instancia es una clase de objeto creado a partir de una clase o constructor.
function Person(name,lastName,age){
this.name = name;
this.lastName = lastName;
this.age = age;
} /*↳ Usamos la palabra reservada this para acceder
a las propiedades del objeto que se está construyendo*/
/* ↓ Esto es una instancia. */
const person1 = new Person("Gabriela", "Ferrer",26);
/* ↳ Usamos la palabra reservada new para
crear un nuevo objeto y llamar a la función constructora*/Después de definir la función constructora, es probable que necesites agregar nuevas propiedades o métodos sin modificar el constructor original. Aquí es dond entra en juego prototype.
El prototype es un objeto especial que actúa como una copia compartida de la función constructora.Todo lo que agregues al prototype estará disponible para todas las instancias de ese objeto.
Nota: Una instancia es simplemente el objeto resultante de ejecutar tu función constructora con la palabra reservada new. Es la “copia” única y específica que nace de ese molde.
Person.prototype.cellPhone = "123456789";
↳ /* Esta propiedad estará disponible para todas las instancias de Person*/
Ⓜ️Person.prototype.saludar= function(){ // los metodos se añaden a partir de prototype
console.log(`¡Hola! me llamo ${this.name}`)
}
/*Podemos hace los mismo para agregar métodos*/Eficiencia de memoria: Si defines el método directamente con this.miMetodo = function() dentro de la función constructora, se creará una copia nueva de esa función en la memoria cada vez que crees un objeto nuevo.
Uso compartido: Al añadirlo a Persona.prototype, todas las instancias (persona1, persona2, etc.) consultan un único lugar en la memoria para ejecutar ese método.
person1.nationality = "Colombian";
↳ /* Esta propiedad estará disponible unicamente para la instancia person1*/Las clases son la forma más moderna nacida en 2015, para crear objetos en JavaScript con una sintaxis más limpia.
Una clase funciona como un blueprint, es decir, un molde a partir del cual vas a construir diferentes objetos con la misma estructura. No es una característica completamente nueva del lenguaje: es lo que se conoce como sugar syntax, una capa más amigable encima de las funciones constructoras que ya existían.
¿Qué es sugar syntax? Es una sintaxis más legible que hace lo mismo que el código original por debajo. En este caso, las clases siguen creando objetos como las funciones constructoras, pero se leen mejor.
//Sintaxis
class User {
constructor (name, age){
this.name = name;
this.age= age;
}
saludar(){
console.log(`¡Hola! me llamo ${this.name}`)
}/*Los métodos en una clase son funciones que
describen acciones que pueden realizar sus instancias.*/
}
const ana = new User("Ana", 24);
ana.name // Este retorna el valor de la llave Ana
ana.saludar();| Característica | Función constructora | Clase |
|---|---|---|
| ¿Qué es? | Una función usada como molde para crear objetos. | Una sintaxis moderna para crear objetos. |
| ¿Para qué sirve? | Crear múltiples objetos con una estructura similar. | Crear múltiples objetos de forma más organizada. |
| ¿Cómo se crea? | Se utiliza function y new. | Se utiliza class y new. |
| Constructor | La propia función actúa como constructor. | Se utiliza constructor(). |
| Métodos | Se suelen agregar al prototype. | Se escriben directamente dentro de la clase. |
| Sintaxis | function User(name) { ... } | class User { ... } |
| Uso | new User("Ana") | new User("Ana") |
| Prototipos | Utiliza el sistema de prototipos de JavaScript. | También utiliza prototipos internamente. |
Prototipo: Cada clase o función constructora genera un prototipo que comparte propiedades y métodos a sus instancia, lo que te permite escribir código más limpio, reutilizable y organizado.
Herencia: La herencia en JavaScript ocurre de forma automática gracias al prototipo. Cuando defines un método en la clase constructora, ese método queda disponible para cualquier instancia que crees después.