{"id":692,"date":"2024-07-30T20:06:59","date_gmt":"2024-07-30T18:06:59","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=692"},"modified":"2024-07-30T20:07:00","modified_gmt":"2024-07-30T18:07:00","slug":"003-clases-y-herencia","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/javascript\/javascript-practico\/05-programacion-orientada-a-objetos\/003-clases-y-herencia\/","title":{"rendered":"003. Clases y herencia"},"content":{"rendered":"\n

Desde el a\u00f1o 2015, el est\u00e1ndar ES6<\/strong> nos ha dado lo que se conoce como az\u00facar sint\u00e1ctico<\/strong><\/a>, lo que significa que nosotros en Javascript<\/strong> ya podemos escribir clases<\/strong>, sin embargo esas clases, aunque nosotros gramatical<\/strong> y sint\u00e1cticamente<\/strong> escribamos dichas clases<\/strong>, Javascript<\/strong>, tras bambalinas lo va a compilar a prototipos<\/strong>.<\/p>\n\n\n\n\n\n\n\n

Si venimos de otros lenguajes como PHP<\/strong>, Java<\/strong>… vamos a ver que es muy similar. Veamos un ejm.<\/p>\n\n\n\n

Ejm<\/strong><\/p>\n\n\n\n

class Persona {\n   constructor(nombre, apellido) {\n      this.nombre = nombre;\n      this.apellido = apellido;\n   }\n}<\/pre>\n\n\n\n
Las clases<\/strong> no reciben par\u00e1metros<\/strong>, para poder recibirlos a la hora que creamos un objeto<\/strong> de este tipo de clase<\/strong>, lo que hacemos es utilizar un m\u00e9todo especial denominado constructor<\/em><\/strong>, que es el que va a recibir dichas propiedades. Dicho constructor<\/em> <\/strong>se ejecuta en el momento de crear objetos<\/strong> (instancias<\/strong>) de este tipo.<\/p>\n\n\n\n
Los m\u00e9todos<\/strong> se crean como vimos en cap\u00edtulos anteriores, con la siguiente  sintaxis.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
hablar(){\n   console.log(\"Estoy hablando\");\n}<\/pre>\n\n\n\n
Los m\u00e9todos<\/strong> s\u00ed pueden recibir par\u00e1metros<\/strong> en caso de que sea necesario.<\/p>\n\n\n\n
Lo que hacen las clases<\/strong> es simplificar la escritura que vimos en el cap\u00edtulo anterior cuando cre\u00e1bamos las funciones protot\u00edpicas<\/strong>. En el caso de las clases<\/strong>, lo m\u00e9todos<\/strong> no es necesario sacarlos, Javascript<\/strong> realiza esta labor por nosotros tras bambalinas. Lo que tenemos es que invocar<\/strong> nuestras variables<\/strong>.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"es\">\n  <head>\n    <meta charset=\"UTF-8\" \/>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n    <title>Clases y herencia en Javascript<\/title>\n  <\/head>\n\n  <body>\n    <h1>Clases y herencia en Javascript<\/h1>\n\n    <script>\n      class Persona {\n        constructor(nombre, apellidos) {\n          this.nombre = nombre;\n          this.apellidos = apellidos;\n        }\n\n        hablar() {\n          console.log(\"Soy una persona y estoy hablando\");\n        }\n      }\n\n      const persona = new Persona(\"Francisco\", \"Paredes\");\n      console.log(persona);\n    <\/script>\n  <\/body>\n<\/html><\/pre>\n\n\n\n
Herencia<\/h2>\n\n\n\n
Para crear clases<\/strong> que hereden de clases<\/strong> padre se utiliza la palabra reservada extends,<\/em><\/strong> como en otros lenguajes de programaci\u00f3n. De la siguiente manera.<\/p>\n\n\n\n
class Francisco extends Persona {\n  constructor(nombre, apellidos, edad) {\n     \/* Con el m\u00e9todo super() se manda llamar al constructor\n     de la clase padre *\/\n     super(nombre, apellidos);\n     this.edad = edad;\n  }\n\n  hablar(){\n    console.log(\"Soy Francisco y estoy hablando\");\n  }\n}<\/pre>\n\n\n\n
Toda esta sintaxis no convierte a Javascript<\/strong> en un lenguaje orientado a objetos<\/strong> basado en clases<\/strong>, Javascript<\/strong> sigue siendo un lenguaje que la orientaci\u00f3n a objetos<\/strong> la basa en prototipos<\/strong>. Lo \u00fanico que nos dio el est\u00e1ndar a partir de ES6<\/strong> es poder escribir de manera m\u00e1s sencilla las clases<\/strong>, es por ello que se le llama az\u00facar sint\u00e1ctico, porque es una simplificaci\u00f3n de c\u00f3mo escribir prototipos<\/strong>.<\/p>\n\n\n\n
Os dejamos un ejm completo.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"es\">\n  <head>\n    <meta charset=\"UTF-8\" \/>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n    <title>Clases y herencia en Javascript<\/title>\n  <\/head>\n\n  <body>\n    <h1>Clases y herencia en Javascript<\/h1>\n\n    <script>\n      class Persona {\n        constructor(nombre, apellidos) {\n          this.nombre = nombre;\n          this.apellidos = apellidos;\n        }\n\n        hablar() {\n          console.log(\"Soy una persona y estoy hablando\");\n        }\n      }\n\n      class Francisco extends Persona {\n        constructor(nombre, apellidos, edad) {\n          super(nombre, apellidos);\n          this.edad = edad;\n        }\n\n        hablar() {\n          console.log(\"Soy Francisco y estoy hablando\");\n        }\n      }\n\n      const persona = new Persona(\"Nombre de persona\", \"Apellidos de persona\");\n      console.log(persona);\n      persona.hablar();\n\n      const francisco = new Francisco(\"Francisco\", \"Paredes\", 51);\n      console.log(francisco);\n      francisco.hablar();\n    <\/script>\n  <\/body>\n<\/html><\/pre>\n","protected":false},"excerpt":{"rendered":"
Desde el a\u00f1o 2015, el est\u00e1ndar ES6 nos ha dado lo que se conoce como az\u00facar sint\u00e1ctico, lo que significa que nosotros…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":685,"menu_order":2,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","footnotes":""},"class_list":["post-692","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"Desde el a\u00f1o 2015, el est\u00e1ndar ES6 nos ha dado lo que se conoce como az\u00facar sint\u00e1ctico, lo que significa que nosotros...","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/692","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/comments?post=692"}],"version-history":[{"count":2,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/692\/revisions"}],"predecessor-version":[{"id":694,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/692\/revisions\/694"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/685"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=692"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}