Estructura bàsica per la creació i utilització d’un objecte en JavaScript

El problema que tenim al iniciar-nos en la programació orientada a objectes (POO) en JavaScript és que existeixen múltiples maneres de realitzar les mateixes accions i això ens pot crear moltes confusions. En aquest article us explicarem l’estructura bàsica i estàndard per treballar amb objectes.

Quan vulguem crear l’estructura d’una classe el millor que podem fer és seguir el procés lineal que detallem a continuació:

  1. Primer s’ha de tenir clar quina classe hem de crear i el per què, un cop tenim clar això podem procedir a crear la classe. En JavaScript una classe es crea exactament igual que una funció. A continuació creem la classe Persona.
    
    function Persona(){ }
    
  2. El següent pas és definir les propietats d’aquest objecte, recordeu que les propietats son les característiques pròpies de la classe.
    Dins d’una classe existeixen dos tipus de propietats les públiques, que son accessibles des de fora de l’objecte i es defineixen amb “this” i les privades que només son accessibles des de dins de l’objecte i es defineixen fent servir la paraula “var”. En la nostra classe les propietats podrien ser, ulls, orelles, cames… Veiem com les declarem:

    
    function Persona(){
        this.ulls //Això es una propietat publica, amb this indiquem que és una propietat d’aquest objecte.
        var cames = 2; //Això seria una propietat privada i només és accessible pels mètodes del propi objecte
    }
    
  3. Un cop definits els atributs de la nostre classe definirem els mètodes d’aquesta que vindrien a ser les accions que pot realitzar una classe, el més habitual és que el seu nom estigui compost per un verb. En la nostra classe un mètode podria ser “caminar”.
    Per definir un mètode el que fem es assignar una funció a una variable, anem a veure dons com implementar aquest mètode a la nostre classe:

    
    function Persona(){
        this.ulls = 2; //Això es una propietat publica, amb this indiquem que és una propietat d’aquest objecte.
        var cames = 2; //Això seria una propietat privada i només és accessible pels mètodes del propi objecte
    
        //Definim el mètode caminar i les funcions que ha de realitzar
        this.caminar = function(){
            alert("Aquesta persona camina!!!");
        }
    }
    
  4. Que passaria si necessitem accedir al valor de les propietats un cop hem creat l’objecte, ja sigui per modificar o assignar un nou valor? Pels atributs que hem definit com a públics no tenim cap problema ja que podrem accedir a ells des de fora de l’objecte, com veurem en el punt 6, però pels que hem definit com a privats ho tenim més complicat. Per aconseguir-ho el que farem serà crear mètodes públics que realitzin aquestes accions; en el estàndard de la POO a aquests mètodes se’ls anomena GETTER i SETTER, els primers serveixen per retornar el valor de la propietat i el seu nom acostuma a començar 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ò començant amb la paraula “set”, Vegem dons com aplicar aquests mètodes per la nostra propietat privada “cames”
    
    function Persona(){
        this.ulls //Això es una propietat publica, amb this indiquem que és una propietat d’aquest objecte.
        var cames = 2; //Això seria una propietat privada i només és accessible pels mètodes del propi objecte
    
        //Definim el mètode caminar i les funcions que ha de realitzar
        this.caminar = function(){
            alert("Aquesta persona camina!!!");
        }
    
        //Definim el SETTER per modificar el valor de la propietat privada cames que rebrà com a atribut el nou valor
        this.setCames = function(valor){
            cames = valor; //Al ser una propietat privada no farem servir this per refererir-nos a ella
        }
    
        //Definim el GETTER per obtenir el valor de la propietat privada cames
        this.getCames = function(){
            return cames; //Al ser una propietat privada no farem servir this per refererir-nos a ella
        }
    
    }
    
  5. Ara ja tenim la classe creada, el següent pas és provar que funciona tot correctament, primer de tot el que farem serà crear una instancia o objecte d’aquesta classe:
    
    var Persona1 = new Persona();
    
  6. Ara que ja tenim l’objecte crear poder cridar els mètodes públics, accedir o modificar les propietats, com fem a continuació:
    
    alert("Aquesta persona té " + Persona1.ulls + " ulls.") //Accedim a la propietat pública ulls
    
    Persona1.ulls = 3; //Modifiquem la propietat pública
    alert("Aquesta persona ara té " + Persona1.ulls + " ulls.")
    
    Persona1.caminar(); //Cridem el mètode públic
    alert("Aquesta persona té " + Persona1.getCames() + " cames.") //Accedim a la propietat privada cames mitjançant el mètode públic que hem creat
    
    Persona1.setCames(1); //Modifiquem el valor de la propietat privada fent servir el mètode que hem creat
    alert("Aquesta persona té " + Persona1.getCames() + " cames.") //Accedim a la propietat privada cames mitjançant el mètode públic que hem creat
    

Els passos que acabem de veure son l’estructura bàsica per la creació i utilització d’una classe en la POO.
Una altre propietat de la POO és que quan creem un objecte podem inicialitzar les propietats de l’objecte fent servir el constructor d’aquest i enviant els valors com a paràmetre en el moment de la seva creació. En realitat JavaScript no te un constructor pròpiament dit, el que nosaltres anomenem constructor en realitat és utilitzar una característica que te JavaScript i que consisteix en que en el moment de crear una instancia d’una classe, s’executa tot el codi que aquesta conté. A continuació veiem com inicialitzar les propietats del nou objecte utilitzant el suposat constructor:


//En el moment de definir la classe indiquem que ha de rebre dos paràmetres
function Persona(pUlls, pCames){
    //Aprofitem el constructor de JavaScript per inicialitzar les propietats de l’objecte
    this.ulls = pUlls;
    var cames = pCames
} 

var numUll = 2;
var numCames = 2;

var Persona1 = new Persona(numUll, numCames);