¿ Qué diferencia hay entre prototipos y clases en JavaScript?

Question

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.

te sugiero leer:https://medium.com/@parsyval/javascript-prototype-vs-class-a7015d5473b — Diego Avila, Feb 11 '19 at 14:41
Relacionado: https://es.stackoverflow.com/questions/932/c%C3%B3mo-crear-emular-una-clase-en-javascript — Pablo Lozano, Feb 11 '19 at 14:45
La palabra `function`en el primer ejemplo sobra, no compila a menos que la borres — Pablo Lozano, Feb 11 '19 at 15:08

Pablo Lozano · Answer 1 · 2019-02-11T15:07:01.270

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);

score 4 · Answer 2 · answered Feb 11 '19 at 14:47

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!

score 3 · Answer 3 · edited Feb 11 '19 at 15:37

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

edited Feb 11 '19 at 15:37

Phi

9,913
5
25
47

answered Feb 11 '19 at 15:25

JackNavaRow

6,836
5
22
49

¿ Qué diferencia hay entre prototipos y clases en JavaScript?

3 Answers3

Linked