10

Estoy haciendo el "refactoring" de mi código y decidí crear una clase para tener un cierto orden. Para hacerlo decidí usar los prototipos objeto.prototype.

A lo que me pregunto ¿ Qué diferencia tiene el hecho de crear una clase prototipada y una clase común? es decir entre :

class persona {        
    constructor(nombre){
       this.nombre = nombre;
    }

    function saludar(){
        return `hola ${this.nombre}!`;
    }
}

y

function persona(nombre){
    this.nombre = nombre;
}

persona.prototype.saludar = function (){
    return `hola ${this.nombre}!`;
}

Me gustaría saber si existe alguna diferencia y cual sería mejor utilizar.

3

3 respuestas 3

5

Ambas formas son prácticamente equivalentes, la sintaxis de clases es azúcar sintáctico con un leve matiz:

function persona(nombre){
    if (!(this instanceof persona)) {
      console.log('No actúo como constructor');
    }
    this.nombre = nombre;
}

persona.prototype.saludar = function (){
    return `hola ${this.nombre}!`;
}

persona('Juan');
p = new persona('yo');
console.log(p);

class Persona {        
    constructor(nombre){
       this.nombre = nombre;
    }

    saludar(){
        return `hola ${this.nombre}!`;
    }
}

let p2 = new Persona('otro');
console.log(p2);
console.log(p2.saludar());

Persona('fallo');

Como puedes ver, una función puede ser un constructor o una función normal a la vez, pero un constructor definido con la sintaxis de clases no puede llamarse como si fuera una función.

Puede parecer una tontería, pero las clases nativas de Javascript a menudo usan las funciones constructoras para otras funcionalidades, dependiendo de si usas new delante o no:

let p = Number('5'); //parsea un String, como parseFloat
console.log(p.__proto__.constructor.name,typeof p);

let d = new Number('5'); //crea un objeto Number
console.log(d.__proto__.constructor.name,typeof d);

4

Para que te hagas una idea, en JS no existe una herencia de clases, por eso existe prototype, que es un método que tienen TODOS los objetos y hace la función de heredar, agregar o modificar metodos de/a un objeto. Si te fijas usaste dos metodos para crear el objeto persona: Una clase:

class persona {        
   constructor(nombre){
     this.nombre = nombre;
  }

  function saludar(){
    return `hola ${this.nombre};
  }
}

y una función:

function persona(nombre){
    this.nombre = nombre;
}

Bien. Las clases fueron implementados no hace mucho al lenguaje de JS, te permiten heredar otras clases con extends. Anterior a eso, para simular la herencia utilizaban prototype. Es el ejemeplo que hiciste aqui:

persona.prototype.saludar = function (){
   return "hola "+ this.nombre +"!";
}

Estas diciendo que el objeto persona tiene un método que se llama saludar y claramente lo podriamos llamar con

var p = new persona("Ivan");
console.log(p.saludar()); //te devolveria el saludo
console.log(p.apellido); //no hay propiedad con ese metodo

Espero que te sirva mi explicación!

3

Antiguamente JavaScript no tenía una forma de crear clases, para ello se usaban los prototypes, Esto cambió en la versión ECMAScript 2015

De igual forma ambos funciona para hacer lo mismo (definir una clase para este ejemplo), como lo explica @PabloLozano,


Ahora el Prototype se usa mas para hacer Programacion Funcional

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.