¿Cuál es el propósito del prototipo? [duplicar]


Posible Duplicado:
Entender la herencia prototípica en JavaScript

OK, así que soy algo nuevo en la idea de OOP en JS.

¿Cuál es la diferencia entre estos dos fragmentos de código escritos a continuación:

function animal(){
    this.name = 'rover';
    this.set_name = function(name){
         this.name = name;
    }
}
function animal(){
    this.name = 'rover';
}
animal.prototype.set_name = function(name){
    this.name = name;
}

Ambos hacen lo mismo, entonces, ¿cuál es la diferencia?

Author: Xufox, 2011-12-08

3 answers

El uso del prototipo hace que la creación de objetos sea más rápida, ya que esa función no tiene que volver a crearse cada vez que se crea un nuevo objeto.

Cuando haces esto:

function animal(){
    this.name = 'rover';
    this.set_name = function(name){
         this.name = name;
    }
}

La función set_name se crea de novo cada vez que se crea un animal. Pero cuando haces esto

animal.prototype.set_name = function(name){
    this.name = name;
}

La función no tiene que ser re-creado cada vez, existe en un lugar en el prototipo. Así que cuando se llama someAnimal.set_name("Ubu"); el contexto this se establecerá en someAnimal y (el y solo) set_name se llamará a la función.


Sin embargo, hay una ventaja al usar la primera sintaxis: las funciones creadas de esta manera tendrán acceso a datos privados:

function animal(){
    var privateData = 'foo'

    this.name = 'rover';
    this.set_name = function(name){
         this.name = name;
         alert(privateData); //will alert 'foo'
    }
}

Douglas Crockford llama a las funciones creadas así "privilegiadas" por esa razón: tienen acceso tanto a datos públicos como privados.

 298
Author: Adam Rackis,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-04-12 03:41:15

La diferencia aparece cuando se crea un nuevo objeto a partir de estas funciones

var animal1 = new animal();

Todos los objetos creados por la primera función tendrán propiedades name y set_name diferentes. Sin embargo, todos los objetos creados por la segunda función compartirán la propiedad set_name.

 32
Author: ,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-12-08 15:40:12

En el primer ejemplo, cada animal separado tiene una propiedad propia para la función set_name, mientras que en el segundo ejemplo comparten la misma función a través de su prototipo.

La ventaja de la primera versión es que los métodos pueden acceder a variables locales (privadas) declaradas dentro del constructor.

La ventaja del segundo método es que necesita menos memoria (ya que solo almacena el método una vez en lugar de un millón de veces) y es más performático en JS actual motor.

Usando el segundo método también puede modificar o agregar métodos a una clase de una manera que también afecta a las instancias que ya se crearon.

 20
Author: hugomg,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-12-08 15:40:56