Esta página utiliza 'XHTML 1.0 Transitional' válido Esta página utiliza CSS válido
Búsqueda personalizada

Programación orientada a objetos en Javascript (I)

Javascript no es un lenguaje de Programación Orientada a Objetos propiamente dicho como Java, pero sí es un lenguaje de programación basado en objetos.

Con Javascript no necesitamos programar creando objetos. Sin embargo, y sobre todo cuando tenemos muchas líneas de código, programar utilizando objetos ayuda a reutilizar el código más a menudo y de forma más clara y fácil.

En Javascript hay tres tipos de objetos:

  • Objetos nativos de Javascript. Son los que proporciona el propio Javascript. Por ejemplo: Math, Date, Image, Number, String, Array...
  • Objetos de navegador. Son aquellos que proporciona el navegador del cliente. Por ejemplo: window, document, forms...
  • Objetos definidos por el usuario: Son aquellos que define el propio programador.

¿Y cómo se crea un objeto?

Para crear un objeto necesitamos una funcion "constructor". Una función constructor es igual que cualquier otra función de JavaScript sólo que se invoca utilizando la palabra clave new.

function miClase() {
  //Aquí va el código de la clase "constructor"...
}
var miObjeto = new miClase(); //Aquí ya hemos creado nuestro primer objeto

Sin embargo, nuestro anterior objeto tiene muy poca utilidad. En realidad un objeto no es más que un conjunto de propiedades y métodos y este que acabamos de crear no tiene ninguna de las dos cosas.

Para empezar a darle alguna utilidad a nuestra primera clase deberíamos aprender primero a crear propiedades de objeto. Para crear propiedades que después contendrán todos los objetos de la misma clase se utiliza la palabra clave this dentro de la función constructor. Utilizamos la palabra clave this dentro del constructor para referimos al objeto que está siendo creado.

function miClase() {
  this.miPrimeraPropiedad = "Mi primera propiedad";
}
var miObjeto = new miClase(); //Creamos el objeto de la clase "miClase"
alert(miObjeto.miPrimeraPropiedad); //Este alert muestra el texto "Mi primera propiedad"

Nuestro nuevo constructor también puede recibir parámetros, al igual que en otros lenguajes de programación orientados a objetos, y que utilizaremos generalmente para inicializar el estado del objeto.

function miClase(miAtributo) {
  this.miPrimeraPropiedad = miAtributo;
}
var miObjeto = new miClase("Mi primer atributo"); //Creamos un objeto de la clase "miClase"
var miObjeto2 = new miClase("Mi segundo atributo"); //Creamos otro objeto de la clase "miClase"
alert(miObjeto.miPrimeraPropiedad); //Este alert muestra el texto "Mi primer atributo"
alert(miObjeto2.miPrimeraPropiedad); //Este alert muestra el texto "Mi segundo atributo"

Ahora que ya sabemos crear propiedades, deberíamos aprender a crear los métodos. Para crear un método de objeto se aprovecha una funcionalidad de Javascript que consiste en que se permite asignar funciones a variables. También utilizaremos por tanto la palabra clave this y defineremos los métodos (o funciones) dentro de la misma función constructor.

function miClase(miAtributo) {
  function miPrimerMetodo() {
    return "Mi primer método";
  }
  this.miPrimerMetodo = miPrimerMetodo();
  this.miPrimeraPropiedad = miAtributo;
}
var miObjeto = new miClase("Mi primer atributo"); //Creamos el objeto de la clase "miClase"
alert(miObjeto.miPrimeraPropiedad); //Este alert muestra el texto "Mi primer atributo"
alert(miObjeto.miPrimerMetodo()); //Este alert muestra el texto "Mi primer método"

Existe otra forma menos común para crear funciones pero que probablemente es mucho más adecuada para la creación de métodos de objeto (después veremos por qué).

function miClase(miAtributo) {
  this.miPrimerMetodo = function (miParametro) {
    return "Mi parámetro es: " + miParametro;
  }
  this.miPrimeraPropiedad = miAtributo;
}
var miObjeto = new miClase("Mi primer atributo"); //Creamos el objeto de la clase "miClase"
alert(miObjeto.miPrimeraPropiedad); //Este alert muestra el texto "Mi primer atributo"
alert(miObjeto.miPrimerMetodo(1)); //Este alert muestra el texto "Mi parámetro es 1"

Como véis, este método abreviado permite utilizar menos líneas de código pero sobre todo evita conflictos entre los nombres de funciones, puesto que en este caso la función queda encapsulada en el constructor del objeto. De esta forma sería posible definir, por ejemplo, dos funciones diferentes pero con el mismo nombre en dos clases diferentes y sin causar conflicto alguno.

Fecha de publicación: 26/09/2007
Etiquetas: javascript , objetos
Prohibida la reproducción total o parcial de los textos o imágenes aquí expuestos salvo autorización expresa y por escrito del autor de los mismos. © 2007-2017 Locualo v1.0. Política de privacidad [www.locualo.net]