JavaScript y OOP (Object Oriented Programming) II

El constructor del objeto y prototyping

En el mundo de OOP las formas anteriores de definir un objeto en muchas situaciones son muy limitadas. Necesitamos crear un tipo “type” objeto que pueda ser utilizado multiples veces sin tener que redefinir todo el objeto a la hora de cambiar un valor o un parámetro. La manera standard de lograr ésto es con una función constructora.

El constructor de un objeto no es más que una función regular de JavaScript, es igual de robusta (recibe, define, inicializa parámetros, llama otras funciones, etc .). La diferencia entre ambas es que la función constructor es llamada a través del operador “new“.

Vamos a usar un objeto del mundo real (perro) como ejemplo. Una propiedad de un gato puede ser su nombre o su color. Un método puede ser “woof”. Lo importante aquí o lo que tenemos que tener en cuenta es que cada gato puede tener un nombre diferente o un color diferente, incluso “woof” distinto a los otros gatos. Para crear un objeto que nos resuelva esta necesidad y nos dé la flexibilidad que necesitamos, usaremos un Constructor.

<script  language="javascript" type="text/javascript">
  <!--
  function perro(nombre) {
    this.nombre = nombre;
    this.ladrar  = function() {
       alert(  this.nombre + " dice woof!" );
    }
  }

  perro1 = new perro("scooby");
  perro1.ladrar();
  //alerts  "scooby dice woof!"

  perro2 =  new perro("droopy");
  perro2.ladrar();
  //alerts  "droopy dice woof!"

  //-->
</script>

La función “perro” es el constructor del objeto y sus propiedades y métodos se encuentran declarados dentro de la función, precedidas con la palabra “this”. Los objetos que son definidos usando un constructor luego serán instanciados usando el operador “new”. Ahora somos capaces de definir fácilmente múltiples instancias de “perro”, cada una con su propio nombre, la flexibilidad que te brindan los constructores te permite personalizar los objetos creados.

Usando prototype con objetos pre-construidos o pre-definidos en JavaScript

Prototype funciona en ambos casos, con objetos creados por uno mismo u objetos pre-construidos como Date() o String(). La regla es que tu puedes usar prototype con cualquier objeto pre-construido que ha sido inicializado con el método “new”. En el siguiente ejemplo voy a agregar funcionalidades adicionales a un objeto pre-definido de JavaScript.

Como IE5 no soporta los métodos shift() y unshift() para el manejo de Arrays y NS4+ si, vamos a construirlos con prototype :-).

<script language="javascript" type="text/javascript">
<!--
// Metodos shift() y unshift().
  if(!Array.prototype.shift) {
    // Si este metodo no existe..
    Array.prototype.shift = function(){
      firstElement = this[0];
      this.reverse();
      this.length = Math.max(this.length-1,0);
      this.reverse();
      return firstElement;
    }
  }
  if(!Array.prototype.unshift) {
    // Si este metodo no existe..
    Array.prototype.unshift = function(){
      this.reverse();
      for(var i=arguments.length-1;i>=0;i--){
        this[this.length]=arguments[i];
      }
      this.reverse();
      return this.length;
    }
  }
//-->
</script>

Deja un comentario