0

A raíz de unos videos que he visto he estado buscando información sobre los prototipos de JavaScript, y la verdad es que no me queda nada claro cuando y porque deben utilizarse

Mi duda es:

¿Cuál sería a nivel de funcionalidad, recomendación, etc. la diferencia entre estos dos códigos? ¿Cuándo se justifica el uso de prototipos y por qué?

Sin prototipo:

var Mascota = function(nombre, edad){
  this.nombre = nombre;
  this.edad = edad;
  
  this.ladrar = function() {
    texto = "Woof! Me llamo " + this.nombre;
    return texto;
  }
}
var nuevaMascota = new Mascota("Nombre", 2);
alert(nuevaMascota.ladrar());

Con prototipo:

var Mascota = function(nombre, edad){
  this.nombre = nombre;
  this.edad = edad;
}
Mascota.prototype.ladrar = function(){
   texto = "Woof! Me llamo " + this.nombre;
   return texto;
}
var nuevaMascota = new Mascota("Nombre", 2);
alert(nuevaMascota.ladrar());

Ambos códigos generan el mismo resultado visual, un alert con el texto: Woof! Me llamo Nombre

Gracias

itaca9
  • 96
  • 1
  • 9
  • 1
    _Los prototipos solo se crean una vez y se comparten entre cada instancia. Las funciones creadas en el constructor se crean como nuevos objetos para cada nuevo objeto creado con el constructor_. En realidad no hay ninguno mejor que otro y no hay respuesta concreta del por qué usarlos haciendo que tu pregunta se base en opiniones. – Rodrigo Ramírez Jan 25 '21 at 19:18
  • Respuesta para BetaM --> No, porque eso me explica que son los prototipos. El código en sí mismo lo entiendo.. lo que no entiendo es porque utilizarlos, cuando son mejores que la otra opción, si es que siempre son mejores.. Por eso lo he preguntado con un ejemplo, ¿entre mis dos códigos cual es mejor y por qué? Son dos maneras de programar lo mismo, ¿hay alguna diferencia de funcionalidad entre ambos? ¿Alguno es más recomendable por algún motivo? Eso es lo que no acabo de entender.. – itaca9 Jan 25 '21 at 19:22
  • Por qué utilizarlos? Eso son opiniones. Los patrones, las estructuras de datos y demás herramientas se usan _cuando se consideran la mejor opción posible_ pero eso ya depende de la opinión de cada uno. – Alfabravo Jan 25 '21 at 19:25
  • Respuesta para anythingg --> El hecho de que los prototipos se creen entre cada instancia, ¿los haría más eficientes? ¿o no tiene nada que ver? – itaca9 Jan 25 '21 at 19:25
  • 2
    Ya que estamos con opiniones: Personalmente, no me gusta usar prototype para extender la funcionalidad de _mis proyectos_, pero sí que es muy útil para modificar código de terceros o, incluso, comportamiento de elementos del navegador, por ejemplo crear `HTMLElement.prototype.data()` para establecer o leer atributos de datos. He visto quienes usan prototype para poder lidiar con las vicisitudes aplicables a `this` y tampoco me gusta, en ese caso, prefiero enlazar `this` con `.bind()`. – Triby Jan 25 '21 at 19:35
  • 1
    @itaca9, para responder a alguien necesitas usar @[usuario]. – Marcos Jan 25 '21 at 19:38
  • Esta pregunta creo que responde mejor a mi duda, más que a la pregunta que se ha asociado: https://es.stackoverflow.com/questions/236929/qué-diferencia-hay-entre-prototipos-y-clases-en-javascript?rq=1 – itaca9 Feb 06 '21 at 12:06

1 Answers1

0

  1. Cuando declaras la función constructora se crea u objeto que contiene la función "ladrar", y todos los objetos creados van a contener esa función como propiedad. En otras palabras, es imposible crear un objeto de tipo Mascota sin la función "ladrar". En este ejemplo verás que el primer log no devuelve ningún valor

    function Perro(nombre, color) { this.nombre = nombre, this.color = color }

    var perro1 = new Perro("Panda", "Negro y Blanco");
var perro2 = new Perro("Tony", "Gris");
console.log(perro1.edad);
Perro.prototype.edad = 3;
console.log(perro2.edad);

  2. Mas importante es que, cuando declaras la función constructora internamente se crea un objeto de ese tipo, y es a este objeto al que le agregas el prototipo. Esto no significa que todos los objetos creados (new Mascota...) contienen la propiedad "ladrar" sino que contienen la propiedad "ladrar" del objeto Mascota. Es decir nuevaMascota no contiene "ladrar" sino que es parte del objeto del cual hereda (). En este ejemplo veras que imprime 4 y 3 respectivamente. 4 es el valor de la propiedad edad del objeto "padre" Mascota y 3 es el valor de la propiedad del objeto "hijo" perro2. Perro.prototype.edad = 3; perro2.edad = 4; console.log(perro2.edad);console.log(perro2.__proto__.edad);

Creo que una razón para NO usarlos es que puede generar esta confusión entre objetos creados antes y después de agregar un prototipo, sumado a que debes tener presente estos cambios entre los objetos Padre e Hijo. Mas aún puedes modificar el constructor completo con Mascota.prototype = {edad:29} lo cual genera un nuevo objeto Padre adonde las nuevas instancias de Mascota van apuntar.

Espero haber sido de ayuda

Lucas Atala Macias
  • 31
  • 4