En Javascript, como en cualquier lenguaje, un objeto
no es más que un conjunto de atributos y funciones (sus métodos). A cada objeto
podemos añadirle nuevas propiedades y funciones de diferentes maneras que
iremos viendo. Sin embargo la herencia, tal y como la conocemos de otros
lenguajes como Java, no existe, pues no existen las clases: para crear un nuevo
objeto que tenga los mismos atributos que otro, estos deben ser copiados. A
esta forma de trabajar se llama herencia basada en prototipos. Esto significa
que no hay clases o interfaces como en Java o C++: solo hay objetos que copian
(heredan) sus propiedades de otros objetos, llamados prototipos. Así que
olvidémonos de la clásica definición de “objeto como instancia de una clase”,
porque aquí no hay clases (y por esta razón, cuando hable de clases en
Javascript, lo haré entre comillas así: “clases”). Pero vayamos por partes:
Creando objetos
Pare crear un nuevo objeto
podemos hacerlo de cualquiera de estas dos formas:
|
|
|
|
|
La segunda
forma se llama “objeto literal”. Es la que usamos para crear lo que en otros
lenguajes se llaman diccionarios, mapas o hashtables y que sigue,
afortunadamente, la misma sintaxis que JSON.
Para añadir
una nueva propiedad, solo tenemos que asignársela:
|
|
|
|
|
|
|
|
|
|
Para eliminar
una propiedad, usaremos el operador delete:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Y para añadir
un método, solo hay que añadirle una función como expresión, teniendo siempre
en cuenta que para que un método pueda acceder a las propiedades del objeto
donde reside, tenemos que usar el prefijo this.
|
|
|
|
|
|
|
|
|
|
Aquí vemos
como es necesario usar this.nombre dentro de la función saluda() para acceder
al atributo nombre del objeto.
Otra forma de
construir objetos es como literales:
|
|
|
|
|
|
|
|
|
|
En Javascript
podemos acceder a las propiedades de un objeto usando la notación
objeto.propiedad; o de manera indexada como un array, con objeto[prop]. En este
segundo caso, prop es una variable de tipo String cuyo contenido es el nombre
de la propiedad a acceder. Ejemplo:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Podemos usar
esta segunda forma de acceder a las propiedades de un objeto para listarlas
todas, sin importar cuantas tenga ni su nombre:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Prototipos
Pero claro,
con esto solo definimos un único objeto, con sus atributos y métodos. Pero,
¿qué pasa si queremos crear una “clase” de la que poder instanciar objetos?
Como hemos dicho antes, en Javascript no hay clases, sino prototipos: objetos
de los que se copian otros objetos. Así que lo que haremos es crear un objeto
del que poder copiar sus propiedades. Para esto Javascript tiene un gran truco:
hace que cualquier función pueda ser instanciada como un nuevo objeto usando la
palabra clave “new”.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
A simple vista
no es más que una función, ¡y es verdad que lo es! pues podemos llamar a
Saludator() como una función de toda la vida. Pero eso no quita que sea también
una factoría y que con ella podamos crear nuevos objetos:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Pero claro,
con este ejemplo tan sumamente sencillo no se aprecia que hemos creado un nuevo
objeto. Así que vamos a añadirle un par de propiedades y métodos (recordemos
que solo tenemos que declararlas con el prefijo this).
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
En este ejemplo ya vemos cosas
nuevas:
– Que la función Saludator() es el constructor del objeto, y podemos pasarle
parámetros que posteriormente podemos usar en los atributos del objeto.
– Que dentro de la función saluda sigue siendo necesario usar this.nombre para
acceder al atributo nombre.
Por cierto, podemos crear
nuestros prototipos usando funciones como expresiones, y no como declaraciones.
El siguiente código es completamente equivalente al anterior:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Es necesario
señalar que las funciones que servirán para crear objetos se suelen nombrar con
la primera letra en mayúscula. Esto es así para evitar que se confundan con
funciones normales o variables.
Métodos privados
Podemos crear
métodos “privados” (es decir, métodos que son solo accesibles desde dentro del
objeto, nunca desde fuera), creando funciones como declaración, no como
expresión. La principal desventaja es que estos tipos de métodos no tienen
ligado el “this” con el objeto actual, por lo que no pueden acceder a sus datos
internos. Para evitar esto, tenemos que enviar como parámetros los datos del
objeto que necesiten. Además, no podemos usar el prefijo this para llamar a
estos métodos:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
La llamada al
método plural() no es accesible desde fuera, por lo que fallaría (por eso está
comentada). Observemos también como la llamada a plural() no se hace con
this.plural(). Y que para acceder al atributo nombre hemos tenido que pasárselo
como parámetro.
Los métodos
privados no son dinámicos, en el sentido que no se pueden definir
condicionalmente en tiempo de ejecución. Así que el siguiente código no
fallará, pero no funcionará correctamente (de hecho, su funcionamiento
dependerá del navegador):
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
En su lugar,
definiendo los métodos con funciones como expresiones, si que funciona
correctamente, ya que la creación del método no es más que una asignación que
se produce dentro de una bifurcación condicional:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Métodos y atributos estáticos
Para crear un
método estático tan solo lo tenemos que asignar a nuestra “clase” una propiedad
más (recordemos que no es más que una función):
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Por supuesto,
podemos añadir también atributos estáticos. Todas las propiedades estáticas
(atributos o métodos) son siempre públicas y necesitan SIEMPRE el prefijo con
el nombre de la “clase” delante siempre para acceder a ellas.
En este
ejemplo, se usa la propiedad estática count de la clase Saludator para llevar
la cuenta del número de objetos que se han creado:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
DEMOSTRACIÓN
En el espacio de nombre del proyecto creado en los artículos anteriores damos click derecho y seleccionamos
Add à New Items
En la siguiente ventana seleccionamos la Opción “Pagina HTML” y colocamos
como nombre del archivo “Objetos.html”, para luego presionar el botón Add.
Escribimos el siguiente Script:
Ejecutamos una
vez más