El problema que encontramos a iniciar-nos en la programaci\u00f3n orientada a objetos (POO) en JavaScript es que existen m\u00faltiples maneras de realizar las mismas acciones i esto puede generarnos muchas confusiones. En este art\u00edculo veremos la estructura b\u00e1sica y est\u00e1ndar para trabajar con objetos.
\nCuando queramos crear la estructura de una clase lo mejor que podemos hacer es seguir el proceso lineal que detallamos a continuaci\u00f3n:<\/p>\n
\r\nfunction Persona(){ }\r\n<\/code><\/pre>\n<\/li>\n- El siguiente paso es definir las propiedades de este objeto, recordad que las propiedades son las caracter\u00edsticas propias de la clase.
\nDentro de una clase existen dos tipos de propiedades las p\u00fablicas que son accesibles desde fuera del objeto y se definen con \u00abthis\u00bb y las propiedades privadas que s\u00f3lo son accesibles desde dentro del objeto y se definen utilizando la palabra \u00abvar\u00bb. En nuestra clase las propiedades podr\u00edan ser: ojos, orejas, piernas\u2026 A continuaci\u00f3n veremos como las declaramos.<\/p>\n\r\nfunction Persona(){\r\n this.ojos \/\/Al utilizar this estamos indicando que es una propiedad p\u00fablica de esta clase.\r\n var piernas = 2; \/\/Al utilizar var indicamos que es una propiedad privada de modo que solo ser\u00e1 accesible por los m\u00e9todos que tenga esta clase.\r\n}\r\n<\/code><\/pre>\n<\/li>\n- Una vez definidos los atributos de nuestra clase definiremos los m\u00e9todos de esta que vendr\u00edan a ser las acciones que puede realizar una clase. Lo m\u00e1s habitual es que su nombre este compuesto por un verbo. En nuestra clase un m\u00e9todo podr\u00eda ser \u00abcaminar\u00bb.
\nPara definir un m\u00e9todo lo que haremos ser\u00e1 asignar una funci\u00f3n a una variable, vamos a ver como implementar nuestro m\u00e9todo a la clase:<\/p>\n\r\nfunction Persona(){\r\n this.ojos \/\/Al utilizar this estamos indicando que es una propiedad p\u00fablica de esta clase.\r\n var piernas = 2; \/\/Al utilizar var indicamos que es una propiedad privada de modo que solo ser\u00e1 accesible por los m\u00e9todos que tenga esta clase.\r\n\r\n \/\/Definimos el m\u00e9todo caminar y las funciones que este ha de realizar\r\n this.caminar = function(){\r\n alert(\"\u00a1Esta persona camina!\");\r\n }\r\n}\r\n<\/code><\/pre>\n<\/li>\n- Que pasar\u00eda si necesit\u00e1semos acceder al valor de las propiedades una vez hemos creado el objeto ya sea para modificarlo o utilizarlo desde fuera de este objeto? Para los atributos que hemos definido como p\u00fablicos no tenemos ning\u00fan problema ya que podemos acceder a ellos desde fuera de los objetos, como veremos en el punto 6, pero para los que hemos definido como privados lo tenemos m\u00e1s complicado. Para conseguirlo lo que haremos ser\u00e1 crear unos m\u00e9todos p\u00fablicos que se encarguen de realizar estas acciones; en el est\u00e1ndar de la POO a estos m\u00e9todos se les suele llamar GETTER y SETTER, los primeros sirven para devolver el valor de la propiedad, su nombre acostumbra a empezar por la palabra \u00abget\u00bb seguida del nombre de la propiedad que queremos devolver su valor. Los segundos sirven para modificar el valor de la propiedad, la nomenclatura es la misma descrita antes pero empezando con la palabra \u00abset\u00bb. Veamos como aplicar estos m\u00e9todos para nuestra propiedad privada \u00abpiernas\u00bb.\n
\r\nfunction Persona(){\r\n this.ojos \/\/Al utilizar this estamos indicando que es una propiedad p\u00fablica de esta clase.\r\n var piernas = 2; \/\/Al utilizar var indicamos que es una propiedad privada de modo que solo ser\u00e1 accesible por los m\u00e9todos que tenga esta clase.\r\n\r\n \/\/Definimos el m\u00e9todo caminar y las funciones que este ha de realizar\r\n this.caminar = function(){\r\n alert(\"\u00a1Esta persona camina!\");\r\n }\r\n\r\n \/\/Definimos el SETTER para modificar el valor de la propiedad privada piernas y que recibir\u00e1 como atributo el nuevo valor de esta propiedad\r\n this.setPiernas = function(valor){\r\n piernas = valor; \/\/Al ser una propiedad privada no utilizaremos this para referirnos a ella (en el caso de hacerlo en realidad lo que har\u00edamos ser\u00eda referirnos a una propiedad p\u00fablica llamada piernas y que no existe) \r\n }\r\n\r\n \/\/Definimos el GETTER para obtener el valor de la propiedad privada piernas\r\n this.getPiernas = function(){\r\n return piernas; \/\/Al ser una propiedad privada no utilizaremos this para referirnos a ella (Si utiliz\u00e1semos this nos devolver\u00eda UNDEFINED ya que nos estar\u00edamos refiriendo a una propiedad p\u00fablica que no existe)\r\n }\r\n\r\n}\r\n<\/code><\/pre>\n<\/li>\n- Ahora ya tenemos la clase creada y el siguiente paso es probar que todo funciona correctamente. Lo primero que haremos ser\u00e1 crear una instancia\/objeto de esta clase:\n
\r\nvar Persona1 = new Persona();\r\n<\/code><\/pre>\n<\/li>\n- Ahora que ya tenemos el objeto creado podemos por un lado acceder y modificar los atributos p\u00fablicos desde fuera del objeto o llamar a los m\u00e9todos p\u00fablicos creados para este mismo fin en el caso del atributo privado.\n
\r\nalert(\"Esta persona tiene \" + Persona1.ojos + \" ojos.\") \/\/Accedemos al valor de la propiedad p\u00fablica ojos\r\n\r\nPersona1.ojos = 3; \/\/Modificamos el valor de la propiedad ojos\r\nalert(\"Esta persona tiene \" + Persona1.ojos + \" ojos.\") \/\/Vemos que realmente se ha modificado su valor\r\n\r\nPersona1.caminar(); \/\/Llamamos al m\u00e9todo p\u00fablico\r\n\r\nalert(\"Esta persona tiene \" + Persona1.getPiernas() + \" piernas.\") \/\/Accedemos a la propiedad privada piernas a trav\u00e9s del m\u00e9todo p\u00fablico que hemos creado\r\n\r\nPersona1.setPiernas(1); \/\/Modificamos el valor de la propiedad privada utilizando el m\u00e9todo p\u00fablico creado para tal fin\r\nalert(\"Esta persona tiene \" + Persona1.getPiernas() + \" piernas.\") \/\/Accedemos a la propiedad privada piernas y vemos que realmente se ha modificado su valor.\r\n<\/code><\/pre>\n<\/li>\n<\/ol>\nLos pasos que acabamos de ver son la estructura b\u00e1sica para la creaci\u00f3n i utilizaci\u00f3n de una clase en la POO. Otra caracter\u00edstica de la POO es que cuando creamos un objeto podemos inicializar sus propiedades utilizando el constructor de este enviando los valores como par\u00e1metros en el momento de su creaci\u00f3n. En realidad JavaScript no tiene un constructor propiamente dicho, lo que nosotros llamamos constructor en realidad es utilizar una caracter\u00edstica que tiene JavaScript que al crear una instancia de una clase ejecuta todo el c\u00f3digo que esta contiene. Veamos pues como inicializaremos las propiedades del nuevo objeto utilizando el supuesto constructor de JavaScript:<\/p>\n
\r\n\r\n\/\/En el momento de definir la clase indicaremos que ha de recibir dos par\u00e1metros que ser\u00e1n los que utilizaremos para inicializar las propiedades\r\nfunction Persona(pOjos, pPiernas){\r\n \/\/Aprovechamos el constructor de JavaScript para inicializar las propiedades del objeto creado\r\n this.ojos = pOjos;\r\n var piernas = pPiernas\r\n}\r\n\r\nvar numOjos = 2;\r\nvar numPiernas = 2;\r\n\r\nvar Persona1 = new Persona(numOjos, numPiernas);\r\n\r\n<\/code><\/pre>\n<\/p>","protected":false},"excerpt":{"rendered":"
El problema que encontramos a iniciar-nos en la programaci\u00f3n orientada a objetos (POO) en JavaScript es que existen m\u00faltiples maneras de realizar las mismas acciones i esto puede generarnos muchas confusiones. En este art\u00edculo veremos la estructura b\u00e1sica y est\u00e1ndar para trabajar con objetos. Cuando queramos crear la estructura de una clase lo mejor que … <\/p>\n