{"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 en Javascript ya podemos escribir clases, sin embargo esas clases, aunque nosotros gramatical y sint\u00e1cticamente escribamos dichas clases, Javascript, tras bambalinas lo va a compilar a prototipos.<\/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":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"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 en Javascript ya podemos escribir clases, sin embargo esas clases, aunque nosotros gramatical y sint\u00e1cticamente escribamos dichas clases, Javascript, tras bambalinas lo va a compilar a prototipos.","_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}]}}