Si quieres una versión muy simplificada:
this
apunta al contexto. En los manejadores de eventos, this
es el elemento que ha recibido el evento (el botón, el div, el link...). Si llamas a una función como si fuese un método, this
es el objeto. Pero que la función sea declarada como un método no asegura que sea llamada como tal.
Si quieres una versión más larga y "didáctica", con ejemplos:
El comportamiento de this
es un poco especial en Javascript: Indica el contexto en el que está ejecutando el código. Si estás en el contexto global (no estás dentro de ninguna función), this
es window
. Si llamas a una función simplemente usando el nombre de la misma, el contexto se mantiene:
console.log(this===window);
function test() {
console.log(this===window);
if (this!==window) {
console.log(this);
}
}
test();
Pero en modo estricto, el contexto al llamar una función usando su nombre es undefined
:
'use strict';
console.log(this===window);
function test() {
console.log(this===window);
if (this!==window) {
console.log(this);
}
}
test();
Pero si esa función es un atributo de un objeto, entonces this
pasa a ser ese objeto:
function test() {
console.log('Es window?:' + (this===window));
if (this!==window) {
console.log('Es obj?:' + (this===obj));
}
}
console.log('Modo no estricto');
var obj={
prueba: 'hola'
}
test();
console.log('Como método');
obj.metodo=test;
obj.metodo();
Entonces, cuando definimos una función callback podemos tener problemas si no sabemos cuál es el contexto donde se ejecuta la función:
class Contador {
constructor() {
this.count=0;
}
incrementar() {
this.count++;
}
}
let c= new Contador()
c.incrementar();
console.log(c.count)
let funcionInc=c.incrementar;
//falla porque el contexto no es un objeto Contador
funcionInc();
Imagina que tenemos un evento que queremos tratar con nuestro objeto contador:
class Contador {
constructor() {
this.count=0;
}
incrementar() {
if (this.count !== undefined) {
this.count++;
} else {
console.log('No hay count para incrementar!');
}
}
}
let c= new Contador();
$('button').on('click',c.incrementar);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click</button>
Soluciones a este problema hay varias:
Una es "envolver" la ejecución con otra función:
class Contador {
constructor() {
this.count=0;
}
incrementar() {
if (this.count !== undefined) {
this.count++;
console.log(this.count);
} else {
console.log('No hay count para incrementar!');
}
}
}
let c= new Contador();
$('button').on('click',function () {c.incrementar();});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click</button>
Y otra solución es usar bind()
(literalmente atar): permite fijar un contexto a una función, creando una nueva función que se comporta exactamente igual pero que siempre tiene el contexto que le hemos definido:
class Contador {
constructor() {
this.count=0;
}
incrementar() {
if (this.count !== undefined) {
this.count++;
console.log(this.count);
} else {
console.log('No hay count para incrementar!');
}
}
}
let c= new Contador();
//con bind fijamos el contexto
let funcion=c.incrementar.bind(c);
$('button').on('click',funcion);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click</button>
Otra solución es usar una función flecha. Las funciones flecha son un poco especiales, porque asignan el contexto en el momento en el que se definen, no cuando se ejecutan:
class Contador {
constructor() {
this.count = 0;
}
incrementar = () => {
this.count++;
console.log(this.count);
}
}
let c = new Contador();
//no hace falta bind, el contexto se fijó al declarar la función
$('button').on('click',c.incrementar);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click</button>