Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de Javascript

Javascript: lenguaje interactivo para dinamizar la web.

Y ahora tambien aprende a programar en C++ con Aprende Web C++

Manuales para la creación y diseño de páginas web

RSS. Suscribir canal.

Este obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial 4.0 Internacional.

12. Los objetos (IV)

12.4 La propiedad prototype II

La propiedad prototype en objetos predefinidos.

En la página anterior hemos visto como usar la propiedad prototype en objetos definidos por el programador. Ahora veremos cómo usarla en los objetos predefinidos en javascript.

Podemos definir nuevos métodos y propiedades para los arrays, cadenas de texto, números, valores boleanos... Sin embargo el objeto Math no admite la propiedad prototype, ya que su función no es crear nuevos objetos, sino resolver ciertas operaciones matemáticas.

Propiedades

Crear nuevas propiedades para objetos predefinidos en javascript, se hace de la misma manera que para objetos creados por el programador. es decir, mediante la propiedad prototype. por ejemplo:

String.prototype.nombre = "nombre por defecto";

En principio cabría pensar que el código anterior añade una nueva propiedad a cualquier cadena de texto. Sin embargo esta propiedad es de sólo lectura para las cadenas de texto que no estén definidas explicitamente mediante el constructor, es decir, si definimos una cadena de texto de la siguiente manera:

var texto = "Esta es una cadena de texto."

La propiedad no se puede modificar, sin embargo si la definimos mediante el objeto String de la siguiente manera:

var otroTexto = new String("Esta es otra cadena de texto");

Podremos modificar la propiedad:

texto.nombre = "Párrafo primero";
otroTexto.nombre = "Párrafo segundo."

Aquí hemos dado otro valor a la propiedad para las dos cadenas anteriores, sin embargo sólo la segunda tomará el valor nuevo, mientras que la primera seguirá teniendo el valor por defecto. Escribimos el script anterior en una página y lo combrobamos en una ventana de alerta, de la siguiente manera:

String.prototype.nombre = "nombre por defecto";
var texto = "Esta es una cadena de texto.";
var otroTexto = new String("Esta es otra cadena de texto");
texto.nombre = "Párrafo primero";
otroTexto.nombre = "Párrafo segundo."
ventana1 = "objeto1: "+texto+"\n propiedad: "+texto.nombre;
ventana2 = "objeto2: "+otroTexto+"\n propiedad: "+otroTexto.nombre;
alert(ventana1)
alert(ventana2)

El resultado serán dos ventanas de alerta en las que se muestra el objeto y su propiedad, donde se ve que en el segundo caso la propiedad se ha modificado, pero no en el primero. Pulsa en el siguiente párrafo para ver el resultado.

Ver el resultado del Script anterior.

Este comportamiento sucede con las clases String, Number y Boolean, sin embargo con la clase Array el comportamiento es distinto.

Para los arrays la propiedad nueva funciona siempre tanto para lectura, como para escritura, incluso en los arrays que hubiera antes de aplicar la propiedad prototype; Veámoslo con el siguiente script, que por otra parte es similar al anterior, pero con arrays:

var cifras = [0,1,2,3,4,5,6,7,8,9];
Array.prototype.nombre = "valor por defecto";
var estaciones = new Array("primavera","verano","otoño","invierno");
cifras.nombre = "Cifras";
estaciones.nombre = "Estaciones";
var ventana1 = "nombre: "+cifras.nombre+"\n array: "+cifras.join(", ");
var ventana2 = "nombre: "+estaciones.nombre+"\n array: "+estaciones.join(", ");
alert(ventana1);
alert (ventana2);

En este caso la propiedad nombre se muestra modificada en los dos arrays. El resultado puedes verlo pulsando en el siguiente párrafo:

Pulsa aquí para ver el resultado del script anterior.

Métodos

Sin embargo tal vez lo más interesante para una programación útil puedan ser los métodos. Los métodos, funcionan siempre con todos los objetos de las clases anteriores, ya estén declarados explicitamente o no. Sin embargo la forma de trabajar es distinta de los objetos creados por nosotros, ya que los objetos predefinidos son distintos.

Cuando creamos un método pàra un objeto definido por el programador, usamos la referencia a las propiedades del objeto mediante this.propiedad en la función que genera el método. Sin embargo aquí lo que queremos no es acceder a las propiedades del objeto, sino al objeto en sí.

Los objetos creados por el programador son en sí objetos vacíos, el objeto en sí no contiene nada, son sus propiedades y métodos los que hacen que ese objeto tenga unos contenidos. Sin embargo los objetos predefinidos sí que tienen un contenido en sí mismos, y es a ese contenido al que se quiere acceder para modificarlo.

La forma de acceder a ese contenido al construir la función que genera el método es mediante la palabra reservada this, sin añadirle propiedades, y la forma más simple de trabajar con ella es igualar una variable a la palabra this:

cadena = this;

Luego ya podemos trabajar con la variable, como si fuera el propio objeto que queremos modificar.

Veamos un ejemplo. Aquí haremos una función que pone los elementos de un array entre guiones, y los pasa a mayúsculas:

var estaciones = ["primavera","verano","otoño","invierno"]
function guionMayus() {
         var nuevoArray = this;
         for (i in nuevoArray) {
            nuevoArray[i] = "-"+nuevoArray[i]+"-";
            nuevoArray[i] = nuevoArray[i].toUpperCase();
            }
         return nuevoArray
         }
Array.prototype.guionMayus = guionMayus;
alert("array original: \n"+estaciones.join(", "));
alert("array modificado: \n"+estaciones.guionMayus().join(", "));

Al igual que hacemos con los objetos definidos por el programador, primero construimos la función, y después mediante la propiedad prototype se construye el método. La diferencia es que aquí la palabra reservada this se refiere al propio objeto (array en este caso) que queremos modificar, el cual lo hemos asignado a una variable (nuevoArray).

El resultado del script anterior se muestra en unas ventanas de alerta. Para verlo pulsa en el siguiente párrafo:

Pulsa aquí para ver el resultado del script anterior.

Vamos a ver otro ejemplo con la clase Number. Aquí el nuevo método pone dos decimales a un número y lo redondea si tiene más, y pone el símbolo del euro detrás ( € ):

function euro(){
         euros = this;
         euros = euros.toFixed(2) + "€"
         return euros
         }
Number.prototype.euro = euro
num = 4.1732
alert("numero original: "+num)
alert("numero modificado: "+num.euro())

Como puedes ver este es un método muy sencillo que se aplica a la clase Number y puede ser útil para cuando los números representan dinero. Pulsando en el siguiente párrafo puedes ver el resultado de este script:

Pulsa aquí para ver el resultado del script anterior.

En el siguiente tema veremos cómo funcionan las expresiones regulares.

Expresiones Regulares

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com