Javascript Orientado a Objetos - Conceptos Básicos

Javascript es un lenguaje orientado a objetos y por tanto puede crear objetos. Tiene dos formas de hacerlo: con funciones de constructor o usando notación literal.

Lo siguiente es un objeto usando una función de constructor:

function persona(){ };

Lo mismo usando notación literal:

var persona = { };

La notación literal se prefiere para crear espacios de nombres, haciendo que el código no interfiera con otros scripts existentes en la página, y sobre todo cuando el objeto no va a requerir más de una instancia. Por otro lado las funciones de constructor son mejores si se necesita varias instancias de un objeto o si se necesita hacer alguna operación inicial en la creación del objeto.

Propiedades y métodos

Los objetos pueden definir propiedades y métodos. Las propiedades son variables creadas dentro de un objeto y los métodos son funciones creadas dentro de un objeto. Veamos como se definen:

Constructor

function persona(){
  this.nombre = 'Jose';
  this.saludo = function(){
    alert("Hola me llamo " + this.nombre);
  };
};

Literal

var persona = {
   nombre: 'Jose',
   saludo: function(){
     alert("Hola me llamo " + this.nombre);
   }
};

En los dos objetos se ha creado una propiedad "nombre" y un método "saludo". A parte de que ambos se declaran de forma distinta, también se llaman de forma distinta. En el objeto creado con notación literal basta simplemente con:

persona.saludo();

Sin embargo con los constructores se necesita primero instanciar el objeto:

var persona1 = new persona();
persona1.saludo();

Fíjate que en el uso de funciones de constructor utilizamos "this" para declarar las propiedades y los métodos y separamos unos de otros con punto y coma, mientras que en la notación literal no utilizamos "this" y la separación es con una coma.

Inicializando objetos

Los constructores son funciones Javascript, y como todas las funciones pueden recibir argumentos. De esta forma podemos inicializar nuestros objeto al ser instanciado:

function persona(nombre){
  this.nombre = nombre;
  this.saludo = function(){
    alert("Hola, me llamo " + this.nombre);
  };
};

Ahora podemos instanciar el objeto inicializando su propiedad:

var persona2 = new persona('Jose');
persona2.saludo();

Diferencia ente Constructores y Literales.

En los dos tipos de objetos podemos acceder y modificar sus propiedades, sin embargo, la diferencia es que en los objetos literales una modificación afecta a ese objeto en cualquier parte del script mientras que los objetos con constructor son instanciados y cuando se modifican sólo afecta a la instancia modificada. Vamos a verlo en un ejemplo:

var persona = {
  nombre: ""
}

var persona1 = persona;
var persona2 = persona;

Primero creamos un objeto "persona" que tiene una propiedad llamada "nombre". Luego creamos dos "personas" usando el objeto "persona".

persona1.propiedad = "Jose";

Esto modifica la propiedad "nombre" del objeto persona1.

persona2.nombre = "Juan";

Al igual que en el código anterior hemos modificado la propiedad "nombre" del objeto persona2.

Sin embargo, como podemos ver a continuación, "persona1.nombre" y "persona2.nombre" devuelven el mismo valor:

Esto ocurre porque en realidad "persona1" y "persona2" hacen referencia al mismo objeto ("persona"). Cualquiera de los cambios que se haga sobre una de estas referencias afectará a todas las referencias al objeto "persona". Usando constructores esto no pasa, ya que el objeto es instanciado y cada instancia mantiene su propio estado:

var persona = function(){
  this.nombre = "";
};

var persona1 = new persona();
var persona2 = new persona();

Asignamos el valor "Jose" a la propiedad "nombre" de "persona1":

persona1.nombre = "Jose";

Y el valor "Juan" a la propiedad de "persona2":

persona2.nombre = "Juan";

Y podemos comprobar que "persona1" y "persona2" son diferentes instancias que mantienen su propio estado:

Por tanto, cuando solo necesitamos un objeto de su tipo en nuestro script podemos usar un objeto literal, pero si necesitamos varías instancias, cada una independiente del resto usaremos constructores.

Ejemplo de uso

Vamos a ver un ejemplo muy muy sencillo donde podemos aplicar los dos tipos de objetos. Vamos a crear una lista de asistentes a una conferencia. Los asistentes son válidos únicamente cuando sean mayores de edad. Vamos a utilizar la notación literal para definir los requisitos de asistencia. En este caso 18 años:

var Requisitos = {
  edadMinima: 18
}

De esta forma, da igual si en cualquier otro script de la página usamos la variable "edadMinima". Nosotros la hemos definido en el espacio de nombres "Requisitos".

Ahora creamos un objeto que definirá a una persona y un método que indique si puede asistir a la conferencia.

var Persona = function(nombre, edad){
  this.nombre = nombre;
  this.edad = edad;

  this.puedeAsistir = function(){
    if (this.edad >= Requisitos.edadMinima){
      alert(nombre + " puede asistir");
    }else{
      alert(nombre + " no puede asistir");
    }
  };
}

Vamos a crear ahora 3 instancias, una para cada persona que desea asistir:

var persona1 = new Persona("Jose", 25);
var persona2 = new Persona("Juan", 20);
var persona3 = new Persona("Luis", 16);

Requisitos.edadMinima = 21;