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

7
  • 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
    Commented el 25 ene. 2021 a las 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
    Commented el 25 ene. 2021 a las 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
    Commented el 25 ene. 2021 a las 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
    Commented el 25 ene. 2021 a las 19:35
  • 1
    @itaca9, para responder a alguien necesitas usar @[usuario].
    – Marcos
    Commented el 25 ene. 2021 a las 19:38

1 respuesta 1

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

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