{"id":788,"date":"2024-07-30T21:03:30","date_gmt":"2024-07-30T19:03:30","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=788"},"modified":"2024-07-30T21:03:30","modified_gmt":"2024-07-30T19:03:30","slug":"10-this-en-javascript","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/javascript\/javascript-practico\/10-this-en-javascript\/","title":{"rendered":"10. this en JavaScript"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">La palabra reservada <strong><em>this<\/em><\/strong> es una caracter\u00edstica central y a menudo confusa en <strong>Javascript<\/strong>. Es un concepto fundamental que juega un papel crucial en la <strong>programaci\u00f3n orientada a objetos<\/strong> y en la forma en que se refieren y manipulan los objetos en <strong>Javascript<\/strong>. En este cap\u00edtulo, exploraremos en detalle qu\u00e9 es la palabra reservada <strong><em>this<\/em><\/strong>, c\u00f3mo se comporta en diferentes contextos y c\u00f3mo se puede utilizar de manera efectiva en el desarrollo de aplicaciones <strong>Javascript<\/strong>.<\/p>\n\n\n\n<!--more-->\n\n\n\n<h2 class=\"wp-block-heading\">\u00bfQu\u00e9 es la palabra reservada \u00abthis\u00bb?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">En <strong>JavaScript<\/strong>, <strong><em>this<\/em><\/strong> es una palabra reservada que se utiliza para hacer referencia al <strong>objeto actual<\/strong>, al objeto que est\u00e1 ejecutando el c\u00f3digo actualmente. En cada contexto de ejecuci\u00f3n, el valor de <strong><em>this<\/em><\/strong> puede ser diferente y est\u00e1 determinado por c\u00f3mo se invoca una funci\u00f3n.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">El valor de <strong><em>this<\/em><\/strong> en <strong>Javascript<\/strong> puede variar seg\u00fan el contexto en el que se utilice la funci\u00f3n y la forma en que se la invoque. En general, <strong><em>this<\/em><\/strong> siempre hace referencia al <strong>objeto<\/strong> que posee el c\u00f3digo que se est\u00e1 ejecutando actualmente.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Comportamiento de \u00abthis\u00bb en Diferentes Contextos<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">El valor de <strong><em>this<\/em><\/strong> puede cambiar dependiendo de c\u00f3mo se invoque una <strong>funci\u00f3n<\/strong>. A continuaci\u00f3n, se explican los diferentes contextos en los que se puede utilizar la palabra reservada <strong><em>this<\/em><\/strong> y c\u00f3mo se comporta en cada caso.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. En el Contexto Global<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Cuando se utiliza <strong><em>this<\/em><\/strong> en el contexto global (fuera de cualquier funci\u00f3n), su valor se refiere al <strong>objeto global<\/strong>. En los navegadores, el objeto global es <strong><em>window<\/em><\/strong>. Por ejemplo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>console.log(this); \/\/ Muestra el objeto global \"window\" en el navegador<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">2. En una Funci\u00f3n Normal<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Cuando <strong><em>this<\/em><\/strong> se utiliza dentro de una funci\u00f3n normal, su valor depende de c\u00f3mo se llama la funci\u00f3n.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">2.1. Funci\u00f3n en Modo Estricto<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">En el modo estricto (<strong>use strict<\/strong>), si la funci\u00f3n se llama sin un contexto espec\u00edfico, el valor de <strong><em>this<\/em><\/strong> ser\u00e1 <strong><em>undefined<\/em><\/strong>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function miFuncion() {\n  \"use strict\";\n  console.log(this); \/\/ Muestra \"undefined\"\n}\n\nmiFuncion();<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">2.2. Funci\u00f3n en Modo No Estricto<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">En el <strong>modo no estricto<\/strong>, si la <strong>funci\u00f3n<\/strong> se llama sin un contexto espec\u00edfico, el valor de <strong><em>this<\/em><\/strong> ser\u00e1 el <strong>objeto global<\/strong>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const miObjeto = {\n  nombre: \"John\",\n  saludar: function() {\n    console.log(\"Hola, mi nombre es \" + this.nombre);\n  }\n};\n\nmiObjeto.saludar(); \/\/ Muestra \"Hola, mi nombre es John\"<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">3. En una Funci\u00f3n de Flecha<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Las <strong>funciones flecha<\/strong> (<code>=&gt;<\/code>) en <strong>Javascript<\/strong> tienen un comportamiento diferente con respecto a <strong><em>this<\/em><\/strong>. En una <strong>funci\u00f3n flecha<\/strong>, <strong><em>this<\/em><\/strong> mantiene el valor del contexto l\u00e9xico (el valor de <strong><em>this<\/em><\/strong> fuera de la <strong>funci\u00f3n flecha<\/strong>).<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const miObjeto = {\n  nombre: \"John\",\n  saludar: function() {\n    setTimeout(() =&gt; {\n      console.log(\"Hola, mi nombre es \" + this.nombre);\n    }, 1000);\n  }\n};\n\nmiObjeto.saludar(); \/\/ Muestra \"Hola, mi nombre es John\" despu\u00e9s de 1 segundo<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">En este ejemplo, <strong><em>this<\/em><\/strong> en la <strong>funci\u00f3n flecha<\/strong> dentro del <code>setTimeout<\/code> hace referencia al mismo <strong><em>this<\/em><\/strong> que en la funci\u00f3n <code>saludar<\/code>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">4. En un Constructor<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Cuando se utiliza <strong><em>this<\/em><\/strong> dentro de un <strong>constructor<\/strong> (una <strong>funci\u00f3n constructora<\/strong> que se invoca con el operador <code>new<\/code> para crear objetos), <strong><em>this<\/em><\/strong> hace referencia al <strong>objeto<\/strong> que se est\u00e1 creando.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function Persona(nombre) {\n  this.nombre = nombre;\n}\n\nconst persona1 = new Persona(\"John\");\nconsole.log(persona1.nombre); \/\/ Muestra \"John\"<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">5. Utilizando \u00abcall\u00bb, \u00abapply\u00bb o \u00abbind\u00bb<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>JavaScript<\/strong> proporciona los m\u00e9todos <code>call<\/code>, <code>apply<\/code> y <code>bind<\/code> que permiten establecer expl\u00edcitamente el valor de <strong><em>this<\/em><\/strong> en una <strong>funci\u00f3n<\/strong>. Estos <strong>m\u00e9todos<\/strong> son \u00fatiles cuando se necesita cambiar el valor de <strong><em>this<\/em><\/strong> en una <strong>funci\u00f3n<\/strong>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function saludar() {\n  console.log(\"Hola, mi nombre es \" + this.nombre);\n}\n\nconst persona = {\n  nombre: \"John\"\n};\n\nsaludar.call(persona); \/\/ Muestra \"Hola, mi nombre es John\"\nsaludar.apply(persona); \/\/ Muestra \"Hola, mi nombre es John\"\n\nconst saludarPersona = saludar.bind(persona);\nsaludarPersona(); \/\/ Muestra \"Hola, mi nombre es John\"<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">En el ejemplo anterior, al utilizar <code>call<\/code> y <code>apply<\/code>, el valor de <strong><em>this<\/em><\/strong> se establece expl\u00edcitamente en el <strong>objeto<\/strong> \u00abpersona\u00bb, mientras que <code>bind<\/code> crea una nueva <strong>funci\u00f3n<\/strong> con <strong><em>this<\/em><\/strong> establecido en el <strong>objeto<\/strong> \u00abpersona\u00bb, que luego se puede llamar como cualquier otra <strong>funci\u00f3n<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Mejores pr\u00e1cticas al utilizar \u00abthis\u00bb<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">El comportamiento de <strong><em>this<\/em><\/strong> en <strong>Javascript<\/strong> puede ser complejo y propenso a errores si no se comprende adecuadamente. A continuaci\u00f3n, se presentan algunas mejores pr\u00e1cticas para utilizar <strong><em>this<\/em><\/strong> de manera efectiva:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Entender el contexto<\/strong>: Es fundamental comprender el <strong>contexto<\/strong> en el que se invoca una <strong>funci\u00f3n<\/strong> para determinar el valor de <strong><em>this<\/em><\/strong>. Prestar atenci\u00f3n a c\u00f3mo se llama la funci\u00f3n y d\u00f3nde se define.<\/li>\n\n\n\n<li><strong>Usar Funciones flecha con cuidado<\/strong>: Las <strong>funciones flecha<\/strong> pueden ser \u00fatiles para mantener el valor de <strong><em>this<\/em><\/strong> consistente con el <strong>contexto l\u00e9xico<\/strong>, pero es importante tener en cuenta que pueden no comportarse como se espera en ciertos escenarios, como al definir <strong>m\u00e9todos<\/strong> de <strong>objetos<\/strong>.<\/li>\n\n\n\n<li><strong>Evitar el uso de \u00abthis\u00bb en funciones anidadas<\/strong>: Cuando se utilizan <strong>funciones anidadas<\/strong>, es posible que <strong><em>this<\/em><\/strong> se refiera a un <strong>objeto<\/strong> diferente al esperado. En estos casos, se puede almacenar <strong><em>this<\/em><\/strong> en una <strong>variable local<\/strong> y utilizar esa <strong>variable<\/strong> en lugar de <strong><em>this<\/em><\/strong>.<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>const miObjeto = {\n  nombre: \"John\",\n  saludar: function() {\n    const self = this;\n    setTimeout(function() {\n      console.log(\"Hola, mi nombre es \" + self.nombre);\n    }, 1000);\n  }\n};\n\nmiObjeto.saludar(); \/\/ Muestra \"Hola, mi nombre es John\" despu\u00e9s de 1 segundo<\/code><code><\/code><\/pre>\n\n\n\n<ol start=\"4\" class=\"wp-block-list\">\n<li><strong>Utilizar <code>call<\/code>, <code>apply<\/code> o <code>bind<\/code> cuando sea necesario<\/strong>: Estos m\u00e9todos proporcionan una forma expl\u00edcita de establecer el valor de <strong><em>this<\/em><\/strong> en una <strong>funci\u00f3n<\/strong>, lo que puede ser \u00fatil en ciertos escenarios.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusiones<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">La palabra reservada <strong><em>this<\/em><\/strong> en <strong>Javascript<\/strong> es un concepto fundamental que permite referenciar al <strong>objeto<\/strong> actual en diferentes <strong>contextos de ejecuci\u00f3n<\/strong>. Su valor puede variar seg\u00fan c\u00f3mo se invoque una <strong>funci\u00f3n<\/strong> y en qu\u00e9 <strong>contexto<\/strong> se encuentre.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Comprender el comportamiento de <strong><em>this<\/em><\/strong> en <strong>Javascript<\/strong> es esencial para escribir c\u00f3digo limpio y eficiente. Al utilizar <strong><em>this<\/em><\/strong> de manera efectiva, los desarrolladores pueden acceder y manipular <strong>objetos<\/strong> de manera din\u00e1mica y crear aplicaciones m\u00e1s sofisticadas y <strong>orientadas a objetos<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Si bien <strong><em>this<\/em><\/strong> puede resultar confuso en algunos casos, se vuelve m\u00e1s claro y f\u00e1cil de manejar con la pr\u00e1ctica y una comprensi\u00f3n s\u00f3lida de los diferentes <strong>contextos<\/strong> en los que se puede utilizar. Con la pr\u00e1ctica y la atenci\u00f3n a las mejores pr\u00e1cticas, los desarrolladores pueden aprovechar al m\u00e1ximo la palabra reservada <strong><em>this<\/em><\/strong> y escribir c\u00f3digo m\u00e1s legible y mantenible en <strong>Javascript<\/strong>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>La palabra reservada this es una caracter\u00edstica central y a menudo confusa en Javascript. Es un concepto fundamental que juega un papel crucial en la programaci\u00f3n orientada a objetos y en la forma en que se refieren y manipulan los objetos en Javascript. En este cap\u00edtulo, exploraremos en detalle qu\u00e9 es la palabra reservada this, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":620,"menu_order":9,"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-788","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":"La palabra reservada this es una caracter\u00edstica central y a menudo confusa en Javascript. Es un concepto fundamental que juega un papel crucial en la programaci\u00f3n orientada a objetos y en la forma en que se refieren y manipulan los objetos en Javascript. En este cap\u00edtulo, exploraremos en detalle qu\u00e9 es la palabra reservada this,&hellip;","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/788","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=788"}],"version-history":[{"count":2,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/788\/revisions"}],"predecessor-version":[{"id":790,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/788\/revisions\/790"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/620"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=788"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}