Objetos en javascript

Los objetos en JavaScript son un tema que siempre me han traído problemas. En este post voy a tratar de ordenar un par de ideas.

Primero que nada podemos definir 3 tipos de objetos (¡no clases!):
– Objetos estándar del navegador: Varían según el navegador. Entre los comunes están Window, document. Mozilla provee XMLHttpRequest, MSIE los propios de ActiveX.
– Objetos del lenguaje: Los objetos de la implementación, como String, Array, Date, etc.
– Objetos propios: Estos son los objetos definidos por nosotros o por una biblioteca en particular.

Los objetos se pueden crear como funciones:

//Definición del objeto, si se quiere la "clase"
function MiObjeto (valor){
  this.unMetodo = function () {
    alert(this.unAtributo);
  }
  this.unAtributo = valor;
}

//instanciando el objeto
var oObjeto = new MiObjeto('hola, mundo!');
var oOtroObjeto = new MiObjeto();
oObjeto.unMetodo();

Con eso tenemos dos objetos en las variable oObjeto y oOtroObjeto construidos según la función MiObjeto(). A su vez tenemos unAtributo que tiene el valor que le pasamos al constructor y unMetodo que imprime el atributo. No es muy útil, pero sirve para mostrar lo básico.

El concepto de clase es un poco ambiguo en JavaScript. Al menos para el que viene de un lenguaje un poco más “prolijo” como Java o C++. En nuestro pequeño ejemplo, la clase sería MiObjeto y la instancia sería oObjeto. JavaScript nos permite extender nuestro objeto. Esto es tan simple como la línea que sigue.

oObjeto.otroMetodo = function ()
{
  confirm('Me entiende?');
}

oObjeto tiene un método nuevo: otroMetodo que nos va a preguntar si lo entendimos. Si invocamos otroMetodo desde oOtroObjeto vamos a comprobar que no nos pregunta nada. Esto se debe a que en la línea de más arriba solo modificamos la instancia oObjeto. Esto es muy interesante y es una fuente de errores. JavaScript nos permite modificar nuestro objeto en “caliente”. Podemos agregar o redefinir métodos existentes y agregar atributos.

¿Pero podemos cambiar nuestras “clase” MiObjeto? Sí, esto se hace mediante el atributo prototype de MiObjeto. La clase se define mediante una función. Las funciones son objetos de tipo Function (sí, suena a traba-lenguas). Podemos agregar atributos y métodos a nuestro objeto Function mediante el atributo protoype:

MiObjeto.prototype.otroMetodo = function ()
{
  confirm('Ahora me lees?');
}

Si probamos invocar ahora oOtroObeto.otroMetodo() vamos a a ver el confirm preguntando si ahora lo lees. Dejo al lector curioso que verifique qué pasa con oObjeto.otroMetodo().

Lo bueno de esto es que nos permite crear clases y objetos, extenderlos o redefinir su comportamiento. En algunos navegadores, como en Firefox, es posible redefinir y extender los objetos estándar. Algunos sin embargo están “sellados” por motivos de seguridad.

Para cerrar voy a hablar de JSON. Yo trabajaba en avatar y un día me pidieron hacer una aplicación que hacía uso intensivo de JavaScript y DOM. Un compañero me recomendó utilizar JSON. JSON es un acrónimo para JavaScript Object Notation y es una manera de definir objetos y funciones en JavaScript así como también un formato liviano de intercambio de datos, como se define en su sitio. Es muy útil como sustituto de XML en algunos casos. En algunas aplicaciones AJAX podemos recibir cadenas JSON en lugar de XML y evitar tener que lidiar con DOM. El framework The Dojo Toolkit es un ejemplo de esto. Pero esto será objeto de otro post, más adelante.

Saludos!

Etiquetas: , , ,

2 comentarios to “Objetos en javascript”

  1. Frank Alberto Says:

    Tengo una pregunta. Como puedo usar el metodo anterior al que estoy redefiniendo en el momento en que lo redefino.
    Ejemplo en java:
    @override
    public int metodo(){
    int a = super.metodo();
    return a +10;
    }
    necesaito hacer algo parecido en javascript

    • Miguel Says:

      Pregunta rara (y vieja, disculpá, Frank! Espero que lo hayás resuelto!)

      Bueno, la idea es guardar la función original en una variable, y después llamarla desde la que está redefiniendo.

      var metodo_original = window.metodo
      
      function metdo() {
        return metodo_original() + a
      }
      

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s


A %d blogueros les gusta esto: