this

Prubalo

const test = {
  prop: 42,
  func: function () {
    return this.prop;
  },
};

console.log(test.func());
// Expected output: 42

Sintaxis

this

Valor

El objeto contexto de JavaScript en el cual se est ejecutando el cdigo actual.

Contexto global

En el contexto de ejecucin global (fuera de cualquier funcin), this se refiere al objeto global, ya sea en modo estricto o no.

console.log(this.document === document); // true

// En los navegadores web, el objeto window tambin es un objeto global:
console.log(this === window); // true

this.a = 37;
console.log(window.a); // 37

Contexto de la funcin

Dentro de una funcin, el valor de this depende de cmo la funcin es llamada.

Llamada simple

function f1() {
  return this;
}

f1() === window; // objeto global

En este caso, el valor de this no est establecido por la llamada. Dado que el cdigo no est en modo estricto, el valor de this debe ser siempre un objeto por lo que por defecto es el objeto global.

function f2() {
  "use strict"; // consultar modo estricto
  return this;
}

f2() === undefined;

En modo estricto, el valor de this se mantiene en lo que est establecida al entrar en el contexto de ejecucin. Si no est definido, permanece undefined. Tambin se puede ajustar a cualquier valor, tales como null o 42 o "Yo no soy this".

Como un mtodo de un objeto

Cuando una funcin es llamada como un mtodo de un objeto, el this cambia por el metodo del objeto llamado.

En el siguiente ejemplo, cuando o.f() es invocado, dentro de la funcin this es ligado al objeto o.

var o = {
  prop: 37,
  f: function () {
    return this.prop;
  },
};

console.log(o.f()); // logs 37

Note que el comportamiento no es del todo afectado por cmo o dnde la funcin fue definida. En el ejemplo anterior, nosotros definimos la funcin en lnea como el elemento f durante la definicin de o. Sin embargo, podriamos haber definido con la misma facilidad la primera funcin y luego adjuntarlo a o.f. Hacerlo da como resultado el mismo comportamiento.

var o = { prop: 37 };

function independent() {
  return this.prop;
}

o.f = independent;

console.log(o.f()); // logs 37

Esto demuestra que slo importa que la funcin fue invocada del elemento f de o.

Asimismo, el enlace this slo se ve afectado por la referencia del miembro ms inmediata. En el siguiente ejemplo, cuando invocamos a la funcin, lo llamamos como metodo g del objeto o.b. Esta vez durante la ejecucin, this dentro de la funcin se referir a o.b. El hecho de que el objeto es en s mismo un elemento de o no tiene ninguna consecuencia, la referencia ms inmediata es todo lo que importa.

o.b = { g: independent, prop: 42 };
console.log(o.b.g()); // logs 42

... en la cadena de prototipo

El mismo concepto es vlido para los mtodos definidos en alguna parte de la cadena de prototipo del objeto. Si el mtodo esta sobre una cadena de prototipo del objeto, this se referir al objeto donde est el mtodo de donde fue llamado. Como si ese mtodo estuviera dentro del objeto.

var o = {
  f: function () {
    return this.a + this.b;
  },
};
var p = Object.create(o);
p.a = 1;
p.b = 4;

console.log(p.f()); // 5

En este ejemplo, el objeto asignado a la variable p no tiene su propia propiedad f, esto lo hereda de su prototipo. Pero no importa que la bsqueda de f eventualmente encuentre un elemento con ese nombre en o; la bsqueda comenz como una referencia a p.f, asi this dentro de la funcion toma el valor del objeto referido como p. Es decir, desde que f es llamado como mtodo de p, su this refiere a p. Esto es una interesante caracterstica de la herencia de prototipo de JavaScript.

... o como un getter o setter

Nuevamente, el mismo concepto es vlido cuando una funcin es invocada de un getter o un setter. Una funcin usado como getter o setter tiene su enlace this al objeto desde el cual la propiedad esta siendo establecida u obtenida.

function modulus() {
  return Math.sqrt(this.re * this.re + this.im * this.im);
}

var o = {
  re: 1,
  im: -1,
  get phase() {
    return Math.atan2(this.im, this.re);
  },
};

Object.defineProperty(o, "modulus", {
  get: modulus,
  enumerable: true,
  configurable: true,
});

console.log(o.phase, o.modulus); // logs -0.78 1.4142

Como un constructor

Cuando una funcin es usada como un constructor (con la palabra clave new), su this es enlazado al nuevo objeto en construccin, a menos que la ejecucin de los resultados del constructor en el motor JavaScript encuentren una instruccin de retorno donde el valor de retorno sea un objeto.

/*
 * Los constructores trabajan algo asi:
 *
 * function MyConstructor(){
 *   // El cuerpo del cdigo de la funcin actual va aqu.  Crear las propiedades en |this| como
 *   // se desee mediante la asignacin a los mismos.  E.g.,
 *   this.fum = "nom";
 *   // etcetera...
 *
 *   // Si la funcin tiene una sentencia de retorno este retorna un objeto,
 *   // este objeto ser el resultado de la expresin |new|.  Por otro lado, el
 *   // resultado de la expresin es el objeto actualmente enlazado a |this|
 *   // (i.e., el caso ms comn suele verse).
 * }
 */

function C() {
  this.a = 37;
}

var o = new C();
console.log(o.a); // logs 37

function C2() {
  this.a = 37;
  return { a: 38 };
}

o = new C2();
console.log(o.a); // logs 38

En el ltimo ejemplo (C2), debido a que un objeto fue devuelto durante la construccin, el nuevo objeto que fue enlazado a this simplemente se descarta.( Esto esencialmente hace de la declaracin "this.a = 37;" codigo muerto. No esta exactamente muerto,porque es ejecutado pero se puede eliminar sin efectos externos.)

call y apply

Cuando una funcin usa la plabra clave this en su cuerpo, su valor puede ser enlazado a un objeto particular durante la ejecucin del mtodo call() or apply() que todas las funciones hereden de Function.prototype.

function add(c, d) {
  return this.a + this.b + c + d;
}

var o = { a: 1, b: 3 };

// El primer parmetro es el objeto a usar como 'this', parmetros posteriores se pasan como argumentos
// en la llamada a la funcin
add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16

//El primer parmetro es el objeto a usar como 'this''this', la segunda es una matriz cuyos elementos
//  se utilizan como argumentos en la llamada a la funcin
add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34

Funciones enlazadas

ECMAScript 5 introduce Function.prototype.bind(). Llamando a f.bind(someObject) crea una nueva funcin con el mismo cuerpo y alcance de f, pero donde this se produce en la funcin original, en la nueva funcin esto esta permanentemente ligado al primer argumento de bind, independientemente de cmo la funcin est siendo utilizada.

function f() {
  return this.a;
}

var g = f.bind({ a: "azerty" });
console.log(g()); // azerty

var o = { a: 37, f: f, g: g };
console.log(o.f(), o.g()); // 37, azerty

Como un controlador de eventos DOM

Cuando una funcin es usada como un controlador de eventos, su this es cambiado desde el elemento del evento disparado (algunos navegadores no siguen esta convencin para los listeners agregados dinmicamente con otros mtodos addEventListener).

// Cuando se llama como un listener, convierte en azul el elemento
// relacionado
function bluify(e) {
  console.log(this === e.currentTarget); // Siempre true
  console.log(this === e.target); // true cuando currentTarget y target son el mismo objeto
  this.style.backgroundColor = "#A5D9F3";
}

// Consigue una lista de cada elemento en un documento
var elements = document.getElementsByTagName("*");

// Aade bluify como un click listener asi cuando se hace click sobre el elemento,
// este cambia a azul
for (var i = 0; i < elements.length; i++) {
  elements[i].addEventListener("click", bluify, false);
}