Prototipos en JavaScript

Question

En JavaScript, lo mismo que puede hacer de muchas maneras diferentes.

Considere los ejemplos:

1:

function Circle(radius) { 
return { 
    "r" : radius, 
    "area" : function(){ 
    return Circle.pi * this.r * this.r; 
    } 
} 
} 
Circle.pi = 3.14159; 

var a = Circle(10); 
alert(a.area()); 

2:

function Circle(radius) { 
    this.r = radius; 
} 

Circle.pi = 3.14159; 
Circle.prototype.area = function(){ 
return Circle.pi * this.r * this.r; 
} 

var a = new Circle(10); 
alert(a.area()); 

El segundo es mejor que la primera, porque nosotros no definir la misma función área para cualquier instancia de Círculo.

Pero vamos a considerar 3:

function Circle(radius) { 
return { 
    "r" : radius, 
    "area" : Circle.area 
} 
} 
Circle.pi = 3.14159; 
Circle.area = function(){ 
return Circle.pi * this.r * this.r; 
} 

var a = Circle(10); 
alert(a.area()); 

¿Hay alguna razón para preferir segundo estilo en lugar de tercero? ¿O entendí mal algo?

Answer 1

Sin duda con el ejemplo 2. Ni el ejemplo 1 o 3 hacen un buen uso de características orientadas a objetos de JavaScript porque:

1. duplica definiciones de métodos en cada caso.
2. Al devolver un objeto nuevo en lugar de usar this, pierde la identidad de la clase, es decir, ya no puede hacer comprobaciones como a instanceof Circle.
3. Olvidas la posibilidad de herencia ya que no usas prototipos.

Answer 2

La diferencia entre Circle.prototype.area y Circle.area es que solo se puede acceder a ella con una instancia de la clase.

Circle.prototype.area = function(){}; 
Circle.area // wrong 
(new Circle()).area // ok (you need a Circle object) 

y

Circle.area = function(){}; 
Circle.area // ok (you don't need the object, its static) 
(new Circle()).area // wrong 

Answer 3

El problema con el ejemplo 2 se, que cuando accidentalmente olvidó usar el operador new al crear el objeto, y sólo llame var a = Circle(10); (lo cual está bien para la tercera ejemplo, pero no para el segundo), entonces su constructor crea un gran problema:

this.r = radius; 

Dado que no se ha utilizado new, this se le asignará el objeto global, por lo que el constructor realmente establece la variable global r!

Así que yo prefiero fuertemente ejemplo 3.

Answer 4

¿Hay alguna razón para preferir segundo estilo en lugar de tercero?

La tercera estilo todavía está perdiendo una cantidad pequeña de espacio con el fin de almacenar la asociación entre el nombre area y la función de área.

También porque está devolviendo un nuevo Object del literal {...}, instanceof Circle no funcionará.

El segundo es mejor que el primero porque no definimos el mismo área de función para ninguna instancia del círculo.

hecho, pero puede a veces ser útil para definir una nueva copia de cada método de una copia que, gracias a los cierres, pueden saber de qué objeto se ve obligada a. Con el prototipado tradicional, solo obtiene el contexto this que se establece a partir del objeto desde el cual el llamador lo recuperó, en lugar de estar vinculado a un objeto en particular.La primera forma evita los problemas de this -la retención en cosas como los controladores de eventos, a costa de una cierta pérdida de eficiencia.

Answer 5

Me gustaría comentar sobre "El segundo es mejor que el primero porque no definimos el mismo área de función para ninguna instancia del Círculo". En la práctica, esto puede ser una ventaja tan insignificante como para ser totalmente insignificante. Tiendo a favorecer la sintaxis y el código amigable con el hombre sobre la eficiencia, , a menos que el rendimiento se vea afectado notoriamente. He estado ignorando por completo la función Prototype de JavaScript y también evitando el uso de "esto", básicamente usando la técnica n.º 1. Está funcionando bien para mí. Me parece que evitar "esto" evita mucha confusión sobre a qué se refiere "esto". Es perfectamente posible crear estructuras de tipo herencia sin "prototipo". Puede crear un objeto de superclase y anular los métodos que desee. Douglas Crockford ha escrito bastante extensamente sobre numerosas formas diferentes de hacer herencia en javascript.

Estoy de acuerdo con casablanca de que el hecho de poder probar el tipo usando "instanceof" es una buena ventaja de devolver "esto". Tal vez eche otro vistazo a "protype" y "this" en un proyecto futuro. Por ahora, sin embargo, me llevo bien sin ellos.