{"id":687,"date":"2024-07-30T20:02:37","date_gmt":"2024-07-30T18:02:37","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=687"},"modified":"2024-07-30T20:02:37","modified_gmt":"2024-07-30T18:02:37","slug":"001-prototipos-en-javascript","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/javascript\/javascript-practico\/05-programacion-orientada-a-objetos\/001-prototipos-en-javascript\/","title":{"rendered":"001. Prototipos en Javascript"},"content":{"rendered":"\n

En este cap\u00edtulo comenzaremos a hablar sobre una de las cosas m\u00e1s importantes en Javascript<\/strong>, y son los prototipos<\/strong>. Javascript<\/strong> es un lenguaje multiparadigma<\/strong>, es decir, podemos utilizar diferentes paradigmas de programaci\u00f3n<\/strong> (programaci\u00f3n funcional<\/strong>, programaci\u00f3n orientada a objetos<\/strong>..). A d\u00eda de hoy el paradigma<\/strong> m\u00e1s utilizado en la mayor\u00eda de lenguajes de programaci\u00f3n es el de la programaci\u00f3n orientada a objetos<\/strong> o POO<\/strong>, y una caracter\u00edstica muy importante de Javascript<\/strong> es que la orientaci\u00f3n<\/strong> a<\/strong> objetos<\/strong> en el lenguaje es muy diferente a otros lenguajes basados en clases<\/strong> como C<\/strong>, Java<\/strong>…<\/p>\n\n\n\n\n\n\n\n

A partir del est\u00e1ndar ES6<\/strong> ya tenemos clases<\/strong>, sin embargo dichas clases<\/strong> no son m\u00e1s que un az\u00facar sint\u00e1ctico, es decir, una manera m\u00e1s f\u00e1cil que provee Javascript<\/strong> para poder hacer la programaci\u00f3n basada en prototipos<\/strong>, es decir, aunque ya tenemos clases<\/strong> en Javascript<\/strong>, esas clases<\/strong>, el compilador del navegador las convierte a funciones protot\u00edpicas<\/strong>. Por lo tanto es muy importante entender lo que son los prototipos<\/strong> en Javascript<\/strong>.<\/p>\n\n\n\n

Conceptos de la POO<\/h2>\n\n\n\n

Dentro de la POO<\/strong> (programaci\u00f3n orientada a objetos<\/strong>) hay 4 conceptos muy importantes que debemos entender:<\/p>\n\n\n\n

    \n
  • Clases<\/strong>: son modelos a seguir, es decir, algo que sirve como esquema para de ah\u00ed basarnos y poder generar instancias<\/strong>.<\/li>\n\n\n\n
  • Objetos<\/strong>: es una instancia<\/strong> de una clase<\/strong>, es decir, una copia de ese modelo.\n
      \n
    • Atributos<\/strong>: son caracter\u00edsticas<\/strong> o propiedades<\/strong> del objeto<\/strong>. Son variables<\/strong> dentro de un objeto<\/strong>.<\/li>\n\n\n\n
    • M\u00e9todos<\/strong>: son las acciones que un objeto<\/strong> puede realizar, son funciones<\/strong> dentro de un objeto.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n

      Prototipo en Javascript<\/h2>\n\n\n\n

      Un prototipo<\/strong> es un mecanismo por el cual un objeto<\/strong> puede heredar de un objeto padre atributos<\/strong> y m\u00e9todos<\/strong>. De hecho la herencia<\/strong> en Javascript<\/strong> se da mediante la cadena de prototipos<\/strong>. Por decirlo, crea una copia del prototipo<\/strong> en el cual est\u00e1 basado.<\/p>\n\n\n\n

      Vamos a crear un ejm generando un prototipo<\/strong> del cual nos basemos para hacer copias del mismo. Vamos a crear lo que se denomina una funci\u00f3n constructora<\/strong>, que, como su nombre dice, la vamos a construir una sola vez y a partir de ella vamos a generar nuevas instancias<\/strong> (nuevos objetos<\/strong>) que sean de este tipo de funci\u00f3n constructora.<\/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>Prototipos en Javascript<\/title>\n  <\/head>\n\n  <body>\n    <h1>Prototipos en Javascript<\/h1>\n\n    <script>\n      function Persona(nombre, genero) {\n        this.nombre = nombre;\n        this.genero = genero;\n        this.hablar = function () {\n          console.log(\"Estoy hablando pq soy una persona\");\n        };\n      }\n      const francisco = new Persona(\"Francisco\", \"Macho\"),\n        beatriz = new Persona(\"Beatriz\", \"Hembra\");\n\n      console.log(francisco.nombre);\n      console.log(beatriz.nombre);\n    <\/script>\n  <\/body>\n<\/html><\/pre>\n\n\n\n
      Si vamos a necesitar varias instancias<\/strong> del mismo tipo que estemos creando, en vez de crear varias<\/strong> funciones con el mismo c\u00f3digo repetido, lo que conviene m\u00e1s es hacer una funci\u00f3n constructora<\/strong>.<\/p>\n\n\n\n
      Por lo que podemos ver, la funci\u00f3n hablar()<\/em> la podemos en vez de cargarla en todas las instancias<\/strong>, cargarla solo de manera \u00fanica cuando la necesitemos. Lo suyo ser\u00eda asignar al prototipo<\/strong> de la funci\u00f3n Persona()<\/em> el m\u00e9todo hablar()<\/em>, es decir, sacarlo de la funci\u00f3n protot\u00edpica<\/strong> y asociarlo a la misma fuera de ella, ya que al tenerlo dentro de la misma, cada vez que generamos una instancia<\/strong> de nuestra funci\u00f3n protot\u00edpica<\/strong>, se est\u00e1 duplicando este m\u00e9todo hablar()<\/em>, y si tuvi\u00e9ramos m\u00e1s m\u00e9todos<\/strong>, se estar\u00edan duplicando en todas las instancias<\/strong>, consumiendo memoria. Lo ideal es que nuestras funciones constructoras<\/strong> s\u00f3lo tengan los atributos<\/strong>, y los m\u00e9todos<\/strong> los saquemos de nuestra funci\u00f3n constructora<\/strong> y se los peguemos al prototipo<\/strong> de la siguiente forma.<\/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>Prototipos en Javascript<\/title>\n  <\/head>\n\n  <body>\n    <h1>Prototipos en Javascript<\/h1>\n\n    <script>\n      function Persona(nombre, genero) {\n        this.nombre = nombre;\n        this.genero = genero;\n      }\n\n      \/\/ M\u00e9todos agregados al prototipo de la funci\u00f3n constructora\n      Persona.prototype.hablar = function () {\n        console.log(`Hola, mi nombre es ${this.nombre}`);\n      };\n\n      const francisco = new Persona(\"Francisco\", \"Macho\");\n      console.log(francisco);\n      francisco.hablar();\n    <\/script>\n  <\/body>\n<\/html><\/pre>\n","protected":false},"excerpt":{"rendered":"
      En este cap\u00edtulo comenzaremos a hablar sobre una de las cosas m\u00e1s importantes en Javascript, y son los prototipos. Javascript es un…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":685,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","footnotes":""},"class_list":["post-687","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 este cap\u00edtulo comenzaremos a hablar sobre una de las cosas m\u00e1s importantes en Javascript, y son los prototipos. Javascript es un...","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/687","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=687"}],"version-history":[{"count":2,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/687\/revisions"}],"predecessor-version":[{"id":689,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/687\/revisions\/689"}],"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=687"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}