Entendiendo la palabra clave this en JavaScript

La palabra clave this en JavaScript hace referencia al objeto al que pertenece. Tiene distintos valores según dónde se utilice: en un método, sola, en una función, en un evento, etc.

this en el Contexto global

En el contexto de ejecución global (fuera de cualquier función), this se refiere al objeto global, que es window en los navegadores.

console.log(this); // Salida: Window {...}

this en los métodos de un objeto

Cuando se utiliza en un método de objeto, this se refiere al objeto al que pertenece el método.

const persona = {
    nombre: "Juan",
    apellido: "Pérez",
    nombreCompleto: function() {
        return `${this.nombre} ${this.apellido}`;
    }
};

console.log(persona.nombreCompleto()); // Salida: Juan Pérez

this en funciones de construcción

En una función constructora, this se refiere a la instancia recién creada.

function Persona(nombre, apellido) {
    this.nombre = nombre;
    this.apellido = apellido;
}

const persona1 = new Persona("Juana", "Herrera");
console.log(persona1.nombre); // Salida: Juana

this en funciones flecha

Las funciones de flecha no tienen su propio this. En cambio, this se hereda léxicamente de la función externa donde se define la función de flecha.

const persona = {
    nombre: "Juan",
    apellido: "Pérez",
    nombreCompleto: function() {
        const dameNombreCompleto = () => `${this.nombre} ${this.apellido}`;
        return dameNombreCompleto();
    }
};

console.log(persona.nombreCompleto()); // Saslida: Juan Pérez

this en manejadores de eventos

En los controladores de eventos, this se refiere al elemento que recibió el evento.

<button id="miBoton">Púlsame</button>
<script>
    document.getElementById("miBoton").addEventListener("click", function() {
        console.log(this); // Salida: <button id="miBoton">Púlsame</button>
    });
</script>

Cambiar this con call, apply, y bind

Puede establecer explícitamente el valor de this usando call, apply y bind.

Método call

El método call llama a una función con un valor this dado y argumentos proporcionados individualmente.

function saluda() {
    console.log(`Hola, ${this.nombre}`);
}

const persona = { nombre: "Alicia" };
saluda.call(persona); // Salida: Hola, Alicia

Método apply

El método apply llama a una función con un valor this dado y argumentos proporcionados como una matriz.

function saluda(saludo) {
    console.log(`${saludo}, ${this.nombre}`);
}

const persona = { nombre: "Roberto" };
saluda.apply(persona, ["Hola"]); // Salida: Hola, Roberto

Método bind

El método bind crea una nueva función que, cuando se llama, tiene su palabra clave this establecida en el valor proporcionado.

function saluda() {
    console.log(`Hola, ${this.nombre}`);
}

const persona = { nombre: "Carlos" };
const saludaPersona = saluda.bind(persona);
saludaPersona(); // Salida: Hola, Carlos

Conclusión

Comprender la palabra clave this es fundamental para escribir código JavaScript eficaz. Su valor depende del contexto en el que se utiliza y se puede configurar explícitamente mediante call, apply y bind.

results matching ""

    No results matching ""