En los ejemplos que hemos visto anteriormente cuando un gestor de eventos (onclick, onblur,...) llama a una función, esa función se encarga de buscar el objeto sobre el cuál va a trabajar. En JavaScript disponemos de un método que nos permite llamar a una función, pasándole directamente la referencia del objeto, sin tener que usar variables globales o referenciar al objeto al comienzo de cada función.
Para conseguir hacerlo necesitamos usar la palabra reservada this, la cuál hace referencia siempre al objeto que contiene el código de JavaScript en donde usamos dicha palabra reservada. Por ejemplo, si programamos una función para un botón, que al hacer click haga algo, si dentro de esa función usamos la palabra this, entonces estaremos haciendo referencia al objeto en el cuál hemos hecho click, que en este caso será el botón. El uso de this nos permite evitar usar variables globales, y el programar scripts más genéricos.
Por ejemplo:
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>Uso de la palabra reservada this</title> <script type="text/javascript"> const identificar = (objeto) => { let nombre = objeto.name; let id = objeto.id; let valor = objeto.value; let tipo = objeto.type; alert(`Datos del campo pulsado:\n\nNombre: ${nombre}\nID: ${id}\nValor: ${valor}\nTipo: ${tipo}`); } </script> </head> <body> <h1>Trabajando con this</h1> <form id="formulario"> <p> <label for="nombre">Nombre: </label> <input type="text" name="nombre" id="nombre" value="Bob" onclick="identificar(this)"/> <label for="apellidos">Apellidos: </label> <input type="text" name="apellidos" id="apellidos" value="Esponja" onclick="identificar(this)"/> <label for="edad">Edad: </label> <input type="number" name="edad" id="edad" value="18" onclick="identificar(this)"/> <label for="pais">Pais: </label> <label for="pais1">España: </label> <input type="radio" name="pais" id="pais1" value="ES" onclick="identificar(this)"/> <label for="pais2">Francia: </label> <input type="radio" name="pais" id="pais2" value="FR" onclick="identificar(this)"/> </p> <p> Haga click en cada uno de los campos para ver más información. </p> </form> </body> </html>
En este ejemplo, cada vez que hagamos click en alguno de los objetos, llamaremos a la función identificar() y a esa función le pasaremos como parámetro this, que en este caso será la referencia al objeto en el cuál hemos hecho click. La función identificar() recibe ese parámetro, y lo almacena en la variable objeto, la cuál le permite imprimir todas las referencias al name, id, value y type. En el siguiente apartado veremos los eventos y allí te mostraré otro uso de this por ejemplo dentro de la función identificar() sin tener que pasar ningún parámetro.