que - Tratando de entender el punto de los prototipos en JavaScript.

prototype chaining in javascript

Question

Me doy cuenta de que esto se me ha pedido cientos de veces; sin embargo, parece que no entiendo el concepto de "por qué" los prototipos en JavaScript son adecuados, como lo es para imitar clases (sí, sé que JavaScript es un lenguaje basado en prototipos, yo He recogido eso mucho.

Al igual que muchas otras personas que se esfuerzan por hacer de JavaScript un lenguaje cotidiano que utilizo, estoy acostumbrado al estilo de clase OOP normal, como he jugado en Java (y he usado clases en ActionScript y PHP). Sin embargo, aunque creo que entiendo cómo funcionan los prototipos, no puedo entender por qué son necesarios.

Aquí está mi guión de muestra de cómo estoy entendiendo prototipos en JavaScript:

var Apple = function() {
    // An apple?
};

Apple.prototype.color = "red";

Apple.prototype.changeColor = function(new_color) {
    this.color = new_color;
};
Apple.prototype.getColor = function() {
    alert(''color: ''+this.color);
};

var apple1 = new Apple();
var apple2 = new Apple();
apple2.changeColor("green");
apple1.getColor();
apple2.getColor();

... había asumido que tal vez el prototipo significaba que compartía el mismo objeto en lugar de simplemente crear un nuevo objeto cada vez; sin embargo, obviamente no es el caso ya que apple1 y apple2 tienen colores diferentes, aún (después de ejecutar dicho guión).

Luego lo escribí en algo más que un script orientado a objetos:

var Apple = function() {
    this.color = "red";

    this.changeColor = function(new_color) {
        this.color = new_color;
    };
    this.getColor = function() {
        alert(''color: ''+this.color);
    };
};

var apple1 = new Apple();
var apple2 = new Apple();
apple2.changeColor("green");
apple1.getColor();
apple2.getColor();

Con los mismos resultados exactos (como se esperaba). ... ¿Por qué no se recomienda este último código? No tengo problemas para usar prototipos (suponiendo que los use correctamente), pero necesito entender el concepto de "por qué".

...¿Alguna ayuda?

Answer 1

... Había supuesto que tal vez el prototipo significaba que compartía el mismo objeto en lugar de simplemente crear un nuevo objeto cada vez ...

Lo hace. Hay un objeto prototipo que se comparte entre todas las instancias creadas desde el constructor.

... sin embargo, obviamente no es el caso, ya que tanto apple1 como Apple2 tienen colores diferentes, aún (después de ejecutar dicho script).

Para ciertos tipos (por ejemplo, número, booleano, nulo, no definido o cadena), cuando cambia una propiedad que existe en el objeto prototipo a través de this.color por ejemplo, creará una propiedad de color en la instancia. El prototipo no se ve afectado, de modo que las nuevas instancias tendrán el color predeterminado definido en el prototipo.

Si ha actualizado un miembro de una matriz o un objeto al que se hace referencia mediante una propiedad del objeto prototipo, el cambio se verá entre todas las instancias.

... ¿Por qué no se recomienda este último código?

Debido a que está construyendo nuevas funciones idénticas con la creación de cada nueva instancia en lugar de compartir una instancia de las funciones a través del objeto prototipo.

Para ampliar un poco más, me gustaría señalar que cuando se llama a su función como constructor utilizando la new palabra clave, this es la nueva instancia en el constructor. Por lo tanto, cualquier propiedad que agregue a this se agregará a la instancia.

var Apple = function() {
      // Here "this" is the object being constructed. As such, we''re adding
      //   a property "rotten" to every instance created
    this.rotten = false;
};

   // adding a "color" property to the prototype object
Apple.prototype.color = "red";

   // set the property "color" on the instance to the value of "new_color"
Apple.prototype.changeColor = function(new_color) {
    this.color = new_color;
};
   // first check to see if this instance has its own "color" property. If so,
   //    use it. If not, look at the prototype object to see if it exists.
Apple.prototype.getColor = function() {
    alert(''color: ''+this.color);
};

// two new instances each have their own "rotten" property, and don''t have a
//    "color" property. Both share the prototype object, so if "color" is 
//    requested, it will come from there
var apple1 = new Apple(); 
var apple2 = new Apple();

// This will add an "color" property to the "apple2" instance
apple2.changeColor("green");

// Doesn''t have a "color" property, so it looks to the prototype object
apple1.getColor();

// Has a "color" property, so it uses that instead of the "color" on the prototype
apple2.getColor();

Answer 2

prototype le permite agregar métodos y propiedades a una clase y la aplicará no solo a la clase, sino también a cualquier instancia de objeto actual de esa clase.