19/01/13

Olvidastetuusuariooclave?

Programacin orientada a objetos (OOP) con Javascript

Usuario

Contrasea

Entrar o registrate

Buscar..

Foros

Blog

Tutoriales

Cursos

Videotutoriales

Comic

Publicauntutorial

QuesCristalab?

Tags

Ejemplos
Buscar

Contctanos

Anime

Ququieresbuscar?
Tutoriales / Programacinorientadaaobjetos(OOP)conJavascript

Programacinorientadaaobjetos(OOP)conJavascript
PorLunaticLycanthrop el09deOctubrede2007 con112,463visitas HTML,CSSyJavascript OtrostutorialesporLunaticLycanthrop.

JavaScriptesunlenguajede programacion/scriptingampliamente subestimadoeinfravalorado.Laprincipalrazn deestoesporcomosurgi:Fuedesarrollado primeroparaunsolonavegador(Netscape Navigator)peropronto,alversupotencial,fue integradoalamayoradenavegadoreswebpor susfabricantes. Comosuelesucederconloslenguajesde creacinweb,prontosurgielcaos: Extensiones,atributosomtodosnoestandares fueronimplementadosporunouotro navegador,causandoquemuchasvecessetuvieraquecrearuncdigodosveces,paraque corrieraencualquierescenario.As,graciasaestafaltadeestandarizacin,muchostomaronal JavaScriptcomounamalaprctica(NolesrecuerdaalCSS?). OtradelasrazonesqueexistenparalascriticashaciaJavaScript,esquenoestabasadoen clases,sinoenprototpos(msadelantelaexplicacion).Paramuchoshardcodersque programanenJavaoC++espreferiblelaconstruccindeobjetosconclases,porventajasque yaconocemos,yunlenguajequenolasposeanoestanextensibleousable.Adems,la extremasimplicidaddelJSysumalusohanoriginadohorroresquetodoshemossufrido (popups,SnapShots,textosparpadeantes,propagandasdinamicas,etc).Yprincipalmenteaeso ledebemoselpreconceptohaciaelJS. Sinembargo,graciasaqueelECMAscriptesbasadoenprototpos,elJavaScripttambienloes loqueloconvierteenunlenguajeorientadoaobjetos(OOP,porObjectOriented ProgrammingoPOO,enespaol,porProgramacinOrientadaaObjetos).Estetutorial pretendeobservarcomoseconstruyenlosobjetosenjavascript,ycomosepuedenusar.

Clasesvsprototpos
Comoyasemencion,JSesbasadoenprototpos.Unprototpoesunobjetoabstracto,capaz decontenerotrosobjetosdentro,loscualespuedenserdistintostiposdedatos:variables (numeros,cadenasdetexto,valoreslgicos),vectores,funcioneseinclusiveotrosgruposde objetos. Entonces,envezdeprogramarunaclase,paraestarorientadosaobjetosenJSdefinimosun prototpo.Lasvariablesdentrodeestesernlaspropiedades,ylasfuncionessernlos mtodos:

[beo=Pooo{ Ojtrttp] [Poidd=Vral rpeaaibe] [Mtduco oo=Fnin] }

Creacindelobjeto

www.cristalab.com/tutoriales/programacion-orientada-a-objetos-oop-con-javascript-c232l/

1/6

19/01/13

Programacin orientada a objetos (OOP) con Javascript

Entonces,iniciemoslacreacindelobjeto:Paraesteejemplousemoslostradicionalesanimales. Lacreacindeunobjetosehaceconunafuncion,queserlaconstructora,yalavezlaque identifiqueelobjeto. Creemosuna"clase"Gatoparaempezar...porquetodosamancrearlasclases"gato".(Sino mecrees,revisalostutorialesdePOO.SinohayunGatoahi,eltutorialnovalelapena). Haydosformasdedefinirlafuncionconstructora:Definirunafuncionodefinirunavariablecuyo contenidoseaunafuncin.Puedeparecerredundante,loes.Veamosambasformas:

fntoaoaaers) ucinGt(prmto { /oio /Cdg }

o

vrGtucin(aaers aao=fntoprmto){ /oio/ *Cdg* }

Nota: Paraelrestodeltutovamosausarlasegundaforma:D

Propiedadesdelobjeto
Comovimosanteriormente,laspropiedadesdelobjetosedefinenenformadevariables.Estas variablesdebenestarsituadasdentrodelafuncionconstructora,marcadascon"this",para poderseraccesadascomopartedelobjeto.Lasvariablesrecibenparametrosqueseenvianal crearunanuevainstanciadelobjeto(paranuestrospropositos,alcrearunnuevogato). EntoncesveamoselejemploconnuestroobjetoGato.Ungatotienecomopropiedades bsicas...digamosquesunombre,sucolor,ysuedad.Entoncesestaspropiedadessernlas querecibalafuncionconstructoraparaserasignadas,Veamoscomo:

vrGtucin(obeoo,ea){ aao=fntonmr,clrdd ti.obe=nmr hsnmrobe ti.oooo hsclr=clr ti.dd=ea hseadd }

Conloanterior,definimoselGato,ycmoesesegato.Sinembargo,algunosdelosqueson conocedoresdelaOOPyadebenestarpensando...Yelstrictdatatyping?.Elscriptdata

typingesloqueregulaeltipodedatosqueentranaunobjeto,yasimismoelcmose
comportan.Porlogeneral,loslenguajesbasadosenclasessonmuyestrctosconrespectoalos tiposdedatosqueseusan. Porfortuna,enJSpodemosemularelSDT,asignandolostiposdevariablesdeentraday(si eresunmaniaco)chequeandoquelosvaloresseancorrectos:

vrGtucin(obeoo,ea){ aao=fntonmr,clrdd ti.obe=nwSrn(obe hsnmretignmr) ti.ooetigclr hsclr=nwSrn(oo) ti.dd=nwNme(dd hseaeubrea) /Preepo /ojml iiNNti.dd){ f(sa(hsea) aet"roneaatpn,eaoennmr" lr(Erreldtyigddnsuueo) } }
Puesperfecto.Hemoscreadoladefinicindenuestroobjeto.Sinembargonosfaltaunpequeo detalle.Usarelobjeto!Asiquevamosacrearungatonuevo,yaasignarlelaspropiedadesque yavimosarriba:

vrMci=nwGt(Mciu,"zl,2 aiheao"ihf"au")
Conestohemoscreadounainstanciadenuestroobjeto,unsimpatico"Gato"quesellama

www.cristalab.com/tutoriales/programacion-orientada-a-objetos-oop-con-javascript-c232l/

2/6

19/01/13

Programacin orientada a objetos (OOP) con Javascript

Michifu,tienedosaosyes...azul.Azul?Loimportanteesqueelcdigofuncione,no?:P Siqueremoscomprobaralgunadelaspropiedadesdenuestroobjetoloharamosas:

Variable_que_define_el_objeto(punto)propiedad_deseada.Asique,porejemplo,veamosel
colordelgatoMichifu:

aet"lgtsdoo+ih.oo) lr(Eaoeeclr"Mciclr
Loquenosdaelresultado:"Elgatoesdecolorazul"

Mtodos
Ahora,veamoslosmtodosdelobjeto.Comomencionarriba,unmetodoesunafunciondentro delobjeto.Hayvariosmetodosparacrearunmtodonuevo:Extendiendoelprototpo,creando unavariabletipofuncion,ovinculandounafuncionexternaalobjeto.Veamostodosloscasos,y depasocreemosunparde"acciones"paranuestrogato.Enloscomportamientosbasicosdel gato,encontramoscomerydescansar,asique:

Nota:Loqueestencorchetescuadrados[]noescdigo.Nolocoloques. Essimplementeunaguaparaqueentiendaspordondevaelcdigoycual sersuresultado.

Mtodo1:Vinculacinexterna
Conestemetododeclaramosqueunadelaspropiedades,llamaraunafuncionexterna:

[.] .. ti.oeoeEtra hscmr=cmrxen [.] .. fntooeEtra){ ucincmrxen( aet"lgt+hsnmr+ecmua" lr(Eao"ti.obe"soinrtn) } [.] .. Mcicmr) ih.oe( [SldEaoMciusoinrtn aia="lgtihfecmua"]

Mtodo2:Extensiondelprototipo
ComolosobjetosestancompuestosporprototiposenJavaScript,nosotrospodemosaumentarle metodosalprototipodelobjetodirectamente,delasiguientemanera:

/[Noaoafnincntutr /otcmslucoosrcoa] Gt.rttp.oeucin){ aopooyecmr=fnto( aet"lgt+hsnmr+ecmua" lr(Eao"ti.obe"soinrtn) } /[.] /.. Mcicmr) ih.oe( /[SldEaoMciusoinrtn /aia="lgtihfecmua"]

Tepuedeinteresar
CantidaddedecimalesenunNumberen Javascript HTMLmssimpleyreusableconMWML:

Mtodo3:Definicionenlafuncionconstructora
Conestemtodo,asignamosunapropiedadcomofunciondentrodelaconstructora:

MinimalWebMetaLanguage MVCyprogramacinorientadaaobjetos enJavascript

/[.] /.. ti.oeucin){ hscmr=fnto( aet"lgt+hsnmr+ecmua" lr(Eao"ti.obe"soinrtn) }

Programacinorientadaaobjetosen Javascript MVCenJavascript,conAJAXyjQuery,Parte2:

www.cristalab.com/tutoriales/programacion-orientada-a-objetos-oop-con-javascript-c232l/

3/6

19/01/13
/[.] /.. Mcicmr) ih.oe(

Programacin orientada a objetos (OOP) con Javascript

Controladores

/[SldEaoMciusoinrtn /aia="lgtihfecmua"]
Ntesequeenlostresmtodos,esposiblepasarparametrosalafunciondelamaneranormal enquecualquierfunciontrabaja.Adems,encualquieradelosmetodos,thisserefierealobjeto (enestecasoGato)

ProgramacinOrientadaaEventosysu PropagacinenAS3 10secretosdeCSS3quetalvezno conocas SingletonyfuncionesestticasenAS3

Herencia
UnodelascaracteristicasmsinteresantedelaOOP,eslaherenciademtodos/propiedades. EnJavaScriptlopodemoslograrmediantelosprototpos.Entonces,yatenemosunGato, verdad?Ahora,creemosunarazadegatos,larazaSiams.Entoncescreemosdos constructorasapartesparacadauna,yhagamosquesiamsherededegato:

FuentesconcalidadenIE7eIE8usando fontfaceyjQuery AplicacinbsicaconNodeJS,Express, JadeyStylus

vrGtucin( aao=fnto){ ti.js=2 hsoo ti.ira hspens=4 } vrSaeucin( aims=fnto){ ti.oobac" hsclr="lno ti.oo_js="zl hsclrooau" } /Cmeo,absteerpeaeitna. /oovmsmoinnpoiddsdsits /Aoaeeeo: /hr,hrdms Sae.rttpeao) imspooye=nwGt( /EohcuecpeerttpeGteaaaaeSae. /saeqesoilpooiodaoysdldims /Poeoeieiro /rbmsavrsscet vrCtoeims) aaby=nwSae( aetCto.js lr(abyoo) /Rtra2_ /eon!^^ aetCto.oo) lr(abyclr /Rtra"lno,aiqecnevurpeae /eonbac"suosrasspoidds

Regresaralostutoriales

Mtodosypropiedadesprivadas
Enloquehemosvistohastaahora,losmetodosyfuncioneserantotalmentepublicos: Modificablesylegiblesdesdecualquierparte.Echemosunvistazoacomo"privatizar"variables:

vrGtucin(obe aao=fntonmr){ /Cemsuavralrvdisgalti"aet /raonaibepiaasnainre"hssa ti.obe=nmr hsnmrobe /raonmtdrvdnmcosets(Deiinoua /CemsueoopiaoeuhsapcoX)dfnedn fninnra ucooml vrfeunimdrd" arceca="oeaa fntorlaofeuni){ uciniABn(rceca aet"lgtaaaocnfeuni+rceca lr(Eaovlborceca"feuni) } iABn(rceca rlaofeuni) } vrMcieao"ihf" aihn=nwGt(Mciu)
Elcdigoanteriorcrealavariableprivada"frecuencia",ylafuncionprivada"irAlBano".Para comprobarquelavariableseaprivada,ejecutemosalert(Michin.frecuencia),loquedevuelve

undefined
Sinembargo,aunpodemosusaresasvariablesofuncionestantoenlafuncionconstructora, comoporfunciones"getter"o"setter"...lascualesnotienenunatributo"get"o"set"definido, simplementesonfuncionesquenospermitenleerlaspropiedades:

vrGtucin(obe aao=fntonmr){ ti.obe=nmr hsnmrobe /Cemsuavralrvdisgalti"aet /raonaibepiaasnainre"hssa vrfeunimdrd" arceca="oeaa /raonmtdrvdnmcosets(Deiinoua /CemsueoopiaoeuhsapcoX)dfnedn fninnra ucooml fntorlaofeuni){ uciniABn(rceca aet"lgtaaaocnfeuni+rceca lr(Eaovlborceca"feuni) }

www.cristalab.com/tutoriales/programacion-orientada-a-objetos-oop-con-javascript-c232l/

4/6

19/01/13

Programacin orientada a objetos (OOP) con Javascript

} ti.errc=fnto( hsleFeucin){ iABn(rceca rlaofeuni) } } vrMcieao"ihf" aihn=nwGt(Mciu) Mci.errc) ihnleFe( /Nsrtra"lgtaaaocnfeunioeaa) /oeonEaovlborcecamdrd"

Extensiondeobjetosnativosmedianteelprototpo
ComotodoslosobjetosdeJStienenprototipo,nospodemosdivertiraadiendoutilidadesa nuestrosobjetosdesiempre.AadamoleunafuncionaArray,porejemplo:

Arypooyecicdnis=fnto(aar){ ra.rttp.oniecaucinplba cicdnis=0 onieca fr(=iti.egh+){ oi0<hslnti+ iti[]=aar){ f(hsi=plba cicdnis+ onieca+ } } aet"eecnrrn"cicdnis"cicdni()da lr(Snotao+onieca+oniecasel plba) aar" } /oeosreraiuet: /Pdmsualarysgine cabrra(Fede,"x,"e_P,"azmr"Rm" lbes=Ary"rdi"M"NoJ"Zraoa,"am, "al) Fe" /se /Oet cabrra(Fede,"x,"e_P,"azmr"M"M" lbes=Ary"rdi"M"NoJ"Zraoa,"x,"x) /Yleo /ug cabr.onieca(M" lbescicdnis"x) /Etneafninnsntfcrunaeesauaplbae /nocslucoooiiacatsvcsetnaarn ura.Co,n? naryolo

Conclusiones
Comovimos,entenderlacomposicindelprototipodeunobjetoenJSpuedeserterriblemente til.Yentendercomotrabajarconclasesenestelenguajenospuedehacermsfacillavida: Reutilizarcdigo,ganarvelocidadendesarrollo,odividireltrabajoentrevariaspersonasse vuelvemuysencillo(comoocurreconlaPOOengeneral). Adicionalmentealovisto,sisequieremayorsimilitudlaPOOclsica,sepuedemandarunvalor deretornoacadafuncion(comoVoidusamosTrueoFalse)ycomprobarsilostiposdedatos soncorrectosconcondicionales. Ahora,unaimplementaciondePOOenJScombinadaconjQueryuotralibrerasimilar,puede resultarmuypotentecuandodeDOMsetrata.Adesarrollar)
Twittear

19

Me gusta

A 51 personas les gusta esto. S el primero de tus amigos.

javascript poo

Enviauncomentario(0)

Instalarnode.js,Jade,StylusyCoffeeScript enWindows

Recepcindeparmetrosenunafuncin estiloTwenMax/TweenLiteenAS3

LarevolucindeJavascript

BridgeJavaand.NET
www.CodeMesh.com Extremeperformance,trivialdeployment,dropdeadeasy

www.cristalab.com/tutoriales/programacion-orientada-a-objetos-oop-con-javascript-c232l/

5/6

19/01/13

Programacin orientada a objetos (OOP) con Javascript

Publicatucomentario
Elautordeesteartculohacerradoloscomentarios.Sitienespreguntasocomentarios,puedes hacerlosenelforo Entraalforoyparticipaenladiscusin

opuedes...
EstsregistradoenCristalabyquieres publicartuURLyavatar? Iniciasesin

Noestsregistradoanperoquiereshacerlo antesdepublicartucomentario? Registrate

Blog Foros Tutoriales TutorialesdeFlash Ejemplos.fla Anime Videotutoriales Cursos CursodeFlash CursodeHTML Tags

www.cristalab.com/tutoriales/programacion-orientada-a-objetos-oop-con-javascript-c232l/

6/6