{"id":690,"date":"2024-07-30T20:05:58","date_gmt":"2024-07-30T18:05:58","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=690"},"modified":"2024-07-30T20:05:58","modified_gmt":"2024-07-30T18:05:58","slug":"002-herencia-prototipica","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/javascript\/javascript-practico\/05-programacion-orientada-a-objetos\/002-herencia-prototipica\/","title":{"rendered":"002. Herencia protot\u00edpica"},"content":{"rendered":"\n

En el cap\u00edtulo anterior estuvimos viendo una introducci\u00f3n a la POO<\/strong> (programaci\u00f3n orientada a objetos<\/strong>) y a que Javascript<\/strong> es un lenguaje que utiliza el paradigma de la programaci\u00f3n orientada a objetos<\/strong> no como la mayor\u00eda de los lenguajes basados en clases<\/strong>, sino basado en prototipos<\/strong>. Tambi\u00e9n vimos como crear una funci\u00f3n constructora<\/strong> que genere un prototipo<\/strong>, y adem\u00e1s como optimizar la creaci\u00f3n de m\u00e9todos<\/strong> para estos prototipos<\/strong>, para que cuando estemos generando objetos<\/strong>, es decir, instancias<\/strong> de nuestra funci\u00f3n protot\u00edpica<\/strong>, ahorremos memoria de nuestra aplicaci\u00f3n al no duplicar en espacio de memoria los m\u00e9todos<\/strong> que se pueden asignar directamente a los prototipos<\/strong>.<\/p>\n\n\n\n\n\n\n\n

Herencia<\/h2>\n\n\n\n

La herencia<\/strong> es la capacidad de poder heredar caracter\u00edsticas de un padre a un hijo, esto se da con los lenguajes basados en clases<\/strong>, pero en Javascript<\/strong> que est\u00e1 basado en prototipos<\/strong>, la herencia<\/strong> se da a modo de cadena protot\u00edpica<\/strong>. Veamos un ejm.<\/p>\n\n\n\n

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

<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" \/>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n    <title>Herencia protot\u00edpica<\/title>\n  <\/head>\n\n  <body>\n    <h1>Herencia protot\u00edpica<\/h1>\n\n    <script>\n      function Persona(nombre, edad) {\n        this.nombre = nombre;\n        this.edad = edad;\n      }\n\n      Persona.prototype.hablar = function () {\n        console.log(\"Soy una persona y estoy hablando\");\n      };\n\n      \/\/ Herencia protot\u00edpica\n      function Hombre(nombre, edad, apellidos) {\n        this.super = Persona;\n        this.super(nombre, edad);\n        this.apellidos = apellidos;\n      }\n\n      \/\/ Hombre est\u00e1 heredando de Persona\n      \/\/ Muy importantes estas dos lineas de c\u00f3digo siguientes\n      Hombre.prototype = new Persona();\n      Hombre.prototype.constructor = Hombre;\n\n      \/\/ Sobreescritura de m\u00e9todo del prototipo padre en el hijo\n      Hombre.prototype.hablar = function () {\n        console.log(\"Soy un hombre y estoy hablando\");\n      };\n\n      \/\/ Nueva funci\u00f3n no inclu\u00edda en la funci\u00f3n protot\u00edpica padre\n      Hombre.prototype.saludar = function () {\n        console.log(\"Soy un hombre y estoy saludando\");\n      };\n\n      const francisco = new Hombre(\"Francisco\", 51, \"Paredes\");\n      console.log(francisco);\n      francisco.hablar();\n      francisco.saludar();\n    <\/script>\n  <\/body>\n<\/html><\/pre>\n\n\n\n
Desde el a\u00f1o 2015 vamos a poder hacer lo mismo en Javascript<\/strong> que en otros lenguajes de programaci\u00f3n con las clases<\/strong>. Javascript<\/strong>, durante toda su existencia y en futuro pr\u00f3ximo, seguir\u00e1 trabajando la parte de la POO<\/strong> basada en prototipos<\/strong>.<\/p>\n\n\n\n
Si resulta confuso este tema de como crear prototipos<\/strong> y la herencia protot\u00edpica<\/strong>, no hay que preocuparse ya que en los pr\u00f3ximos cap\u00edtulos trabajaremos con clases<\/strong>, las cuales, tras bambalinas realizar\u00e1n el cambio a prototipos<\/strong> sin que nosotros tengamos que crear las funciones protot\u00edpicas<\/strong>.<\/p>\n","protected":false},"excerpt":{"rendered":"
En el cap\u00edtulo anterior estuvimos viendo una introducci\u00f3n a la POO (programaci\u00f3n orientada a objetos) y a que Javascript es un lenguaje…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":685,"menu_order":1,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","footnotes":""},"class_list":["post-690","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":"En el cap\u00edtulo anterior estuvimos viendo una introducci\u00f3n a la POO (programaci\u00f3n orientada a objetos) y a que Javascript es un lenguaje...","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/690","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=690"}],"version-history":[{"count":1,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/690\/revisions"}],"predecessor-version":[{"id":691,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/690\/revisions\/691"}],"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=690"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}