La palabra clave this en JavaScript

En lenguajes orientados a objetos, this representa una referencia al objeto actual.

Pero en JavaScript, this no es fijo; cambia según el entorno de ejecución.

  • En un método, this representa el objeto al que pertenece dicho método.
  • Si se usa solo, this representa el objeto global.
  • En una función, this representa el objeto global.
  • En una función, en modo estricto, this es undefined (no definido).
  • En un evento, this representa el elemento que recibe el evento.
  • Métodos como call() y apply() pueden vincular this a cualquier objeto.

Ejemplo

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

Pruébalo »

this en métodos

En un método de objeto, this apunta al objeto que invoca el método donde se encuentra.

En el ejemplo anterior, this representa el objeto person.

El objeto al que pertenece el método fullName es person.

Ejemplo

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

Pruébalo »

Uso de this de forma independiente

Si se usa this solo, apunta al objeto global.

En el navegador, window es el objeto global [object Window]:

Ejemplo

var x = this;

Pruébalo »

En modo estricto, si se usa solo, this también apunta al objeto global.

Ejemplo

"use strict"; var x = this;

Pruébalo »

Uso de this en funciones (por defecto)

En una función, el propietario de la función se vincula a this por defecto.

En el navegador, window es el objeto global [object Window]:

Ejemplo

function myFunction() { return this; }

Pruébalo »

Uso de this en funciones (modo estricto)

En modo estricto, la función no está vinculada a this; en este caso, this esundefined。

Ejemplo

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

Pruébalo »

this en eventos

En los manejadores de eventos HTML, this apunta al elemento HTML que recibe el evento:

Ejemplo

<button onclick="this.style.display='none'"> Después de hacer clic, desaparezco </button>

Pruébalo »

Vinculación en métodos de objetos

En el siguiente ejemplo, this es el objeto person; el objeto person es el propietario de la función:

Ejemplo

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

Pruébalo »

Ejemplo

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

Pruébalo »

Explicación:this.firstNamerepresentathisdel objeto (person)firstNamepropiedad.

Vinculación explícita de funciones

En JavaScript, las funciones también son objetos, y los objetos tienen métodos; apply y call son métodos de los objetos de función. Estos dos métodos son extremadamente potentes, ya que permiten cambiar el contexto de ejecución de una función, es decir, el objeto al que está vinculado this.

En el siguiente ejemplo, cuando usamos person2 como argumento para invocar el método person1.fullName,thisthis apuntará a person2, incluso si es un método de person1:

Ejemplo

var person1 = { fullName: function() { return this.firstName + " " + this.lastName; } } var person2 = { firstName:"John", lastName: "Doe", } person1.fullName.call(person2); //Devuelve "John Doe"

Pruébalo »
Otras extensiones