The JavaScript this Keyword

---

En JavaScript, la palabra clave this siempre se refiere a un objeto.

---

Ejemplo:

const person = {
  firstName: "John",
  lastName : "Doe",
  id       : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

Ver ejemplo

---

¿Qué es this?

En JavaScript, palabra clave this se refiere a un objeto.

Qué objeto depende de cómo this invoca (usado o llamado).

La palabra clave this se refiere a diferentes objetos dependiendo de cómo se use:

---

Nota

this no es una variable. Es una palabra clave. No puedes cambiar el valor de this.

---

this en un método

Cuando se usa en un método de objeto, this se refiere al objeto.

En el ejemplo de la parte superior de esta página, this se refiere al objeto persona.

Porque el método fullName es un método del objeto persona.

Ejemplo:

fullName : function() {
  return this.firstName + " " + this.lastName;
}

Ver ejemplo

---

this solo

Cuando se usa solo, this se refiere al objeto global.

Porque this se está ejecutando en el ámbito global.

En una ventana del navegador, el objeto global es [object Window]:

Ejemplo:

let x = this;

Ver ejemplo

En modo estricto, cuando se usa solo, this también se refiere al objeto global:

Ejemplo:

"use strict";
let x = this;

Ver ejemplo

---

this en una función (Predeterminado)

En una función, el objeto global es el enlace predeterminado para this.

En una ventana del navegador, el objeto global es [object Window]:

Ejemplo:

function myFunction() {
  return this;
}

Ver ejemplo

---

this en una función (Estricto)

El modo estricto de JavaScript no permite el enlace predeterminado.

Entonces, cuando se usa en una función, en modo estricto, this es undefined.

Ejemplo:

"use strict";
function myFunction() {
  return this;
}

Ver ejemplo

---

this en controladores de eventos

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

Ejemplo:

<button onclick="this.style.display='none'">
  Click to Remove Me!
</button>

Ver ejemplo

---

Enlace de método de objeto

En estos ejemplos, this es el objeto persona:

Ejemplo:

const person = {
  firstName  : "John",
  lastName   : "Doe",
  id         : 5566,
  myFunction : function() {
    return this;
  }
};

Ver ejemplo

Ejemplo:

const person = {
  firstName: "John",
  lastName : "Doe",
  id       : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

Ver ejemplo

Es decir, this.firstName es la propiedad firstName de this (el objeto persona).

---

Enlace de función explícita

Los métodos call() y apply() son métodos JavaScript predefinidos.

Ambos pueden usarse para llamar a un método de objeto con otro objeto como argumento.

---

Veáse también:

The Function call() Method

The Function apply() Method

The Function bind() Method

El siguiente ejemplo llama a person1.fullName con person2 como argumento, this se refiere a , incluso si fullName es un método de person1:

Ejemplo:

const person1 = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}

const person2 = {
  firstName:"John",
  lastName: "Doe",
}

// Return "John Doe":
person1.fullName.call(person2);

Ver ejemplo

---

Préstamo de funciones

Con el método bind(), un objeto puede tomar prestado un método de otro objeto.

Este ejemplo crea 2 objetos (persona y miembro).

El objeto miembro toma prestado el método de nombre completo del objeto persona:

Ejemplo:

const person = {
  firstName:"John",
  lastName: "Doe",
  fullName: function () {
    return this.firstName + " " + this.lastName;
  }
}

const member = {
  firstName:"Hege",
  lastName: "Nilsen",
}

let fullName = person.fullName.bind(member);

Ver ejemplo

---

This precedencia

Para determinar a qué objeto se refiere this; utilice la siguiente precedencia de orden.

¿Está this en una función que se llama usando bind()?

¿Está this en una función que se llama usando apply()?

¿Está this en una función que se llama usando call()?

¿Está this en una función de objeto (método)?

¿Está this en una función en el ámbito global?

---

W3Schools es el sitio de desarrolladores web más grande del mundo.