JavaScript orientado a objetos: 1. Introducción

Primera entrada de una serie dedicada a JavaScript orientado a objetos.

waterhouse

archivado en: JavaScript / 17 junio, 2013 / taller:

Como es sabido, con el lanzamiento de HTML5, JavaScript ha cobrado un nuevo impulso. Hasta ahora, en la práctica solo lo usábamos para añadir pequeñas funcionalidades a una web, como controlar un formulario, alguna animación, algo de AJAX o mostrar algún contenido dinámicamente, pero sin duda se ha convertido en un lenguaje imprescindible a la que una web sea un poco sofisticada.

Además, gracias en parte a la facilidad de aprendizaje y uso de jQuery, también es muy útil para preparar aplicaciones, ya sea para web o para móviles, frente a otros lenguajes más complejos como Java. Por no hablar del potencial de Node.js, que es una especie de servidor que corre en JavaScript del lado del cliente. En fin, que ha llegado el momento de tomarse en serio este lenguaje que es realmente útil y divertido.

Entre otras cuestiones, esto nos lleva a la necesidad de programarlo de forma más ordenada, ya que no es lo mismo preparar un script de una decena de líneas que toda una aplicación que puede sobrepasar con creces el millar. Y si necesitamos que nuestro código esté bien ordenadico, nada mejor que ver cómo podemos adaptar JavaScript, que es un lenguaje prototipado, por lo general desarrollado mediante funciones colgadas a pelo, a la programación orientada a objetos. Bueno... estoy mintiendo.

En realidad, creo que es un error tratar de programar en JavaScript tal cual lo haríamos con un lenguaje orientado a objetos. No es necesario y nos estaríamos perdiendo todo el potencial de este lenguaje prototipado, que en parte se encuentra en su gran flexibilidad. Dicho de otra forma, no hay que adaptar los lenguajes a la manera en que estamos acostumbrados a programar, sino justo al revés, adaptarnos nosotros a sus características. Sin embargo, estableciendo una analogía entre clases y objetos, entre herencias y prototipos podemos aprender otra manera de desarrollar en JavaScript mucho más potente que mediante el mero listado de funciones una detrás de otra.

Termino esta introducción con dos advertencias. Primera, JavaScript es un lenguaje tremendamente versátil. Hay muchísimas formas de hacer las cosas y todas pueden ser igual de válidas según el contexto, por lo que a veces puede resultar un tanto desesperante para quien gusta de los lenguajes más cuadriculados. En cambio,  para los phperos y demás artistas del caos-script, esta flexibilidad será muy estimulante.

Y segunda advertencia. Aunque como es habitual en este blog trataré de mantener un tono lo más sencillo posible e iré recordando los conceptos claves de la programación orientada a objetos —como el encapsulamiento o la herencia—, es imprescindible tener unas nociones mínimas de JavaScript para seguirlo. Si no sabemos siquiera qué es una función o una variable, será imposible entender nada. Lo siento, pero no veo la manera de abordar este tema de forma más sencilla. Bueno, pues al lío ^^.

Funciones y objetos

Antes de entrar en faena, recordemos que en JavaScript todo es un objeto... o casi todo. Y para entender qué es un objeto podemos establecer una analogía con una persona. Los seres humanos tenemos una serie de características, como el color del pelo o de los ojos, y realizamos una serie de acciones, como comer, dormir o matarnos los unos a los otros por trapos de colores que denominamos banderas. En programación orientada a objetos, las características se llaman propiedades y equivalen a las variables, y las acciones se llaman métodos y equivalen a las funciones.

objeto Persona() {

var colorPelo = "pelirrojo";

var colorOjos = "verdes";

método comer() {

zamparse todo;

return "unos kilitos de más"

}

}

Luego, para usar un objeto persona en nuestro código tendríamos o bien que sacar una instancia, una copia de ese objeto, o emplear la notación de puntos característica de JavaScript.

unaInstancia = new Persona();

unaInstancia.comer();

//o

Persona.comer()

Bueno, esto quedará más claro dentro de un par de entradas...

Todo es un objeto

En esencia, en JavaScript hay dos tipos de cosas:

  1. valores primitivos, que son variables del tipo string (cadena), number (número), boolean (booleanas), undefined (sin definir) o null (nulas); que equivaldrían a las variables primitivas de Java.
  2. objetos, que son colecciones de pares clave-valor.

Dicho de otra forma: lo que no es una variable, es un objeto. Por eso se dice que en JavaScript todo es un objeto, incluidas las funciones, que no son sino una especie de prototipos del objeto global function.

Hay varios objetos globales (nativos)—como el objeto Array, el Date o el RegExp para las expresiones regulares—, que son los que forman el esqueleto de JavaScript. Así, por ejemplo, cuando declaramos un array, en realidad lo que estamos haciendo es declarar una instancia del objeto Array. Es decir, esto:

miArray = ["valor1", "valor2", "valor3"];

no es más que una forma abreviada de instanciar el objeto global Array:

miArray = new Array;

Además, podemos definir nuestros propios objetos. La forma más intuitiva de hacerlo es declarando una función dentro de una variable.

var miObjeto = function sumar(a, b) {

return a+b;

}

resultado = miObjeto(3, 4); // Esto da 7;

Dentro de este «objeto» podemos indicar variables...

var miiObjeto= function sumar(a, b) {

var miVariable = 10;

return a+b+miVariable;

}

resultado = miObjeto(3, 4); // Esto da 17;

Otra forma que veremos más adelante en detalle de declarar variables en un objeto es precediéndolas por el operador this, que las convierte en propias del objeto.

var miiObjeto = function sumar(a, b) {

this.miVariable = 10;

return a+b+miVariable;

}

resultado = miObjeto(3, 4); // Esto da 17;

miObjeto = new miObjeto(3, 4);

resultado = miObjeto.miVariable; // Esto da 10;

De esta misma manera podemos crear métodos que solo son accesibles una vez instanciado el objeto con el operador new:

var miObjeto = function(a, b) {

this.miDevuelveSuma = function devuelveSuma() {

var miVariable = 10;

return a+b+miVariable;

}

}

miInstancia = new miObjeto(3, 4);

resultado = miInstancia.miDevuelveSuma(); // Esto da 17;

Notación literal

Otra manera de definir objetos en JavaScript es mediante la denominada notación literal, que consiste en declarar propiedades y métodos utilizando la notación JSON, esto es, separando los elementos por comas dentro de un par de llaves.

var miOtroObjeto = {

numeroUno: 5,

numeroDos: 10,

unMetodo: function() {

return this.numeroUno + this.numeroDos;

}

}

console.log(miOtroPrototipo.unMetodo()); // Esto da 20;

La diferencia de esta manera respecto la anterior es que no podemos declarar valores particulares para las propiedades de cada instancia, sino que modificamos directamente las del objeto original. Esto queda claro con un ejemplo. En el primer caso, los valores de las propiedades son de cada instancia:

var miObjeto = function sumar() {

this.miVariable = 20;

this.miDevuelveSuma = function devuelveSuma(a, b) {

return a+b+this.miVariable;

}

}

miInstancia = new miObjeto();

miInstancia.miVariable = 10;

resultado = miInstancia.miDevuelveSuma(3, 4); // Esto da 17;

miOtraInstancia = new miObjeto();

resultado = miOtraInstancia.miDevuelveSuma(3, 4); // Esto da 27, el valor original;

Sin embargo, de la segunda manera atacamos directamente las propiedades originales.

var miOtroObjeto = {

numeroUno: 5,

numeroDos: 10,

unMetodo: function() {

return this.numeroUno + this.numeroDos;

}

}

miOtroObjeto.numeroUno=10;

console.log(miOtroObjeto.unMetodo()); // Esto da 20;

console.log(miOtroObjeto.numeroUno); // Esto es 10;

Hay otras maneras que veremos más adelante, cuando conozcamos mejor cómo funciona la propiedad proto. De momento vamos a dejarlo aquí.

|| Tags: ,

valoración de los lectores sobre JavaScript orientado a objetos: 1. Introducción

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración negativa
  • 4.3 sobre 5 (11 votos)

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

2 respuestas a “JavaScript orientado a objetos: 1. Introducción

  1. Para mi que vengo de java es complicado entender que declares una variable var cosa y puedas hacer uso de ella como si de un método se tratara, cosa(). Supongo que habrá más cosas como estas o peores que hacen dificil entender a veces un codigo javascript, pero habrá que acostumbrarse jeje.

  2. Jajajjajaa, sep, es uno de los primeros síntomas de un javero javasceipteando, pero ya verás como al final te mola más ^^

Aportar un comentario


*