3.-JavaSript Avanzado

7/21/2019 3.-JavaSript Avanzado

http://slidepdf.com/reader/full/3-javasript-avanzado 1/19

Capítulo 3. JavaScript Avanzado

3.1.- Objetos

Al igual que sucede con otros lenguajes de programación, los objetos se empleanen JavaScript para organizar el código fuente de una forma más clara y para

encapsular métodos y funciones comunes. a forma más sencilla de crear un objetoes mediante la palabra reservada ne! seguida del nombre de la clase que se quiereinstanciar.

var el"bjeto # ne! "bject$%&var la'adena # ne! String$%&

(l objeto la'adena creado mediante el objeto nativo String permite almacenar unacadena de te)to y aprovec*ar todas las *erramientas y utilidades que proporcionaJavaScript para su manejo. +or otra parte, la variable el"bjeto almacena un objetogenérico de JavaScript, al que se pueden aadir propiedades y métodos propiospara definir su comportamiento.

3.1.1.- Definición de un objeto

-écnicamente, un objeto de JavaScript es un array asociativo formado por laspropiedades y los métodos del objeto. As, la forma más directa para definir laspropiedades y métodos de un objeto es mediante la notación de puntos de losarrays asociativos.

/n array asociativo es aquel en el que cada elemento no está asociado a suposición numérica dentro del array, sino que está asociado a otro valor especfico.os valores de los arrays normales se asocian a ndices que siempre son numéricos.os valores de los arrays asociativos se asocian a claves que siempre son cadenas

de te)to.

a forma tradicional de definir los arrays asociativos es mediante la clase Array0

var elArray # ne! Array$%&elArray12primero34 # 5&elArray12segundo34 # 6&

alert$elArray12primero34%&alert$elArray174%&

(l primer alert$% muestra el valor 5 correspondiente al valor asociado con la claveprimero. (l segundo alert$% muestra undefined, ya que como no se trata de unarray normal, sus elementos no se pueden acceder mediante su posición numérica.

Afortunadamente, e)isten métodos alternativos abreviados para crear arrayasociativos. (l ejemplo anterior se puede re*acer de la siguiente forma0

var elArray # ne! Array$%&elArray.primero # 5&elArray.segundo # 6&

alert$elArray12primero34%&alert$elArray.primero%&alert$elArray174%&

1



(l método seguido en el ejemplo anterior para crear el array asociativo sedenomina 8notación de puntos9. +ara acceder y:o establecer cada valor, se indica elnombre del array seguido de un punto y seguido del nombre de cada clave. ;eforma genérica, la notación de puntos tiene el siguiente formato0

nombreArray.nombre'lave # valor&

+ara acceder a un determinado valor, también se puede utilizar la notación en vezde la tradicional notación de los arrays, de forma que las dos instruccionessiguientes son equivalentes0

elArray12primero34&elArray.primero&

<ás adelante se muestra otra forma a=n más abreviada y directa de establecer elvalor tanto de los arrays 8normales9 como de los arrays asociativos.

3.1.1.1.- ropiedades

'omo los objetos son en realidad arrays asociativos que almacenan suspropiedades y métodos, la forma más directa para definir esas propiedades ymétodos es la notación de puntos0

el"bjeto.id # 8579&el"bjeto.nombre # 8"bjeto de prueba9&

Al contrario de lo que sucede en otros lenguajes orientados a objetos, como porejemplo Java, para asignar el valor de una propiedad no es necesario que la clasetenga definida previamente esa propiedad.

-ambién es posible utilizar la notación tradicional de los arrays para definir el valorde las propiedades0

el"bjeto12id34 # 8579&el"bjeto12nombre34 # 8"bjeto de prueba9&

3.1.1.!.- "#todos

Además de las propiedades, los métodos de los objetos también se pueden definirmediante la notación de puntos0

el"bjeto.muestra>d # function$% ? alert$8(l >; del objeto es0 8 @ t*is.id%&

os métodos se definen asignando funciones al objeto. Si la función no está definidapreviamente, es posible crear una función anónima para asignarla al nuevo métododel objeto, tal y como muestra el ejemplo anterior.

/no de los aspectos más importantes del ejemplo anterior es el uso de la palabrareservada t*is. a palabra t*is se suele utilizar *abitualmente dentro de losmétodos de un objeto y siempre *ace referencia al objeto que está llamando a esemétodo.

2



;e esta forma, en el ejemplo anterior0

var el"bjeto # ne! "bject$%&el"bjeto.id # 8579&el"bjeto.muestra>d # function$% ? alert$8(l >; del objeto es0 8 @ t*is.id%&

el"bjeto.muestra>d$%&

;entro del método, t*is apunta al objeto que llama a ese método. (n este caso, t*is*ace referencia a el"bjeto. +or tanto, la instrucción del método muestra>d esequivalente a indicar0

alert$8(l >; del objeto es0 8 @ el"bjeto.id%&

(l uso de t*is es imprescindible para crear aplicaciones reales. (l motivo es quenunca se puede suponer el nombre que tendrá la variable $el objeto% que incluyeese método. 'omo los programadores pueden elegir libremente el nombre de cada

objeto, no *ay forma de asegurar que la siguiente instrucción funcione siemprecorrectamente0

alert$8(l >; del objeto es0 8 @ el"bjeto.id%&

Si el objeto se llamara otro"bjeto, el código anterior no funcionara correctamente.Sin embargo, utilizando la palabra reservada t*is, el método funciona siempre bienindependientemente del nombre del objeto.

Además, la palabra t*is se debe utilizar siempre que se quiera acceder a unapropiedad de un objeto, ya que en otro caso, no se está accediendo correctamentea la propiedad0

var el"bjeto # ne! "bject$%&el"bjeto.id # 8579&el"bjeto.muestra>d # function$% ? alert$8(l >; del objeto es0 8 @ id%&

Si se ejecuta el ejemplo anterior, se muestra el error 8id is not defined9 $la variableid no está definida%.

Además de las funciones anónimas, también es posible asignar a los métodos de unobjeto funciones definidas con anterioridad0

function obtiene>d$% ? return t*is.id&

el"bjeto.obtiene>d # obtiene>d&

+ara asignar una función e)terna al método de un objeto, sólo se debe indicar elnombre de la función e)terna sin paréntesis. Si se utilizaran los paréntesis0

function obtiene>d$% ? return t*is.id&

el"bjeto.obtiene>d # obtiene>d$%&

3



(n el ejemplo anterior, se ejecuta la función obtiene>d$% y el resultado de laejecución se asigna a la propiedad obtiene>d del objeto. As, el objeto no tendra unmétodo llamado obtiene>d, sino una propiedad con ese nombre y con un valor igualal resultado por la función e)terna.

+or otra parte, no es obligatorio que el método del objeto se llame igual que la

función e)terna, aunque es posible que as sea.

A continuación se muestra un objeto completo formado por varias propiedades ymétodos y creado con la notación de puntos0

var el"bjeto # ne! "bject$%&el"bjeto.id # 8579&el"bjeto.nombre # 8"bjeto de prueba9&el"bjeto.muestra>d # function$% ? alert$8(l >; del objeto es0 8 @ t*is.id%&el"bjeto.muestraBombre # function$% ?

alert$t*is.nombre%&

Siguiendo este mismo procedimiento, es posible crear objetos complejos quecontengan otros objetos0

var Aplicación # ne! "bject$%&

Aplicación.<odulos # ne! Array$%&

Aplicación.<odulos174 # ne! "bject$%&Aplicación.<odulos174.titulo # 8ector CSS9&

var inicial # ne! "bject$%&inicial.estado # 5&inicial.publico # 7&inicial.nombre # 8<oduloDCSS9&inicial.datos # ne! "bject&

Aplicación.<odulos174.objeto>nicial # inicial&

(n el ejemplo anterior, se define un objeto principal llamado Aplicación que a su vezcontiene varios objetos. a propiedad <odulos de la aplicación es un array en el quecada elemento es un objeto que representa a un módulo. A su vez, cada objeto<odulo tiene una propiedad llamada titulo y otra llamada objeto>nicial que tambiénes un objeto con las propiedades y valores iniciales del módulo.

a notación tradicional de JavaScript puede llegar a ser tediosa cuando sedesarrollan aplicaciones complejas con objetos que contienen otros muc*os objetosy arrays. +or este motivo, JavaScript define un método alternativo de notaciónllamado JS"B $JavaScript "bject Botation% y que ser verá más adelante.

3.1.1.3.- "#todos appl$%& $ call%&

JavaScript define un par de métodos denominados apply$% y call$% que son muy=tiles para las funciones. Ambos métodos permiten ejecutar una función como sifuera un método de otro objeto. a =nica diferencia entre los dos métodos es la

forma en la que se pasan los argumentos a la función.

4



(l siguiente ejemplo muestra cómo utilizar el método call$% para ejecutar unafunción como si fuera un método del objeto el"bjeto0

function miEuncion$)% ? return t*is.numero @ )&

var el"bjeto # ne! "bject$%&el"bjeto.numero # F&

var resultado # miEuncion.call$el"bjeto, G%&alert$resultado%&

(l primer parámetro del método call$% es el objeto sobre el que se va a ejecutar lafunción. 'omo la función se trata como si fuera un método del objeto, la palabraclave reservada t*is *ace referencia al objeto indicado en la llamada a call$%. ;eesta forma, si en la función se utiliza t*is.numero, en realidad se está obteniendo elvalor de la propiedad numero del objeto.

(l resto de parámetros del método call$% son los parámetros que se pasan a lafunción. (n este caso, solamente es necesario un parámetro, que es el n=mero quese sumará a la propiedad numero del objeto.

(l método apply$% es idéntico al método call$%, salvo que en este caso losparámetros se pasan como un array0

function miEuncion$)% ? return t*is.numero @ )&

var el"bjeto # ne! "bject$%&el"bjeto.numero # F&

var resultado # miEuncion.apply$el"bjeto, 1G4%&alert$resultado%&

3.1.!.- 'otación JSO'

JS"B $JavaScript "bject Botation% es un formato sencillo para el intercambio deinformación. (l formato JS"B permite representar estructuras de datos $arrays% yobjetos $arrays asociativos% en forma de te)to. a notación de objetos medianteJS"B es una de las caractersticas principales de JavaScript y es un mecanismodefinido en los fundamentos básicos del lenguaje.

(n los =ltimos aos, JS"B se *a convertido en una alternativa al formato H<, yaque es más fácil de leer y escribir, además de ser muc*o más conciso. Bo obstante,H< es superior técnicamente porque es un lenguaje de marcado, mientras queJS"B es simplemente un formato para intercambiar datos.

'omo ya se sabe, la notación tradicional de los arrays es tediosa cuando e)istenmuc*os elementos0

var modulos # ne! Array$%&modulos174 # 8ector CSS9&modulos154 # 8Iestor email9&

modulos164 # 8Agenda9&modulos14 # 8Kuscador9&

5



modulos1G4 # 8(nlaces9&

+ara crear un array normal mediante JS"B, se indican sus valores separados porcomas y encerrados entre corc*etes. +or lo tanto, el ejemplo anterior se puedereescribir de la siguiente manera utilizando la notación JS"B0

var modulos # 18ector CSS9, 8Iestor email9, 8Agenda9, 8Kuscador9, 8(nlaces94&

+or su parte, la notación tradicional de los arrays asociativos es igual de tediosa quela de los arrays normales0

+or su parte, la notación tradicional de los arrays asociativos es igual de tediosa quela de los arrays normales0

var modulos # ne! Array$%&modulos.titulos # ne! Array$%&modulos.titulos12rss34 # 8ector CSS9&modulos.titulos12email34 # 8Iestor de email9&

modulos.titulos12agenda34 # 8Agenda9&

(n este caso, se puede utilizar la notación de puntos para abreviar ligeramente sudefinición0

var modulos # ne! Array$%&modulos.titulos # ne! Array$%&modulos.titulos.rss # 8ector CSS9&modulos.titulos.email # 8Iestor de email9&modulos.titulos.agenda # 8Agenda9&

(n cualquier caso, la notación JS"B permite definir los arrays asociativos de una

forma muc*o más concisa. ;e *ec*o, el ejemplo anterior se puede reescribir de lasiguiente forma utilizando la notación JS"B0

var modulos # ne! Array$%&modulos.titulos # ?rss0 8ector CSS9, email0 8Iestor de email9, agenda0 8Agenda9&

a notación JS"B para los arrays asociativos se compone de tres partes0

5.L os contenidos del array asociativo se encierran entre llaves $? y %6.L os elementos del array se separan mediante una coma $,%.L a clave y el valor de cada elemento se separan mediante dos puntos $0%

Si la clave no contiene espacios en blanco, es posible prescindir de las comillas queencierran sus contenidos. Sin embargo, las comillas son obligatorias cuando lasclaves pueden contener espacios en blanco0

var titulos<odulos # ?8ector CSS90 8rss9, 8Iestor de email90 8email9, 8Agenda90 8agenda9&

'omo JavaScript ignora los espacios en blanco sobrantes, es posible reordenar lasclaves y valores para que se muestren más claramente en el código fuente de laaplicación. (l ejemplo anterior se puede re*acer de la siguiente manera aadiendonuevas lneas para separar los elementos y aadiendo espacios en blanco paratabular las claves y para alinear los valores0

var titulos # ?

6



rss0 8ector CSS9, email0 8Iestor de email9, agenda0 8Agenda9 &

'ombinando la notación de los arrays simples y asociativos, es posible construir

objetos muy complejos de forma sencilla. 'on la notación tradicional, un objetocomplejo se puede crear de la siguiente manera0

var modulo # ne! "bject$%&modulo.titulo # 8ector CSS9&modulo.objeto>nicial # ne! "bject$%&modulo.objeto>nicial.estado # 5&modulo.objeto>nicial.publico # 7&modulo.objeto>nicial.nombre # 8<oduloDCSS9&modulo.objeto>nicial.datos # ne! "bject&

/tilizando JS"B, es posible reescribir el ejemplo anterior de forma muc*o más

concisa0

var modulo # ? titulo0 8ector CSS9,

objeto>nicial 0 ? estado 0 5, publico 0 7, nombre 0 8<odulo CSS9, datos 0 ? &

os objetos se pueden definir en forma de pares clave:valor separados por comas yencerrados entre llaves. +ara crear objetos vacos, se utilizan un par de llaves sincontenido en su interior ?.

A continuación se muestra la notación JS"B genérica para crear arrays y objetos0

Arra$s

var array # 1valor5, valor6, valor, M, valorB4&

Objetos

var objeto # ? clave50 valor5, clave60 valor6, clave0 valor, M, claveB0 valorB &

a notación abreviada se puede combinar para crear arrays de objetos, objetos conarrays, objetos con objetos y arrays, etc. A continuación se muestran algunosejemplos de aplicaciones Neb reales que crean objetos mediante esta notación.

A partir de los ejemplos anteriores, se deduce que la forma *abitual para definir losobjetos en JavaScript se basa en el siguiente modelo creado con la notación JS"B0

var objeto # ? 8propiedad590 valorDsimpleD5, 8propiedad690 valorDsimpleD6, 8propiedad90 1array5Dvalor5, array5Dvalor64, 8propiedadG90 ? 8propiedad anidada90 valor , 8metodo590 nombreDfuncionDe)terna, 8metodo690 function$% ? M , 8metodo90 function$% ? M , 8metodoG90 function$% ? M

&

7



(n un mismo objeto se puede utilizar de forma simultánea la notación tradicional deJavaScript y la notación JS"B0

var libro # ne! "bject$%&libro.numero+aginas # 5F7&libro.autores # 1 ? id0 F7, ?id0 OP 4&

(l ejemplo anterior se puede reescribir utilizando solamente la notación tradicional0

var libro # ? numero+aginas 0 5F7 &libro.autores # ne! Array$%&libro.autores174 # ne! "bject$%&libro.autores174 # ne! "bject$%&libro.autores174.id # F7&libro.autores154 # ne! "bject$%&libro.autores154.id # OP&

(l ejemplo anterior también se puede reescribir utilizando e)clusivamente la

notación JS"B0

var libro # ? numero+aginas0 5F7, autores0 1 ?id0 F7, ?id0 OP4 &

3.!.- Clases

os objetos que se *an visto *asta a*ora son una simple colección de propiedades ymétodos que se definen para cada objeto individual. Sin embargo, en laprogramación orientada a objetos, el concepto fundamental es el de clase.

a forma *abitual de trabajo consiste en definir clases a partir de las cuales secrean los objetos con los que trabajan las aplicaciones. Sin embargo, JavaScript no

permite crear clases similares a las de lenguajes como Java o '@@. ;e *ec*o, lapalabra class sólo está reservada para su uso en futuras versiones de JavaScript.

A pesar de estas limitaciones, es posible utilizar en JavaScript unos elementosparecidos a las clases y que se denominan pseudoclases. os conceptos que seutilizan para simular las clases son las funciones constructoras y el prototype de losobjetos.

3.!.1.- (unciones constructoras

Al contrario que en los lenguajes orientados a objetos, en JavaScript no e)iste elconcepto de constructor. +or lo tanto, al definir una clase no se incluyen uno ovarios constructores. (n realidad, JavaScript emula el funcionamiento de losconstructores mediante el uso de funciones.

(n el siguiente ejemplo, se crea un objeto genérico y un objeto de tipo array0

var el"bjeto # ne! "bject$%&var elArray # ne! Array$F%&

(n los dos casos, se utiliza la palabra reservada ne! y el nombre del tipo de objetoque se quiere crear. (n realidad, ese nombre es el nombre de una función que seejecuta para crear el nuevo objeto. Además, como se trata de funciones, es posibleincluir parámetros en la creación del objeto.

JavaScript utiliza funciones para simular los constructores de objetos, por lo queestas funciones se denominan 8funciones constructoras9. (l siguiente ejemplo crea

8



una función llamada Eactura que se utiliza para crear objetos que representan unafactura.

function Eactura$idEactura, id'liente% ? t*is.idEactura # idEactura& t*is.id'liente # id'liente&

'uando se crea un objeto es *abitual pasar al constructor de la clase una serie devalores para inicializar algunas propiedades. (ste concepto también se utiliza enJavaScript, aunque su realización es diferente. (n este caso, la función constructorainicializa las propiedades de cada objeto mediante el uso de la palabra reservadat*is.

a función constructora puede definir todos los parámetros que necesita paraconstruir los nuevos objetos y posteriormente utilizar esos parámetros para lainicialización de las propiedades. (n el caso anterior, la factura se inicializamediante el identificador de factura y el identificador de cliente.

;espués de definir la función anterior, es posible crear un objeto de tipo Eactura ysimular el funcionamiento de un constructor0

var laEactura # ne! Eactura$, P%&

As, el objeto laEactura es de tipo Eactura, con todas sus propiedades y métodos yse puede acceder a ellos utilizando la notación de puntos *abitual0

alert$8cliente # 8 @ laEactura.id'liente @ 8, factura # 8 @ laEactura.idEactura%&

Bormalmente, las funciones constructoras no devuelven ning=n valor y se limitan a

definir las propiedades y los métodos del nuevo objeto.

3.!.!.- rotot$pe

as funciones constructoras no solamente pueden establecer las propiedades delobjeto, sino que también pueden definir sus métodos. Siguiendo con el ejemploanterior, se puede crear un objeto completo llamado Eactura con sus propiedades ymétodos0

function Eactura$idEactura, id'liente% ? t*is.idEactura # idEatura& t*is.id'liente # id'liente&

t*is.muestra'liente # function$% ? alert$t*is.id'liente%&

t*is.muestra>d # function$% ? alert$t*is.idEactura%&

/na vez definida la pseudoclase mediante la función constructora, ya es posiblecrear objetos de ese tipo. (n el siguiente ejemplo se crean dos objetos diferentes yse emplean sus métodos0

9



var laEactura # ne! Eactura$, P%&laEactura.muestra'liente$%&var otraEactura # ne! Eactura$F, G%&otraEactura.muestra>d$%&

>ncluir los métodos de los objetos como funciones dentro de la propia función

constructora, es una técnica que funciona correctamente pero que tiene un graninconveniente que la *ace poco aconsejable.

(n el ejemplo anterior, las funciones muestra'liente$% y muestra>d$% se crean denuevo por cada objeto creado. (n efecto, con esta técnica, cada vez que seinstancia un objeto, se definen tantas nuevas funciones como métodos incluya lafunción constructora. a penalización en el rendimiento y el consumo e)cesivo derecursos de esta técnica puede suponer un inconveniente en las aplicacionesprofesionales realizadas con JavaScript.

Afortunadamente, JavaScript incluye una propiedad que no está presente en otroslenguajes de programación y que soluciona este inconveniente. a propiedad se

conoce con el nombre de prototype y es una de las caractersticas más poderosasde JavaScript.

-odos los objetos de JavaScript incluyen una referencia interna a otro objetollamado prototype o 8prototipo9. 'ualquier propiedad o método que contenga elobjeto prototipo, está presente de forma automática en el objeto original.

Cealizando un smil con los lenguajes orientados a objetos, es como si cualquierobjeto de JavaScript *eredara de forma automática todas las propiedades ymétodos de otro objeto llamado prototype. 'ada tipo de objeto diferente *ereda deun objeto prototype diferente.

(n cierto modo, se puede decir que el prototype es el molde con el que se fabricacada objeto de ese tipo. Si se modifica el molde o se le aaden nuevascaractersticas, todos los objetos fabricados con ese molde tendrán esascaractersticas.

Bormalmente los métodos no varan de un objeto a otro del mismo tipo, por lo quese puede evitar el problema de rendimiento comentado anteriormente aadiendolos métodos al prototipo a partir del cual se crean los objetos.

Si se consideran de nuevo la clase Eactura del ejemplo anterior0


t*is.muestra'liente # function$% ? alert$t*is.id'liente%&

t*is.muestra>d # function$% ? alert$t*is.idEactura%&

a clase anterior que incluye los métodos en la función constructora, se puede

reescribir utilizando el objeto prototype0

10




Eactura.prototype.muestra'liente # function$% ?

alert$t*is.id'liente%&

Eactura.prototype.muestra>d # function$% ? alert$t*is.idEactura%&

+ara incluir un método en el prototipo de un objeto, se utiliza la propiedadprototype del objeto. (n el ejemplo anterior, se *an aadido los dos métodos delobjeto en su prototipo. ;e esta forma, todos los objetos creados con esta funciónconstructora incluyen por defecto estos dos métodos. Además, no se crean dosnuevas funciones por cada objeto, sino que se definen =nicamente dos funciones

para todos los objetos creados.

(videntemente, en el prototype de un objeto sólo se deben aadir aquelloselementos comunes para todos los objetos. Bormalmente se aaden los métodos ylas constantes $propiedades cuyo valor no vara durante la ejecución de laaplicación%. as propiedades del objeto permanecen en la función constructora paraque cada objeto diferente pueda tener un valor distinto en esas propiedades.

(l mayor inconveniente de la propiedad prototype es que se pueden reescribirpropiedades y métodos de forma accidental. Si se considera el siguiente ejemplo0

Eactura.prototype.iva # 5O&

var laEactura # ne! Eactura$, P%& :: laEactura.iva # 5O

Eactura.prototype.iva # P&var otraEactura # ne! Eactura$F, G%&

:: A*ora, laEactura.iva # otraEactura.iva # P

(l primer objeto creado de tipo Eactura dispone de una propiedad llamada iva cuyovalor es 5O. <ás adelante, se modifica el prototipo del objeto Eactura durante laejecución del programa y se establece un nuevo valor en la propiedad iva.

;e esta forma, la propiedad iva del segundo objeto creado vale P. Además, el valorde la propiedad iva del primer objeto *a cambiado y a*ora vale P y no 5O. Aunquela modificación del prototipo en tiempo de ejecución no suele ser una operación quese realice *abitualmente, s que es posible modificarlo de forma accidental.

'omo se verá más adelante, e)isten libreras de JavaScript formadas por unconjunto de utilidades que facilitan la programación de las aplicaciones. /na de lascaractersticas *abituales de estas libreras es el uso de la propiedad prototype paramejorar las funcionalidades básicas de JavaScript.

'ualquier clase nativa de JavaScript puede ser modificada mediante la propiedadprototype, incluso la clase "bject. Se puede modificar por ejemplo la clase Stringpara aadir un método que convierta una cadena en un array0

String.prototype.toArray # function$% ?

return t*is.split$23%&

11



a función split$% divide una cadena de te)to seg=n el separador indicado. Si no seindica ning=n separador, se divide carácter a carácter. ;e este modo, la funciónanterior devuelve un array en el que cada elemento es una letra de la cadena dete)to original.

/na función muy com=n en otros lenguajes de programación y que no dispone

JavaScript es la función trim$%, que elimina el espacio en blanco que pueda e)istir alprincipio y al final de una cadena de te)to0

String.prototype.trim # function$% ? return t*is.replace$:QRsTRsU:g, 23%&

var cadena # 8 prueba de cadena 8&cadena.trim$%&

:: A*ora cadena # 8prueba de cadena9

a función trim$% aadida al prototipo de la clase String *ace uso de las e)presiones

regulares para detectar todos los espacios en blanco que puedan e)istir tanto alprincipio como al final de la cadena y se sustituyen por una cadena vaca, es decir,se eliminan.

'on este método, es posible definir las funciones asociadas rtrim$% y ltrim$% queeliminan los espacios en blanco a la derec*a $final% de la cadena y a su izquierda$principio%

String.prototype.rtrim # function$% ? return t*is.replace$:RsU:g, 23%&

String.prototype.ltrim # function$% ? return t*is.replace$:QRs:g, 23%&

String.prototype.trim # function$% ? return t*is.ltrim$%.rtrim$%&

"tra función muy =til para las cadenas de te)to es la de eliminar todas las etiquetasV-< que pueda contener. 'ualquier aplicación en la que el usuario puedaintroducir información, debe tener especial cuidado con los datos introducidos por elusuario. <ediante JavaScript se puede modificar la clase String para incluir unautilidad que elimine cualquier etiqueta de código V-< de la cadena de te)to0

String.prototype.strip-ags # function$% ? return t*is.replace$:WRX1Q4@Y:gi, 23%&

var cadena # 2W*tmlYW*eadYWmeta content#9te)t:*tml& c*arset#/-ELZ9 *ttpLequiv#9contentLtype9YW:*eadYWbodyYWpY+arrafo depruebaW:pYW:bodyYW:*tmlY3&

cadena.strip-ags$%& :: A*ora cadena # 8+arrafo de prueba9

12



(l ejemplo anterior también *ace uso de e)presiones regulares complejas paraeliminar cualquier trozo de te)to que sea similar a una etiqueta V-<, por lo que sebuscan patrones como WMY y W:MY.

3.!.3.- )erencia $ *+bito %scope&

os lenguajes orientados a objetos disponen, entre otros, de los conceptos de*erencia entre clases y de ámbito $scope% de sus métodos y propiedades $public,private, protected%.

Sin embargo, JavaScript no dispone de forma nativa ni de *erencia ni de ámbitos.Si se requieren ambos mecanismos, la =nica opción es simular su funcionamientomediante clases, funciones y métodos desarrollados a medida.

Algunas técnicas simulan el uso de propiedades privadas prefijando su nombre conun guión bajo, para distinguirlas del resto de propiedades p=blicas. +ara simular la*erencia de clases, algunas libreras como +rototype aaden un método a la clase"bject llamado e)tend$% y que copia las propiedades de una clase origen en otra

clase destino0

"bject.e)tend # function$destination, source% ? for $var property in source% ? destination1property4 # source1property4& return destination&

3.3.- Otros conceptos

3.3.1.- ,cepciones

JavaScript dispone de un mecanismo de tratamiento de e)cepciones muy similar alde otros lenguajes de programación como Java. +ara ello, define las palabrasreservadas try, catc* y finally.

a palabra reservad try se utiliza para encerrar el bloque de código JavaScript en elque se van a controlar las e)cepciones. Bormalmente, el bloque definido por try vaseguido de otro bloque de código definido por catc*.

'uando se produce una e)cepción en el bloque try, se ejecutan las instruccionescontenidas dentro del bloque catc* asociado. ;espués del bloque catc*, es posibledefinir un bloque con la palabra reservada finally. -odo el código contenido en elbloque finally se ejecuta independientemente de la e)cepción ocurrida en el bloquetry.

/n bloque try debe ir seguido obligatoriamente de un bloque catc* o de un bloquefinally. -ambién es posible que vaya seguido de los dos bloques.

A continuación se muestra un ejemplo de e)cepción y uso de los bloques try ycatc*0

try ? var resultado # F : a& catc*$e)cepcion% ? alert$e)cepcion%&

13



(l bloque catc* permite indicar el nombre del parámetro que se creaautomáticamente al producirse una e)cepción. (ste identificador de la variable sóloestá definido dentro del bloque catc* y se puede utilizar para obtener másinformación sobre la e)cepción producida.

(n este caso, al intentar dividir el n=mero F por la variable a que no está definida,

se produce una e)cepción que muestra el siguiente mensaje dentro del bloquecatc*0

(l funcionamiento del bloque finally no es tan sencillo como el bloque catc*. Si seejecuta cualquier parte del código que se encuentra dentro del bloque try, siemprese ejecuta el bloque finally, independientemente del resultado de la ejecución delbloque try.

Si dentro del bloque try se ejecuta una instrucción de tipo return, continue o brea[,también se ejecuta el bloque finally antes de ejecutar cualquiera de esasinstrucciones. Si se produce una e)cepción en el bloque try y están definidos losbloques catc* y finally, en primer lugar se ejecuta el bloque catc* y a continuaciónel bloque finally.

JavaScript también permite lanzar e)cepciones manualmente mediante la palabrareservada t*ro!0

try ? if $typeof a ## 8undefined9 TT isBaB$a%% ? t*ro! ne! (rror$2a variable 8a9 no es un n=mero3%& var resultado # F : a& catc*$e)cepcion% ? alert$e)cepcion%& finally ? alert$8Se ejecuta9%&

(n este caso, al ejecutar el script se muestran los dos siguientes mensajes deforma consecutiva0

14



3.3.!.- Clausura %closure&

(l concepto de clausura $closure en inglés% es conocido y utilizado en varioslenguajes de programación desde *ace décadas. JavaScript también permite utilizarclausuras en el código de las aplicaciones. (n este caso, las clausuras se crean deforma implcita, ya que no e)iste ninguna forma de declararlas e)plcitamente.

A continuación se muestra un ejemplo sencillo de clausura en JavaScript0

var ) # 8estoy fuera9&

function funcion()terna$% ? var ) # 8estoy dentro9& function funcionAnidada$% ? alert$)%&

funcionAnidada$%&

funcion()terna$%&

Al ejecutar el código anterior, se muestra el mensaje 8estoy dentro9. 'uando sedefine una función dentro de otra, todas las variables de la primera función estándisponibles de forma directa en la función anidada.

-écnicamente, una clausura es una porción de código $normalmente una función%que se eval=a en un entorno de ejecución que contiene variables de otro entorno deejecución. JavaScript crea clausuras para todas las funciones definidas dentro deotra función. Sin embargo, el uso e)preso de clausuras es muy limitado y sereserva sólo para las técnicas más avanzadas y complejas de JavaScript. /tilizandoclausuras es posible por ejemplo simular el funcionamiento de las propiedadesprivadas en los objetos de JavaScript.

3.3.3.- efleión

Al igual que la mayor parte de los lenguajes de programación más utilizados,JavaScript define mecanismos que permiten la refle)ión sobre los objetos. arefle)ión es un proceso mediante el cual un programa es capaz de obtenerinformación sobre si mismo y por tanto es capaz de auto modificarse en tiempo deejecución.

JavaScript emplea el concepto de refle)ión para permitir descubrir propiedades ymétodos de objetos e)ternos. (l ejemplo más sencillo es el de averiguar si unobjeto posee un determinado método y as poder ejecutarlo. Si se dispone de unobjeto llamado el"bjeto, el código necesario para descubrir si posee unadeterminada propiedad llamada la+ropiedad sera el siguiente0

15



if $el"bjeto.la+ropiedad% ? :: el objeto posee la propiedad buscada

Si el objeto no dispone de la propiedad buscada, la respuesta será undefined, quese transformará en un valor false que *ace que no se ejecute el interior del bloque

if.

Sin embargo, el código anterior no es del todo correcto, ya que si la propiedadbuscada tiene un valor de false, null o el n=mero 7, el anterior código no seejecutará correctamente. (n tal caso, el código es el siguiente0

if $typeof$el"bjeto.la+ropiedad% \# 2undefined3% ? :: el objeto posee la propiedad buscada

(l ejemplo anterior *ace uso del operador typeof, que devuelve el tipo del objeto ovariable que se le pasa como parámetro. os valores que devuelve este operador

son0 undefined, number, object, boolean, string o function.

(l otro operador que ya se comentó anteriormente es instanceof, que comprueba siun objeto es una instancia de otro objeto0

if $el"bjeto instanceof Eactura% ? alert$8Se trata de un objeto de tipo Eactura9%&

(ste operador también se puede emplear con objetos nativos de JavaScript0

var el"bjeto # 14&

if $el"bjeto instanceof Array% ? alert$8(s un array9%& else if $el"bjeto instanceof "bject% ? alert$8(s un objeto9%&

(n el ejemplo anterior, el programa muestra por pantalla el mensaje 8(s un array9ya que se cumple la primera comprobación por ser la variable el"bjeto un array. Sinembargo, si se cambia de orden las comprobaciones0

var el"bjeto # 14&if $el"bjeto instanceof "bject% ? alert$8(s un objeto9%& else if $el"bjeto instanceof Array% ? alert$8(s un array9%&

(n este caso, la salida del programa es el mensaje 8(s un objeto9. (l motivo es que,a pesar de que JavaScript no soporta el concepto de *erencia en los objetosdefinidos a medida, los objetos nativos Eunction y Array s que *eredan del objeto"bject. As, la comprobación el"bjeto instanceof "bject devuelve el valor true, porser Array una clase que *ereda de "bject.

16



17



18

3.-JavaSript Avanzado

Documents

Transcript of 3.-JavaSript Avanzado