El problema que tenim al iniciar-nos en la programaci\u00f3 orientada a objectes (POO) en JavaScript \u00e9s que existeixen m\u00faltiples maneres de realitzar les mateixes accions i aix\u00f2 ens pot crear moltes confusions. En aquest article us explicarem l\u2019estructura b\u00e0sica i est\u00e0ndard per treballar amb objectes.<\/p>\n
Quan vulguem crear l\u2019estructura d\u2019una classe el millor que podem fer \u00e9s seguir el proc\u00e9s lineal que detallem a continuaci\u00f3:<\/p>\n
\r\nfunction Persona(){ }\r\n<\/code><\/pre>\n<\/li>\n- El seg\u00fcent pas \u00e9s definir les propietats d\u2019aquest objecte, recordeu que les propietats son les caracter\u00edstiques pr\u00f2pies de la classe.
\nDins d\u2019una classe existeixen dos tipus de propietats les p\u00fabliques, que son accessibles des de fora de l\u2019objecte i es defineixen amb “this” i les privades que nom\u00e9s son accessibles des de dins de l\u2019objecte i es defineixen fent servir la paraula “var”. En la nostra classe les propietats podrien ser, ulls, orelles, cames… Veiem com les declarem:<\/p>\n\r\nfunction Persona(){\r\n this.ulls \/\/Aix\u00f2 es una propietat publica, amb this indiquem que \u00e9s una propietat d\u2019aquest objecte.\r\n var cames = 2; \/\/Aix\u00f2 seria una propietat privada i nom\u00e9s \u00e9s accessible pels m\u00e8todes del propi objecte\r\n}\r\n<\/code><\/pre>\n<\/li>\n- Un cop definits els atributs de la nostre classe definirem els m\u00e8todes d\u2019aquesta que vindrien a ser les accions que pot realitzar una classe, el m\u00e9s habitual \u00e9s que el seu nom estigui compost per un verb. En la nostra classe un m\u00e8tode podria ser “caminar”.
\nPer definir un m\u00e8tode el que fem es assignar una funci\u00f3 a una variable, anem a veure dons com implementar aquest m\u00e8tode a la nostre classe:<\/p>\n\r\nfunction Persona(){\r\n this.ulls = 2; \/\/Aix\u00f2 es una propietat publica, amb this indiquem que \u00e9s una propietat d\u2019aquest objecte.\r\n var cames = 2; \/\/Aix\u00f2 seria una propietat privada i nom\u00e9s \u00e9s accessible pels m\u00e8todes del propi objecte\r\n\r\n \/\/Definim el m\u00e8tode caminar i les funcions que ha de realitzar\r\n this.caminar = function(){\r\n alert(\"Aquesta persona camina!!!\");\r\n }\r\n}\r\n<\/code><\/pre>\n<\/li>\n- Que passaria si necessitem accedir al valor de les propietats un cop hem creat l\u2019objecte, ja sigui per modificar o assignar un nou valor? Pels atributs que hem definit com a p\u00fablics no tenim cap problema ja que podrem accedir a ells des de fora de l\u2019objecte, com veurem en el punt 6, per\u00f2 pels que hem definit com a privats ho tenim m\u00e9s complicat. Per aconseguir-ho el que farem ser\u00e0 crear m\u00e8todes p\u00fablics que realitzin aquestes accions; en el est\u00e0ndard de la POO a aquests m\u00e8todes se\u2019ls anomena GETTER i SETTER, els primers serveixen per retornar el valor de la propietat i el seu nom acostuma a comen\u00e7ar amb la paraula “get” seguida del nom de la propietat que volem obtenir el seu valor i els segons serveixen per modificar el valor de la propietat, la nomenclatura es la mateixa descrita abans per\u00f2 comen\u00e7ant amb la paraula “set”, Vegem dons com aplicar aquests m\u00e8todes per la nostra propietat privada “cames”\n
\r\nfunction Persona(){\r\n this.ulls \/\/Aix\u00f2 es una propietat publica, amb this indiquem que \u00e9s una propietat d\u2019aquest objecte.\r\n var cames = 2; \/\/Aix\u00f2 seria una propietat privada i nom\u00e9s \u00e9s accessible pels m\u00e8todes del propi objecte\r\n\r\n \/\/Definim el m\u00e8tode caminar i les funcions que ha de realitzar\r\n this.caminar = function(){\r\n alert(\"Aquesta persona camina!!!\");\r\n }\r\n\r\n \/\/Definim el SETTER per modificar el valor de la propietat privada cames que rebr\u00e0 com a atribut el nou valor\r\n this.setCames = function(valor){\r\n cames = valor; \/\/Al ser una propietat privada no farem servir this per refererir-nos a ella\r\n }\r\n\r\n \/\/Definim el GETTER per obtenir el valor de la propietat privada cames\r\n this.getCames = function(){\r\n return cames; \/\/Al ser una propietat privada no farem servir this per refererir-nos a ella\r\n }\r\n\r\n}\r\n<\/code><\/pre>\n<\/li>\n- Ara ja tenim la classe creada, el seg\u00fcent pas \u00e9s provar que funciona tot correctament, primer de tot el que farem ser\u00e0 crear una instancia o objecte d\u2019aquesta classe:\n
\r\nvar Persona1 = new Persona();\r\n<\/code><\/pre>\n<\/li>\n- Ara que ja tenim l\u2019objecte crear poder cridar els m\u00e8todes p\u00fablics, accedir o modificar les propietats, com fem a continuaci\u00f3:\n
\r\nalert(\"Aquesta persona t\u00e9 \" + Persona1.ulls + \" ulls.\") \/\/Accedim a la propietat p\u00fablica ulls\r\n\r\nPersona1.ulls = 3; \/\/Modifiquem la propietat p\u00fablica\r\nalert(\"Aquesta persona ara t\u00e9 \" + Persona1.ulls + \" ulls.\")\r\n\r\nPersona1.caminar(); \/\/Cridem el m\u00e8tode p\u00fablic\r\nalert(\"Aquesta persona t\u00e9 \" + Persona1.getCames() + \" cames.\") \/\/Accedim a la propietat privada cames mitjan\u00e7ant el m\u00e8tode p\u00fablic que hem creat\r\n\r\nPersona1.setCames(1); \/\/Modifiquem el valor de la propietat privada fent servir el m\u00e8tode que hem creat\r\nalert(\"Aquesta persona t\u00e9 \" + Persona1.getCames() + \" cames.\") \/\/Accedim a la propietat privada cames mitjan\u00e7ant el m\u00e8tode p\u00fablic que hem creat\r\n<\/code><\/pre>\n<\/li>\n<\/ol>\nEls passos que acabem de veure son l\u2019estructura b\u00e0sica per la creaci\u00f3 i utilitzaci\u00f3 d\u2019una classe en la POO.
\nUna altre propietat de la POO \u00e9s que quan creem un objecte podem inicialitzar les propietats de l\u2019objecte fent servir el constructor d\u2019aquest i enviant els valors com a par\u00e0metre en el moment de la seva creaci\u00f3. En realitat JavaScript no te un constructor pr\u00f2piament dit, el que nosaltres anomenem constructor en realitat \u00e9s utilitzar una caracter\u00edstica que te JavaScript i que consisteix en que en el moment de crear una instancia d\u2019una classe, s\u2019executa tot el codi que aquesta cont\u00e9. A continuaci\u00f3 veiem com inicialitzar les propietats del nou objecte utilitzant el suposat constructor:<\/p>\n
\r\n\/\/En el moment de definir la classe indiquem que ha de rebre dos par\u00e0metres\r\nfunction Persona(pUlls, pCames){\r\n \/\/Aprofitem el constructor de JavaScript per inicialitzar les propietats de l\u2019objecte\r\n this.ulls = pUlls;\r\n var cames = pCames\r\n} \r\n\r\nvar numUll = 2;\r\nvar numCames = 2;\r\n\r\nvar Persona1 = new Persona(numUll, numCames);\r\n\r\n<\/code><\/pre>\n<\/p>","protected":false},"excerpt":{"rendered":"
El problema que tenim al iniciar-nos en la programaci\u00f3 orientada a objectes (POO) en JavaScript \u00e9s que existeixen m\u00faltiples maneres de realitzar les mateixes accions i aix\u00f2 ens pot crear moltes confusions. En aquest article us explicarem l\u2019estructura b\u00e0sica i est\u00e0ndard per treballar amb objectes. Quan vulguem crear l\u2019estructura d\u2019una classe el millor que podem … <\/p>\n