Constructores, y el uso del THIS

[aguila_393]

Estoy siguiendo un manual de AJAX y es que me han surgido muchas dudas al llegar a la parte mas importante en donde se comienza a trabajar de lleno con AJAX. Aunque en si las dudas que tengo son mas relacionadas al Javascript por eso cree el tema aca.

Esta es la web: [URL="http://www.librosweb.es/ajax/capitulo7/utilidades_y_objetos_para_ajax.html"]http://www.librosweb.es/ajax/capitulo7/utilidades_y_objetos_para_ajax.html[/URL]

Y este el codigo con el que me eh complicado la vida:

Código Javascript:

var net = new Object();
 
net.READY_STATE_UNINITIALIZED=0;
net.READY_STATE_LOADING=1;
net.READY_STATE_LOADED=2;
net.READY_STATE_INTERACTIVE=3;
net.READY_STATE_COMPLETE=4;
 
// Constructor
net.CargadorContenidos = function(url, funcion, funcionError) {
  this.url = url;
  this.req = null;
  this.onload = funcion;
  this.onerror = (funcionError) ? funcionError : this.defaultError;
  this.cargaContenidoXML(url);
}
 
net.CargadorContenidos.prototype = {
  cargaContenidoXML: function(url) {
    if(window.XMLHttpRequest) {
      this.req = new XMLHttpRequest();
    }
    else if(window.ActiveXObject) {
      this.req = new ActiveXObject("Microsoft.XMLHTTP");
    }
 
    if(this.req) {
      try {
        var loader = this;
        this.req.onreadystatechange = function() {
          loader.onReadyState.call(loader);
        }
        this.req.open('GET', url, true);
        this.req.send(null);
      } catch(err) {
        this.onerror.call(this);
      }
    }
  },
 
  onReadyState: function() {
    var req = this.req;
    var ready = req.readyState;
    if(ready == net.READY_STATE_COMPLETE) {
      var httpStatus = req.status;
      if(httpStatus == 200 || httpStatus == 0) {
        this.onload.call(this);
      }
      else {
        this.onerror.call(this);
      }
    }
  },
 
  defaultError: function() {
    alert("Se ha producido un error al obtener los datos"
      + "\n\nreadyState:" + this.req.readyState
      + "\nstatus: " + this.req.status 
      + "\nheaders: " + this.req.getAllResponseHeaders());
  }
}
 

Ire colocando las partes en las que tengo problema para entender el codigo.

Código Javascript:

// Constructor
net.CargadorContenidos = function(url, funcion, funcionError) {
  this.url = url;
  this.req = null;
  this.onload = funcion;
  this.onerror = (funcionError) ? funcionError : this.defaultError;
  this.cargaContenidoXML(url);
}
 
net.CargadorContenidos.prototype = {
  cargaContenidoXML: function(url) {...}
  onReadyState: function() {..}
  defaultError: function() {...}
 

Desde el principio no entiendo bien que es lo que se hace, al principio supuestamente se construye un nuevo objeto pero no hay que poner el nombre con el cual se creara este objeto? Por ej. function cargadorContenido (..){...}

Luego cuando se define cada variable usando this.variable el "this" a que objeto se refiere? Al objeto net o a cargadorContenidos? Y como se sabe eso? Porque el this se refiere al objeto que lo llama pero hasta ahi cargadorContenidos es una funcion o no?

Bueno, y luego al mismo objeto se le agregan re metodos, y es que me pregunto, no es lo mismo agregarlo cuando definimos anteriormente a cargadorContenido?

Disculpen por tantas preguntas, espero que puedan ayudarme, les estare muy agradecido.

[AlvaroG]

Forma fea tienen de crear un objeto nuevo (¿"new Object()" en vez de "{}"?) pero bueno, vaya uno a saber...

Lo que sucede en la línea 2 es que se crea una nueva función anónima con function(), y esa función anónima se asigna a cargadorContenidos, resultando en efecto igual a

Código Javascript:

function cargadorContenidos(...) { ... }
net.CargadorContenidos = cargadorContenidos;
 

this se refiere a net.CargadorContenidos, es decir, a la función anónima que se creará. La idea luego es que los nuevos objetos "cargador" heredan las propiedades de este objeto función.

Este ejemplo utiliza una forma de herencia que no es la más apropiada en Javascript. Personalmente prefiero los prototipos, y seguir las recomendaciones de Douglas Crockford para conseguir herencia entre objetos, que es la forma "nativa" de javascript.

El ejemplo se puede modificar fácilmente para ser más entendible, el siguiente código es equivalente (aunque no funciona, requiere más cambios):

Código Javascript:

// función para herencia entre objetos
if (typeof Object.create !== 'function') {
  Object.create = function (o) {
    function F() {}
    F.prototype = o;
    return new F();
  };
}
 
// se inicializan los objetos principales
var net = {};
 
net.CargadorContenidos = {
  url : null,
  req : null,
  onload : null,
  onerror : null,
  
  cargaContenidoXML : function(url, funcion, funcionError) { ... },
  onReadyState : function() { ... },
  defaultError : function() { ... },
}
 
// luego se lo puede llamar así
var cargador = Object.create(net.CargadorContenidos)
cargador.cargaContenidoXML(url, funcion, funcionError);
 

[aguila_393]

Gracias por responder.

Me quedo una duda, en que parte del codigo se define el nombre de la primer funcion? Ya que segun me dijiste el nombre es cargadorContenidos y no CargadorContenidos .

De nuevo gracias por contestar.

[AlvaroG]

No, no es así. No sé cuál sea tu conocimiento de programación, pero quizás nunca te hayas topado con un lenguaje en el que las funciones sean un tipo de dato como cualquier otro.

En Javascript así como en muchos otros lenguajes, las funciones pueden crearse sin nombre (usualmente se hace con funciones que serán utilizadas una sola vez). Luego podés asignar la referencia a la función a cualquier variable, de la misma forma que lo hacés con cualquier objeto.

Imagina esto: cuando hacés

Código Javascript:

this.req = new XMLHttpRequest();
 

estás creando un nuevo objeto XMLHttpRequest() sin nombre, y asignando ese objeto a "this.req", de tal forma que referenciar a this.req equivale a referenciar al objeto.
De la misma forma, cuando hacés

Código javascript:

net.CargadorContenidos = function(url, funcion, funcionError) {
 

estás creando un nuevo objeto función (una nueva función) sin nombre, y asignando este objeto a "net.CargadorContenidos", de tal forma que referenciar a net.CargadorContenidos() equivale a llamar a la función.

Siguiendo el ejemplo, una vez que obtenés la referencia podés hacer cualquier cosa con ella, incluso copiarla a otra variable.

Código Javascript:

var miVariable = this.req; <-- referencia al mismo objeto creado antes
var miFuncion = net.CargadorContenidos; <-- referencia a la misma funci&#243;n creada antes
 

Espero que ahora esté más claro.


Saludos.

[aguila_393]

Gracias nuevamente por responder.

Hasta ahora venia bastante bien con javascript. El problema me surge al llegar al momento en que se declara a net.CargadorContenidos como una funcion, y ya en este momento la podemos llamar como vos decis tipeando net.CargadorContenidos();

Pero luego en la siguiente parte de codigo:

Código Javascript:

net.CargadorContenidos.prototype = {...}
 

Es que no entiendo que es lo que se hace, lo que interpreto es que se le agregan tres metodos a net.CargadorContenidos pero luego no entiendo porque es que directamente no se los declara en la funcion anterior con algo tipo :
this.prototype.metodo1 (){...}

Estos metodos estan declarados como si net.CargadorContenidos fuese un objeto(array) asociativo (usando JSON es decir clave1 : valor1) y esto me confunde aun mas ya que CargadorContenidos es una funcion pero a la vez se lo trata como un array asociativo aunque estoy seguro que en alguna parte me perdi y estoy interpretando las cosas mal.

[eits]

Esperemos la respuesta de AlvaroG (yo conozco poco de objetos en javascript )
pero mientras eso pasa lee un poco de objetos literales en javascript
ejemplo:

Código Javascript:

var Rotar = {
    path: 'images/', 
    speed:  4500,
    images: ["smile.gif", "grim.gif", "frown.gif", "bomb.gif"]
}
 

esto es un ejemplo simple de objeto literal y si se parece mucho al JSON.

un saludo.

[aguila_393]

Iniciado por eits

Esperemos la respuesta de AlvaroG (yo conozco poco de objetos en javascript )
pero mientras eso pasa lee un poco de objetos literales en javascript
ejemplo:

Código Javascript:

var Rotar = {
    path: 'images/', 
    speed:  4500,
    images: ["smile.gif", "grim.gif", "frown.gif", "bomb.gif"]
}
 

esto es un ejemplo simple de objeto literal y si se parece mucho al JSON.

un saludo.

Lo eh leido y si fuera solo eso lo comprenderia mejor pero es como si a eso se le agrega esto unas lineas mas arriba:

Código Javascript:

Rotar = function () {
this.computadora = "ejemplo";
alert(this.computadora);
}
 

En ese caso primero el objeto se define como una funcion pero luego se le agregan otras cosas que nada tienen que ver con la funcion anterior. Y ahi es donde llego a la conclusion de que algo me estoy perdiendo, se puede hacer eso?
Seria algo asi como si pudiera llamarlo asi:

Código Javascript:

Rotar();
var nuevaVariable = Rotar.path;
 

En ese caso Rotar lo podria usar para que actue como la funcion pero tambien lo usaria como el objeto que declaraste anteriormente.

[Panino5001]

Te sugiero leas esto para que te quede claro cómo funcionan esas cosas:
https://developer.mozilla.org/es/Gu%..._en_prototipos

[aguila_393]

Iniciado por Panino5001

Te sugiero leas esto para que te quede claro cómo funcionan esas cosas:
[url]https://developer.mozilla.org/es/Gu%C3%ADa_JavaScript_1.5/Lenguajes_basados_en_clases_frente_a_basados_en_pr ototipos[/url]

Muchas gracias me fue de mucha ayuda. El problema estaba en que hasta el momento siempre que se habia creado un objeto nuevo segun el libro se declaraba de esta manera:

Código Javascript:

function objetoNuevo () {..}
 

Y crei que era la unica manera de crear un objeto nuevo pero segun lei si escribiera:

Código Javascript:

objetoNuevo = function () {...}
 

Es lo mismo, corrijanme si me equivoco.

Osea que segun esto que acabo de leer net.CargadorContenidos es una funcion que se utiliza para crear un objeto nuevo con ese nombre. Y luego en la parte de abajo lo que se hace es definir unos valores predeterminados para net.CargadorContenidos , ahora esta bien lo que dije?

entonces a fin de cuentas al final de todo esto yo puedo crear esto:

Código Javascript:

var objetoNuevo = new net.CargadorContenidos(...) ;
 
// Luego puedo usar los metodos definidos por el prototipo:
 
objetoNuevo.metodo1 ;
 

La verdad que costo pero ahora me quedo todo bastante claro y listo para seguir progresando. Solo necesito qeu em confirmen si lo que acabo de decir es tal como lo dije o si sigo teniendo problemas en alguna parte.

GRACIAS A TODOS

[AlvaroG]

Respondiendo al mensaje 5:
objeto1.prototype es un enlace al objeto padre de objeto1, y es el objeto del cual hereda un objeto creado via "new objeto1()"
Si se añaden propiedades a objeto1, solamente objeto1 las tendrá. Si añades propiedades a objeto1.prototype, estarán disponibles para los objetos que desciendan de objeto1.
Relee el enlace que te pasé sobre herencia con prototipos (es una traducción mala, pero servirá) para más detalles. Te recomiendo utilizar la función object.create() definida allí y olvidarte del asunto: crea tus objetos con las propiedades que necesites, y usa object.create() para crear objetos que descienden de ellos.

Con respecto al mensaje 9:
Sí, ambas formas son equivalentes. Una diferencia es que usar

Código Javascript:

function objetoNuevo () {..}
 

crea una variable global, un objeto función de nombre "func1". Mientras que haciéndolo de la otra forma podés controlar el ámbito de la variable a crear, no tiene por qué ser global y, como en el ejemplo, podés crearla como propiedad de un objeto:

Código Javascript:

miobjeto.objetoNuevo = function () {...}
 

Si tenés que crear objetos, a menos que tengas una razón real para usar function(), usa la sintaxis literal:

Código Javascript:

var objeto = {};
objeto.cualquiercosa = "algo";
 

o

Código Javascript:

var objeto = {
    cualquiercosa : "algo"
};
 

No hay necesidad de crear una función o llamar a "new Object()"

En definitiva, tu último comentario es correcto. Aunque como ves, es más difícil intentar emular el modelo clásico de herencia que hacerlo naturalmente con prototipos (si no me crees, nada más fíjate de nuevo en mi primer mensaje).


Saludos.

[buzu]

Es lo mismo, corrijanme si me equivoco.

De hecho, no es exactamente lo mismo, pero en esencia si.

Prueba con esto:

Código Javascript:

hazalgo();
 
var hazalgo = function(){
     alert('ya hice algo');
}
 

Al intentar correr ese código te va a dar un error, ya que cuando asignas una función anónima a una variable, no puedes usar dicha función antes de que haya sido declarada. En este caso estas queriendo usarla antes de declararla y pues te tira un error. Por el otro lado, si solo usas notación literal, lo que se conoce como function literal, si puedes llamar a la función aun antes que haya sido declarada.

Código Javascript:

hazalgo();
 
function hazalgo(){
     alert('ya hice algo');
}
 

En este caso verás que todo funciona correctamente. Ahora, la cosa se pone interesante. Mira:

Código Javascript:

onload = hazalgo;
        var hazalgo = function(){
            alert('ya hice algo');
        }
 

Veras que no pasa nada. Aun cuando la llamada se está haciendo al cargar la pagina, y se supone que para entonces la variable ya ha sido declarada, no pasa nada. Esto es por que la asignación se está haciendo antes de declarar la variable. Sin embargo, si en lugar de asignar directamente la función hazalgo al evento load de window, asignamos una función anónima que a su vez invoque a hazalgo, la cosa cambia:

Código Javascript:

onload = function(){
    hazalgo();
}
var hazalgo = function(){
    alert('ya hice algo');
}
 

Podemos seguir probando con otros ejemplos y curiosidades, pero mi objetivo no es demostrar cuantas curiosidades hay entre estos dos tipos de declarar funciones. Mi objetivo es solo demostrar que aun que en esencia ambos métodos son similares, no son realmente iguales. Sin embargo, sin importar como declares una función, siempre puedes usarla con el operador new para crear una instancia de ese objeto. (Aquellos que argumentan la inexistencia de instancias en javascript, favor de abstenerse de iniciar un debate. Ha sido ampliamente de batido y demostrado que javascript SI tiene instancias.)

Ahora, en cuanto al script, no se por que agregan un método al objeto net, solo para después llamarlo con el operador new. Es un tanto incoherente diría yo.

[aguila_393]

Bueno al fin logre entender. Solo unas dudas, tu dices que es mejor declarar un nuevo objeto asi:

var objetoNuevo = {...}

tiene alguna diferencia con declararlo asi:

var objetoNuevo = new Object();

ademas de tener que escribir un poco mas de codigo?


Hay alguna manera de crear el nuevo objeto definido en la funcion de otra manera que no sea??:

var ObjetoNuevo = new net.CargadorContenidos();

Gracias.

[buzu]

Realmente depende mucho de para que vas a usar el objeto. Yo no te diría que uses siempre una u otra forma, ya que la verdad no hay tal cosa como una forma mejor que otra. Simplemente depende de como vas a usar el objeto, cuantas veces y cosas por el estilo. Por ejemplo, si un objeto lo vas a usar más de una vez, definitivamente no te conviene usar notación literal, ya que para poder crear una nueva instancia de ese objeto tendrías que copiarlo todo y eso gasta memoria. Por el otro lado, si usas el constructor, solo necesitas llamar nuevamente a new para crear el objeto y todos los metodos no se copian pero permanecen accesibles ya que están, no en el objeto en sí, sino en su prototipo.

[AlvaroG]

No hay diferencia entre "{}" y "new Object()", ambos crean objetos vacíos que heredan de Object (que es lo más alto de la jerarquía de objetos en Javascript, y por lo tanto todo hereda de él)
Aún si existieran diferencias (que desconozco), el uso que se les da es equivalente.

Iniciado por buzu

Por ejemplo, si un objeto lo vas a usar más de una vez, definitivamente no te conviene usar notación literal, ya que para poder crear una nueva instancia de ese objeto tendrías que copiarlo todo y eso gasta memoria. Por el otro lado, si usas el constructor, solo necesitas llamar nuevamente a new para crear el objeto y todos los metodos no se copian pero permanecen accesibles ya que están, no en el objeto en sí, sino en su prototipo.

La notación literal es mejor por su claridad, pero depende de gustos, como todo lo que se puede hacer de más de una forma. Además la recomendación de usarla es solamente para crear el objeto inicial. Se use la forma que se use, se supone que uno no crea muchos objetos iguales, eso no se hace ni en el modelo clásico ni en el modelo con prototipos. En ambos modelos se crean objetos con las propiedades necesarias, y luego se hereda de ellos. En ninguno de los modelos hay duplicación inútil.


Saludos.

[buzu]

Alvaro, no es que se creen muchos objetos iguales, sino muchas instancias. Por ejemplo, si yo hago un objeto para opacar elementos logrando un efecto tipo fade, se puede crear un objeto y después instanciarlo tantas veces como sea necesario. Todo depende del modelo de programación que uses, por que se puede lograr lo mismo de ambas formas, sin embargo, en deteminado momento querras usar una u otra según el caso, es por eso que digo que no hay una forma que sea mejor que otra ni universalmente mas recomendable que otra ya que todo depende de muchos otros factores.

[AlvaroG]

Entiendo y estoy de acuerdo, pero me parece que la pregunta de aguila_393 era más básica y específica, refiriéndose a la diferencia entre "{}" y "new Object()", que son funcionalmente equivalentes y por tanto creo que usar "{}" es preferible.

[buzu]

En eso te llevas la razon.

[aguila_393]

Iniciado por AlvaroG

Entiendo y estoy de acuerdo, pero me parece que la pregunta de aguila_393 era más básica y específica, refiriéndose a la diferencia entre "{}" y "new Object()", que son funcionalmente equivalentes y por tanto creo que usar "{}" es preferible.

No importa, de los que saben se aprende, y mientras ustedes discuten seriamente yo puedo seguir aprendiendo y ver las cosas de distintos puntos de vista. Asique gracias a los dos y a todos los que me ayudaron .

Simplemente les puedo dar unos aplausos Y gracias por todo nuevamente.

[aguila_393]

Solo una pregunta mas y los dejo tranquilos :P.

No es lo mismo declarar dentro de la funcion que construye el objeto los metodos declarados con el prototipo mas tarde? Algo como esto:

Código Javascript:

net.CargadorContenidos = function () {
this.req = req ;
this.prototype.metodo1 = function () {..}
this.prototype.metodo2 = function () {...}
}
 

[AlvaroG]

Si hacés eso, el programa da error porque "this.prototype" no está definido, y por lo tanto no podés agregarle una propiedad.
Modificándolo como lo hice abajo, un objeto creado via "new net.CargadorContenidos()" no podrá llamar a metodo1 o metodo2

No tengo claro el motivo, pero tiene que ver con que el "this" se refiere al objeto nuevo, no a "n", en el ámbito en el que lo declarás. Por lo que resulta que estás modificando el "prototype" del objeto nuevo, no de n. De pasada, al modificar el prototype de esta forma, hacés que el objeto nuevo no se vincule a n, y que cada objeto creado tenga su propio prototype (aunque con las mismas propiedades) y por lo tanto la herencia se rompa. Ya no podrás aumentar "n" y que el cambio se refleje en todos sus hijos. Tengo que investigar más al respecto.

Si te fijás, el siguiente código da error. He cambiado un poco los nombres para escribirlo un poco más rápido, pero en el resto es igual. Si dejás la llamada a a.metodo1(), el programa falla en ese paso. Si la borras, la salida es

Código:

a tiene req
a tiene prototype
a.prototype tiene metodo1
a.prototype tiene metodo2

Código Javascript:

<div id="coso">
<script>
c = document.getElementById("coso");
 
n = function () {
    this.req = 1;
    this.prototype = {
        metodo1 : function () { alert("metodo1") },
        metodo2 : function () { alert("metodo2"); },
    }
}
 
a = new n()
for (i in a) {
    c.innerHTML += "a tiene " + i + "<br/>";
}
 
//alert("llamando a.metodo1 y a.metodo2");
//a.metodo1();
//a.metodo2();
 
for (i in a.prototype) {
    c.innerHTML += "a.prototype tiene " + i+ "<br/>";
}
 
 
for (i in n) {
    c.innerHTML += "n tiene " + i + "<br/>";
}
 
</script>
 

En cambio, si dejás la modificación a "n" en una declaración diferente:

Código Javascript:

n = function () {
    this.req = 1;
}
 
n.prototype = {
        metodo1 : function () { alert("metodo1") },
        metodo2 : function () { alert("metodo2"); },
}
 

la salida es

Código:

a tiene req
a tiene metodo1
a tiene metodo2

[aguila_393]

Gracias, creo que eso seria todo por ahora. Cuando me surga algo mas les vuelvo a pedir ayuda.