La programación orientada a objetos (POO) representa una nueva manera de pensar a la hora de hacer un programa. Javascript no es un lenguaje de programación orientado a objetos puro porque, aunque utiliza objetos en muchas ocasiones, no necesitamos programar todos nuestros programas en base a ellos. De hecho, lo que vamos a hacer generalmente con Javascript es usar objetos y no tanto programar orientado a objetos. Por ello, la manera de programar no va a cambiar mucho con respecto a lo que hemos visto hasta ahora.
En resumen, lo que hemos visto hasta aquí relativo a sintaxis, funciones, etc. sigue siendo perfectamente válido y puede ser utilizado igual que se ha indicado. Solo vamos a aprender una especie de estructura nueva como son los objetos.
Aunque no vamos a entrar en detalle con los concetos, pues se encuentran muy bien explicados en referencias que ya hemos indicado, los objetos son una herramienta de lenguajes de programación en la que se unen dos cosas fundamentales: los datos y la funcionalidad. Todo programa informático trata básicamente esas dos cosas de alguna manera. Con lo que hemos visto hasta ahora los datos los teníamos en variables y la funcionalidad en funciones ¿no es así? pues en el mundo de los objetos, tanto datos como funcionalidad están en la misma estructura, el objeto.
El asunto es que ahora necesitas aprender nuevos nombres con los que referirte a los datos y funcionalidad agrupados en un objeto:
Imagina que tienes un objeto botón (un botón del navegador, algo que puedes pulsar para realizar una acción). El botón tiene un texto escrito, pues ese texto sería un dato y por lo tanto le llamaríamos propiedad. Otra propiedad de un botón sería si está o no activado. Por otra parte, un botón podría tener funcionalidad asociada, que estaría en un método, como procesar la acción de un clic. Imagina algo más genérico como un teléfono. El teléfono puede tener propiedades como la marca, modelo, sistema operativo y métodos como encender, apagar, llamar a un número, etc.
En lenguajes de programación orientados a objetos puros, como puede ser Java, tienes que programar siempre en base a objetos. Para programar tendrías que crear "clases", que son una especie de "moldes" a partir de los cuales se crean objetos. El programa resolvería cualquier necesidad mediante la creación de objetos en base a esos moldes (clases), existiendo varios (decenas, cientos o miles) de objetos de diversas clases. Los objetos tendrían que colaborar entre si para resolver cualquier tipo de acción, igual que en sistemas como un avión existen diversos objetos (el motor, hélices, mandos...) que colaboran entre sí para resolver la necesidad de llevar pasajeros o mercancía en viajes aéreos.
Sin embargo, como veníamos diciendo, en Javascript no es tanto programar orientado a objetos, sino usar objetos. Muchas veces serán objetos ya creados por el propio navegador (la ventana del navegador, un documento HTML que se está visualizando, una imagen o un formulario dentro de ese documento HTML, etc), y otras veces serán objetos creados por ti mismo o por otros desarrolladores que te sirven para hacer cosas específicas. Por tanto, lo que nos interesa saber para comenzar es la sintaxis que necesitas para usar los objetos, básicamente acceder a sus propiedades y ejecutar sus métodos.
En Javascript podemos acceder a las propiedades y métodos de objetos de forma similar a como se hace en otros lenguajes de programación, con el operador punto ..
Las propiedades se acceden colocando el nombre del objeto seguido de un punto y el nombre de la propiedad que se desea acceder. De esta manera:
<script> miObjeto.miPropiedad </script>Para llamar a los métodos utilizamos una sintaxis similar, pero poniendo al final entre paréntesis los parámetros que pasamos a los métodos. Del siguiente modo:
<script> miObjeto.miMetodo(parametro1,parametro2) </script>Si el método no recibe parámetros colocamos los paréntesis también, pero sin nada dentro.
<script> miObjeto.miMetodo() </script>
Como hemos dicho, la mayoría de los objetos con los que vas a trabajar en Javascript para poder crear interacción, efectos y comportamientos diversos en páginas web, te los dan ya hechos. El propio navegador te los ofrece para que tú simplemente los tengas que usar.
Aclarado ese punto hay que advertir que Javascript es un tanto particular a la hora de crear objetos, básicamente porque tradicionalmente no existe el conceto de "clase".
La otra alternativa para crear objetos en Javascript es por medio de literales de objeto, que no son más que la definición del objeto por medio de código encerrado entre llaves, indicando sus propiedades o métodos tal cual.
Codigo
<script>
{
nombre: 'Dra Angelica Alvarez Gomez',
sitioWeb: 'google.com'
}
</script>
En Javascript tradicional hemos dicho que no existen las clases, pero podremos crear instancias de objetos a partir de funciones, como veremos en el siguiente punto.
Instanciar un objeto es la acción de crear un ejemplar de una clase, para poder trabajar con él luego. La clase es la definición de las características y funcionalidades de un objeto. Con las clases no se trabaja directamente, éstas sólo son definiciones. Para trabajar con una clase debemos tener un objeto instanciado de esa clase. Recordamos que en Javascript no existen clases, pero podemos usar funciones.
Esta simple función podríamos usarla como molde para construir objetos tambien llamado Constructor de la clase Persona:
Constructor
<script>
function Persona(parametro_nombre)
{
this.nombre = parametro_nombre;
}
</script>
Observarás que estamos usando dentro la palabra this. Esa palabra es una referencia al objeto que se va a crear con esta función. En javascript para crear un objeto a partir de una función se utiliza la instrucción new, de esta manera.
Creacion del objeto
<script>
var alumno = new Persona('Andrea Angel Sanchez');
</script>
En una variable que llamamos alumno asigno un nuevo (new) ejemplar de la clase Persona. Los paréntesis se rellenan con los datos que necesite la clase para inicializar el objeto, si no hay que meter ningún parámetro los paréntesis se colocan vacíos. En realidad lo que se hace cuando se crea un objeto es llamar a la función que lo construye y la propia función se encargará de inicializar las propiedades del objeto (para lo que usa la referencia this).
Ciertamente, si los conceptos de programación orientada a objetos son nuevos para ti, quizás muchos puntos de este artículo se quedarán un poco complejos y extraños.
Constructor + Objeto
<script>
// Define un constructor de objetos llamado Persona
// que recibe un parámetro para el nombre de la persona
function Persona(parametro_nombre)
{
// Asigna el valor del parámetro a la propiedad nombre del objeto
this.nombre = parametro_nombre;
}
// Crea un nuevo objeto llamado alumno utilizando el constructor Persona
// y pasa el nombre 'Andrea Angel Sanchez' como argumento
var alumno = new Persona('Andrea Angel Sanchez');
// Accede al objeto y su atributo nombre y lo imprime en la consola
console.log(alumno.nombre); // Salida: Andrea Angel Sanchez
</script>
Consideraciones:
Crea un documento HTML y su codigo JavaScript asociado que permitan:
input de texto.constructor de objetos cuando se hace clic en un botón.Requisitos:
Procura no copiar directamente la respuesta desde una IA