He pasado bastante tiempo desarrollando simples widgets para proyectos de la siguiente manera:
var project = project || {};
(function() {
project.elements = {
prop1: val1,
prop2: val2
}
project.method1 = function(val) {
// Do this
}
project.method2 = function(val) {
// Do that
}
project.init = function() {
project.method1(project.elements.prop1)
project.method2(project.elements.prop2)
}
})()
project.init();
Pero he comenzado a cambiar mi formato a lo siguiente:
function Project() {
this.elements = {
prop1: val1,
prop2: val2
}
this.method_one(this.elements.prop1);
this.method_two(this.elements.prop2);
}
Project.prototype.method_one = function (val) {
//
};
Project.prototype.method_two = function (val) {
//
};
new Project();
Por supuesto, estos son ejemplos tontos, así que no te enredes en el eje. Pero, ¿cuál es la diferencia funcional y cuándo debo elegir una u otra?
design-patterns
javascript
prototyping
JDillon522
fuente
fuente
project
declaración dentro de la función. Actualizado.Respuestas:
La primera diferencia se puede resumir como: se
this
refiere a la instancia de la clase.prototype
se refiere a la definición .Digamos que tenemos la siguiente clase:
Así que aquí estamos adjuntando
this.number
a cada instancia de la clase, y tiene sentido porque cada unoFlight
debe tener su propio número de vuelo.Por el contrario,
prototype
define una propiedad única a la que pueden acceder todas las instancias.Ahora, si queremos obtener el número de vuelo, simplemente podemos escribir el siguiente fragmento y todas nuestras instancias obtendrán una referencia a este objeto recién prototipo.
La segunda diferencia es sobre la forma en que JavaScript busca una propiedad de un objeto. Cuando está buscando
Object.whatever
, JavaScript llega hasta el objeto Object principal (el objeto del que todo lo demás ha heredado), y tan pronto como encuentre una coincidencia, regresará o lo llamará.Pero eso solo sucede para las propiedades prototipadas. Entonces, si tiene algún lugar en los niveles más altos
this.whatever
, JavaScript no lo considerará como una coincidencia y continuará la búsqueda.Veamos cómo sucede en la realidad.
Primero tenga en cuenta que [casi] todo son objetos en JavaScript. Prueba esto:
Ahora veamos qué hay dentro de
Object
(tenga en cuenta las mayúsculasO
y.
al final). En las Herramientas para desarrolladores de Google Chrome, cuando ingrese.
, obtendrá una lista de propiedades disponibles dentro de ese objeto específico.Ahora haga lo mismo para
Function
:Puedes notar el
name
método. Solo ve y enciéndelo y veamos qué sucede:Ahora creemos una función:
Y veamos si también tenemos el
name
método aquí:Deberías obtener una cadena vacía, pero está bien. No debe obtener un error o una excepción.
¿Ahora agreguemos algo a ese dios
Object
y veamos si lo obtenemos también en otros lugares?Y ahí vas:
En todos los casos deberías ver
"Okay!"
.Con respecto a los pros y los contras de cada método, puede considerar la creación de prototipos como una forma "más eficiente" de hacer las cosas, ya que mantiene una referencia en cada instancia en lugar de copiar toda la propiedad en cada objeto. Por otro lado, es un ejemplo de Tightly Coupling, que es un gran no-no hasta que realmente puedas justificar la razón.
this
es bastante más complicado ya que es relevante para el contexto. Puede encontrar muchos buenos recursos gratis en Internet.Dicho todo esto, ambas formas son solo herramientas de lenguaje y realmente depende de usted y del problema que está tratando de resolver para elegir lo que mejor se adapte.
Si necesita tener una propiedad que sea relevante para cada instancia de una clase, utilice
this
. Si necesita tener una propiedad para funcionar igual en cada instancia, entonces useprototype
.Actualizar
Con respecto a los fragmentos de muestra, el primero es un ejemplo de Singleton , por lo que tiene sentido usarlo
this
dentro del cuerpo del objeto. También puede mejorar su ejemplo haciéndolo modular de esta manera (y no necesita usarlo siemprethis
también).Su segundo fragmento no tiene mucho sentido porque primero lo está utilizando
this
y luego está intentando piratearloprototype
, lo que no funciona porquethis
tiene prioridadprototype
. No estoy seguro de cuáles eran sus expectativas de ese código y cómo funcionaba, pero le recomiendo que lo refactorice.Actualizar
Para dar más detalles sobre cómo
this
tener prioridadprototype
, puedo mostrarle un ejemplo y decirle cómo se puede explicar, pero no tengo ningún recurso externo para respaldarlo.El ejemplo es muy simple:
La explicación es, como sabemos,
this
es relevante para el contexto. Entonces, no llegará a existir hasta que el contexto esté listo. Cuando el contexto está listo? Cuando se crea la nueva instancia! ¡Deberías adivinar el resto ahora! Significa que, aunque existe unaprototype
definición,this
tiene más sentido tener prioridad porque se trata de la nueva instancia que se está creando en ese momento.fuente
this
en el ejemplo del prototipo tonto porque sethis
refiere a sus propias propiedades, incluidos sus métodos. No aprendo mejor al leer sobre el código, sino más al mirar el código. ( MDN lo mordió , Object Playground (increíble) y algunos otros). ¿Puede señalar algo que explique lo que quiere decir sobre "this
tiene prioridad sobreprototype
"? Me gustaría investigarlo más.