Entendiendo This En Javascript

This es una keyword de javascript y tiene un comportamiento diferente en comparación con otros lenguajes de programación, este artículo te ayudará a entenderlo y como utilizarlo.

La clave para entender el comportamiento de this es identificando el contexto donde se utiliza, de acuerdo a esto su valor será definido.

Contexto global

Si this se ejecuta en un contexto global, este hará referencia al objeto window por defecto, por ejemplo.

console.log(this === window); // imprime true

var nombre = 'carlos'

console.log(window.nombre); // imprime carlos 

console.log(this.nombre); // imprime carlos

Contexto de función

En un contexto de función el valor de this hará referencia al objeto que la contiene, si continuamos el código anterior.

function imprimir_nombre() {
	console.log(this.nombre); // una función de ámbito global sigue referenciando al objeto global window
}

imprimir_nombre() // imprime carlos
window.imprimir_nombre() // imprime carlos

Esto puede cambiar en modo estricto, en este modo es obligatorio llamar a la función como propiedad de un objeto sino this será undefined, si repetimos el código anterior el resultado es diferente.

'use strict'

function imprimir_nombre() {
	console.log(this.nombre); // una función de ámbito global sigue referenciando al objeto global window
}

imprimir_nombre() // Error!! imprime undefined
window.imprimir_nombre() // imprime carlos

La función imprimir_nombre puede asignarse a cualquier objeto, de esta manera cambiamos el contexto y this hará referencia al nuevo objeto contenedor, por ejemplo. 

var persona = {nombre : 'maría'}; // creando un objeto que contiene la propiedad nombre

persona.imprimir_nombre = imprimir_nombre; // asignando la función al objeto persona

persona.imprimir_nombre(); // imprime maría, this hace referencia a la propiedad del nuevo objeto

// Es lo mismo qué!!

var persona = {
	nombre : 'maria',
	imprimir_nombre : function(){
		console.log(this.nombre)
	}
}

Para cambiar de un contexto a otro también se puede usar call() y apply(), ambos métodos vincula this con el objeto pasado como primer parámetro.

var persona_2 = { nombre: 'josé' }
var persona_3 = { nombre: 'camila' }

imprimir_nombre.call(persona_2) // imprime josé
imprimir_nombre.apply(persona_3) // imprime camila

Desde ES5 está disponible también el método bind() a diferencia que las dos anteriores este retorna una nueva función con el mismo cuerpo y ámbito que la función original, donde this está fuertemente vinculado al objeto pasado como primer parámetro.

var persona_4 = { nombre: 'luis' }
imprimir_nombre.bind(persona_4)() // imprime luis

Contexto de clase 

En este contexto this hará referencia al objeto que se esté creando con el keyword new, por ejemplo

class Persona{
	
	constructor(nombre,edad){
		this.nombre = nombre
		this.edad = edad
	}

	imprimir_nombre(){
		console.log(`${this.nombre} tiene ${this.edad} años de edad`)
	}
}

var p = new Persona('josé',25) //Creando el objeto
p.imprimir_nombre() //imprime josé tiene 25 años de edad

Contexto del DOM

Otro caso común donde usamos this es cuando manipulamos el DOM a través de una función como controlador de eventos, en estos casos this hará referencia al elemento que está disparando dicho evento, por ejemplo.

function color(e) {
	console.log(this === e.currentTarget);
	console.log(this === e.target);
	this.style.backgroundColor = '#A5D9F3';
}

var elements = document.getElementsByTagName('*');

for (var i = 0; i < elements.length; i++) {
	elements[i].addEventListener('click', color, false);
}

Explicado esto, espero tengas una mejor noción de cómo funciona this, si tienes dudas escríbeme en los comentarios.