Como funciona New en Javascript

Posted on April 1, 2022  (Last modified on August 4, 2022 )

2 minutes  • 277 words

Alguna vez te has preguntado cómo funciona new en Javascript? La palabra reservada new funciona como azúcar sintáctica dentro javascript, es decir, es un atajo para escribir código más rápido y mejorar nuestra experiencia.

Veamos un ejemplo.

function Cat(name) {
    const cat = Object.create(Cat.prototype);
    cat.name = name;
    return cat;
}

Cat.prototype.begsFood = function() {
    console.log(`I'm ${this.name} and I'm hungry gimme chick!`);
};

const dodo = Cat('Dodo');
dodo.begsFood();

Veamós que está sucediendo en el codigo anterior.

1. Creamos una función llamada Cat que recibe como parámetro un nombre
2. Declaramos una variable, cat(con minúsculas) y le asignamos el método Object.create y por parametro el prototype de la función recien creada. (lee –> Prototype si tienes dudas)
3. Añadimos una propiedad llamada name y lo llenamos con el valor del parámetro (name)
4. Retornamos la variable cat
5. Al prototype de Cat le asignamos un nuevo método llamado begsFood que se encarga de mostrar un mensaje en consola
6. Almacenamos el contenido de la función Cat y pasamos como parámetro un nombre cualquiera (“Instanciamos”)
7. Ejecutamos el método begsFood.

Ahora vamos a ver cómo quedaria utilizando New:

function Cat(name) {                                                   
    //this = Object.create(Cat.prototype);                      
    this.name = name;                                                  
    //return this;                                              
}

Cat.prototype.begsFood = function() {
    console.log(`I'm ${this.name} and I'm hungry gimme chick!`);
};

const dodo = new Cat('Dodo');
dodo.begsFood();

Cuando asignamos la palabra “new”, lo que hace es ejecutar por defecto un Object.create con su prototype pero no a una variable cualquiera sino a “this” (línea 2) y el return (línea 4) ya no es necesario porque Javascript asume que siempre lo va a retornar.

Así que recuerda, new es solo un atajo en nuestro lenguaje Javascript.

Resultado en ambos casos

"I'm Dodo and I'm hungry gimme chick!"