{"id":791,"date":"2024-07-31T07:16:12","date_gmt":"2024-07-31T05:16:12","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=791"},"modified":"2024-07-31T07:16:12","modified_gmt":"2024-07-31T05:16:12","slug":"11-call-apply-bind","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/javascript\/javascript-practico\/11-call-apply-bind\/","title":{"rendered":"11. call, apply, bind"},"content":{"rendered":"\n

Javascript<\/strong> es un lenguaje de programaci\u00f3n vers\u00e1til y potente que permite a los desarrolladores utilizar diferentes t\u00e9cnicas para manipular el valor de this<\/em><\/strong> en funciones<\/strong>. Entre estas t\u00e9cnicas se encuentran tres m\u00e9todos<\/strong> importantes: call()<\/em><\/strong>, apply()<\/em><\/strong> y bind()<\/em><\/strong>. Estos m\u00e9todos<\/strong> permiten cambiar el contexto de ejecuci\u00f3n<\/strong> de una funci\u00f3n<\/strong> y son fundamentales para comprender c\u00f3mo funciona this<\/em><\/strong> en diferentes situaciones. En este cap\u00edtulo, exploraremos en profundidad call()<\/em><\/strong>, apply()<\/em><\/strong> y bind()<\/em><\/strong>, su sintaxis, sus diferencias y c\u00f3mo se pueden utilizar en diferentes escenarios.<\/p>\n\n\n\n\n\n\n\n

\u00bfQu\u00e9 es \u00abthis\u00bb en JavaScript?<\/h2>\n\n\n\n

Antes de adentrarnos en los m\u00e9todos call()<\/em><\/strong>, apply()<\/em><\/strong> y bind()<\/em><\/strong>, y aunque lo vimos en el cap\u00edtulo anterior, volvemos a recordar que es importante comprender el concepto de this<\/em><\/strong> en Javascript<\/strong>. En t\u00e9rminos sencillos, this<\/em><\/strong> se refiere al objeto<\/strong> al que pertenece la funci\u00f3n<\/strong> que se est\u00e1 ejecutando. El valor de this<\/em><\/strong> depende del contexto de ejecuci\u00f3n<\/strong> y puede variar seg\u00fan c\u00f3mo se invoque una funci\u00f3n<\/strong>.<\/p>\n\n\n\n

El valor de this<\/em><\/strong> puede ser:<\/p>\n\n\n\n

    \n
  1. Global Object (en el navegador, es el objeto window<\/em>)<\/strong>: Cuando una funci\u00f3n<\/strong> se invoca en el contexto global<\/strong>, this<\/em><\/strong> hace referencia al objeto global<\/strong>, que es el objeto window<\/em><\/strong> en el navegador o \u00abb en Node.js<\/strong>.<\/li>\n\n\n\n
  2. Objeto de llamada (objeto que llama a la funci\u00f3n)<\/strong>: Cuando una funci\u00f3n<\/strong> es parte de un objeto<\/strong> y se llama a trav\u00e9s de ese objeto, this<\/em><\/strong> hace referencia a ese objeto.<\/li>\n\n\n\n
  3. Nuevo objeto (usado en constructoras)<\/strong>: Cuando una funci\u00f3n<\/strong> se utiliza como constructora<\/strong> para crear un nuevo objeto<\/strong>, this<\/em><\/strong> se refiere al nuevo objeto<\/strong> creado.<\/li>\n\n\n\n
  4. Objeto espec\u00edfico (usado en funciones de tipo flecha)<\/strong>: Las funciones de tipo flecha<\/strong> no tienen su propio valor de this<\/em><\/strong>; en su lugar, this<\/em><\/strong> se toma del \u00e1mbito que rodea la funci\u00f3n<\/strong>.<\/li>\n<\/ol>\n\n\n\n

    El M\u00e9todo call()<\/h2>\n\n\n\n

    El m\u00e9todo call()<\/em><\/strong> es una funci\u00f3n<\/strong> incorporada en Javascript<\/strong> que se utiliza para llamar a una funci\u00f3n<\/strong> con un valor de this<\/em><\/strong> espec\u00edfico y argumentos pasados individualmente. La sintaxis de call()<\/em><\/strong> es la siguiente:<\/p>\n\n\n\n

    func.call(thisArg, arg1, arg2, ...);<\/code><\/pre>\n\n\n\n
      \n
    • func<\/code>: La funci\u00f3n que se va a llamar.<\/li>\n\n\n\n
    • thisArg<\/code>: El valor que se establecer\u00e1 como this<\/em><\/strong> dentro de la funci\u00f3n<\/strong> \u00abfunc\u00bb.<\/li>\n\n\n\n
    • arg1<\/code>, arg2<\/code>, …: Los argumentos que se pasar\u00e1n a la funci\u00f3n<\/strong> \u00abfunc\u00bb.<\/li>\n<\/ul>\n\n\n\n
      El uso m\u00e1s com\u00fan de call()<\/em><\/strong> es cambiar el valor de this<\/em><\/strong> en una funci\u00f3n<\/strong> para que haga referencia a un objeto<\/strong> espec\u00edfico. Veamos un ejemplo:<\/p>\n\n\n\n
      const persona = {\n  nombre: \"John\",\n  saludar: function() {\n    console.log(`Hola, soy ${this.nombre}`);\n  }\n};\n\nconst otraPersona = {\n  nombre: \"Jane\"\n};\n\npersona.saludar(); \/\/ Output: Hola, soy John\n\n\/\/ Usando call() para cambiar el valor de \"this\" dentro de la funci\u00f3n\npersona.saludar.call(otraPersona); \/\/ Output: Hola, soy Jane<\/code><\/pre>\n\n\n\n
      En el ejemplo anterior, la funci\u00f3n<\/strong> saludar()<\/code> dentro del objeto<\/strong> persona<\/code> hace referencia al objeto<\/strong> persona<\/code> como su valor de this<\/em><\/strong>. Sin embargo, al usar call()<\/em><\/strong> en la \u00faltima l\u00ednea, cambiamos el valor de this<\/em><\/strong> dentro de la funci\u00f3n<\/strong> para que haga referencia al objeto otraPersona<\/code> en lugar de persona<\/code>.<\/p>\n\n\n\n
      El M\u00e9todo apply()<\/h2>\n\n\n\n
      El m\u00e9todo apply()<\/em><\/strong> es similar a call()<\/em><\/strong>, pero en lugar de pasar los argumentos individualmente, se pasan como un arreglo<\/strong>. La sintaxis de apply()<\/em><\/strong> es la siguiente:<\/p>\n\n\n\n
      func.apply(thisArg, [arg1, arg2, ...]);\n<\/code><\/pre>\n\n\n\n
        \n
      • func<\/code>: La funci\u00f3n que se va a llamar.<\/li>\n\n\n\n
      • thisArg<\/code>: El valor que se establecer\u00e1 como \u00abthis\u00bb dentro de la funci\u00f3n \u00abfunc\u00bb.<\/li>\n\n\n\n
      • [arg1, arg2, ...]<\/code>: Un arreglo que contiene los argumentos que se pasar\u00e1n a la funci\u00f3n \u00abfunc\u00bb.<\/li>\n<\/ul>\n\n\n\n
        Veamos un ejemplo similar al anterior pero usando apply() en lugar de call():<\/p>\n\n\n\n
        const persona = {\n  nombre: \"John\",\n  saludar: function(genero, edad) {\n    console.log(`Hola, soy ${this.nombre}, soy ${genero} y tengo ${edad} a\u00f1os`);\n  }\n};\n\nconst otraPersona = {\n  nombre: \"Jane\"\n};\n\npersona.saludar(\"hombre\", 30); \/\/ Output: Hola, soy John, soy hombre y tengo 30 a\u00f1os\n\n\/\/ Usando apply() para cambiar el valor de \"this\" y pasar argumentos en un arreglo\npersona.saludar.apply(otraPersona, [\"mujer\", 25]); \/\/ Output: Hola, soy Jane, soy mujer y tengo 25 a\u00f1os<\/code><\/pre>\n\n\n\n
        En el ejemplo anterior, hemos usado apply()<\/em><\/strong> para cambiar el valor de this<\/em><\/strong> en la funci\u00f3n saludar()<\/code> y tambi\u00e9n para pasar los argumentos en un arreglo<\/strong>.<\/p>\n\n\n\n
        El M\u00e9todo bind()<\/h2>\n\n\n\n
        A diferencia de call()<\/em><\/strong> y apply()<\/em><\/strong>, que llaman a una funci\u00f3n inmediatamente con un valor de this<\/em><\/strong> espec\u00edfico, el m\u00e9todo bind()<\/em><\/strong> crea una nueva funci\u00f3n<\/strong> con un valor de this<\/em><\/strong> vinculado pero no la llama de inmediato. La sintaxis de bind()<\/em><\/strong> es la siguiente:<\/p>\n\n\n\n
        const nuevaFunc = func.bind(thisArg, arg1, arg2, ...);<\/code><\/pre>\n\n\n\n
          \n
        • func<\/code>: La funci\u00f3n a la que se va a vincular el valor de \u00abthis\u00bb.<\/li>\n\n\n\n
        • thisArg<\/code>: El valor que se establecer\u00e1 como \u00abthis\u00bb dentro de la funci\u00f3n vinculada.<\/li>\n\n\n\n
        • arg1<\/code>, arg2<\/code>, …: Los argumentos que se pasar\u00e1n a la funci\u00f3n cuando se llame a la funci\u00f3n vinculada.<\/li>\n<\/ul>\n\n\n\n
          Veamos un ejemplo para entenderlo mejor<\/p>\n\n\n\n
          const persona = {\n  nombre: \"John\",\n  saludar: function() {\n    console.log(`Hola, soy ${this.nombre}`);\n  }\n};\n\nconst otraPersona = {\n  nombre: \"Jane\"\n};\n\nconst funcionVinculada = persona.saludar.bind(otraPersona);\nfuncionVinculada(); \/\/ Output: Hola, soy Jane\n<\/code><\/pre>\n\n\n\n
          En el ejemplo anterior, hemos usado bind()<\/em><\/strong> para crear una nueva funci\u00f3n<\/strong> llamada funcionVinculada<\/code> con el valor de this<\/em><\/strong> vinculado al objeto<\/strong> otraPersona<\/code>. Cuando llamamos a funcionVinculada()<\/code>, hace referencia a otraPersona<\/code> como su valor de this<\/em><\/strong>.<\/p>\n\n\n\n
          Diferencias entre call(), apply() y bind()<\/h2>\n\n\n\n
          Aunque call()<\/em><\/strong>, apply()<\/em><\/strong> y bind()<\/em><\/strong> se utilizan para cambiar el valor de this<\/em><\/strong> en una funci\u00f3n, existen diferencias clave entre ellos:<\/p>\n\n\n\n
            \n
          • Sintaxis<\/strong>: La principal diferencia entre estos m\u00e9todos es su sintaxis. call()<\/em><\/strong> y apply()<\/em><\/strong> son funciones<\/strong> que se llaman inmediatamente, mientras que bind()<\/em><\/strong> crea una nueva funci\u00f3n<\/strong> que se puede llamar m\u00e1s tarde.<\/li>\n\n\n\n
          • Forma de pasar Argumentos<\/strong>: En call()<\/em><\/strong>, los argumentos se pasan individualmente, mientras que en apply()<\/em><\/strong>, los argumentos se pasan en un arreglo<\/strong>. En bind()<\/em><\/strong>, los argumentos se pasan de manera similar a call()<\/em><\/strong>.<\/li>\n\n\n\n
          • Uso en situaciones diferentes<\/strong>: call()<\/em><\/strong> y apply()<\/em><\/strong> se utilizan principalmente cuando se sabe cu\u00e1ndo y c\u00f3mo se llamar\u00e1 a la funci\u00f3n con un valor de this<\/em><\/strong> espec\u00edfico y argumentos. Por otro lado, bind()<\/em><\/strong> se utiliza cuando se necesita crear una funci\u00f3n con un valor de this<\/em><\/strong> vinculado para usarla posteriormente o cuando no se conoce el momento exacto de la llamada.<\/li>\n<\/ul>\n\n\n\n
            Escenarios de uso<\/h2>\n\n\n\n
            A continuaci\u00f3n, exploraremos algunos escenarios comunes en los que call()<\/em><\/strong>, apply()<\/em><\/strong> y bind()<\/em><\/strong> son \u00fatiles.<\/p>\n\n\n\n
            1. Cambiar el valor de \u00abthis\u00bb en m\u00e9todos de objetos<\/h3>\n\n\n\n
            Supongamos que tenemos un objeto<\/strong> que representa una persona y queremos crear otro objeto<\/strong> que represente a otra persona pero con el mismo m\u00e9todo saludar()<\/code>:<\/p>\n\n\n\n
            const persona = {\n  nombre: \"John\",\n  saludar: function() {\n    console.log(`Hola, soy ${this.nombre}`);\n  }\n};\n\nconst otraPersona = {\n  nombre: \"Jane\"\n};\n\npersona.saludar(); \/\/ Output: Hola, soy John\n\n\/\/ Usando call() para cambiar el valor de \"this\" y reutilizar el m\u00e9todo \"saludar\"\npersona.saludar.call(otraPersona); \/\/ Output: Hola, soy Jane<\/code><\/pre>\n\n\n\n
            En este caso, hemos reutilizado el m\u00e9todo<\/strong> saludar()<\/code> usando call()<\/em><\/strong> para cambiar el valor de this<\/em><\/strong> dentro del m\u00e9todo<\/strong>.<\/p>\n\n\n\n
            2. Llamar a una funci\u00f3n con argumentos de un arreglo<\/h3>\n\n\n\n
            Supongamos que tenemos una funci\u00f3n<\/strong> que acepta tres argumentos y estos argumentos est\u00e1n almacenados en un arreglo:<\/p>\n\n\n\n
            function sumar(a, b, c) {\n  return a + b + c;\n}\n\nconst arreglo = [2, 3, 5];\n\n\/\/ Usando apply() para llamar a la funci\u00f3n con los argumentos del arreglo\nconst resultado = sumar.apply(null, arreglo);\nconsole.log(resultado); \/\/ Output: 10<\/code><\/pre>\n\n\n\n
            En este caso, hemos utilizado apply()<\/em><\/strong> para pasar los argumentos de un arreglo<\/strong> a la funci\u00f3n<\/strong> sumar()<\/code>.<\/p>\n\n\n\n
            3. Crear una nueva funci\u00f3n con un valor de \u00abthis\u00bb vinculado<\/h3>\n\n\n\n
            Supongamos que tenemos una funci\u00f3n<\/strong> que forma parte de un objeto<\/strong> y queremos crear una nueva funci\u00f3n<\/strong> que haga referencia a ese objeto<\/strong> espec\u00edfico como su valor de this<\/em><\/strong>:<\/p>\n\n\n\n
            const coche = {\n  marca: \"Toyota\",\n  modelo: \"Corolla\",\n  descripcion: function() {\n    console.log(`Este coche es un ${this.marca} ${this.modelo}`);\n  }\n};\n\n\/\/ Usando bind() para crear una nueva funci\u00f3n vinculada al objeto \"coche\"\nconst descripcionDelCoche = coche.descripcion.bind(coche);\n\ndescripcionDelCoche(); \/\/ Output: Este coche es un Toyota Corolla<\/code><\/pre>\n\n\n\n
            En este caso, hemos creado una nueva funci\u00f3n<\/strong> descripcionDelCoche<\/code> usando bind()<\/em><\/strong> que hace referencia al objeto coche<\/code> como su valor de this<\/em><\/strong>. Esto nos permite utilizar la funci\u00f3n<\/strong> en otro contexto sin perder la referencia al objeto original.<\/p>\n\n\n\n
            Conclusi\u00f3n<\/h2>\n\n\n\n
            En resumen, call()<\/em><\/strong>, apply()<\/em><\/strong> y bind()<\/em><\/strong> son m\u00e9todos<\/strong> fundamentales en Javascript<\/strong> que permiten a los desarrolladores manipular el valor de this<\/em><\/strong> en funciones. Call()<\/em><\/strong> y apply()<\/em><\/strong> se utilizan para llamar a una funci\u00f3n<\/strong> inmediatamente con un valor de this<\/em><\/strong> y argumentos espec\u00edficos, mientras que bind()<\/em><\/strong> crea una nueva funci\u00f3n<\/strong> con un valor de this<\/em><\/strong> vinculado que se puede usar posteriormente.<\/p>\n\n\n\n
            Estos m\u00e9todos<\/strong> son especialmente \u00fatiles cuando se trabaja con m\u00e9todos de objetos<\/strong>, cuando se necesita pasar argumentos<\/strong> de un arreglo<\/strong> a una funci\u00f3n<\/strong> o cuando se quiere crear una nueva funci\u00f3n<\/strong> con un valor de this<\/em><\/strong> espec\u00edfico. Al dominar call()<\/em><\/strong>, apply()<\/em><\/strong> y bind()<\/em><\/strong>, los desarrolladores pueden escribir c\u00f3digo m\u00e1s flexible y reutilizable, lo que lleva a una programaci\u00f3n m\u00e1s eficiente y mantenible en Javascript<\/strong>.<\/p>\n","protected":false},"excerpt":{"rendered":"
            Javascript es un lenguaje de programaci\u00f3n vers\u00e1til y potente que permite a los desarrolladores utilizar diferentes t\u00e9cnicas para manipular el […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":620,"menu_order":10,"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-791","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":"Javascript es un lenguaje de programaci\u00f3n vers\u00e1til y potente que permite a los desarrolladores utilizar diferentes t\u00e9cnicas para manipular el […]","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/791","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=791"}],"version-history":[{"count":2,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/791\/revisions"}],"predecessor-version":[{"id":793,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/791\/revisions\/793"}],"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=791"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}