this

Si has revisado el código de alguna aplicación que esté escrita en JavaScript, es probable que te hayas encontrado con esta palabra.

Al principio utilizarla es complicado porque el valor que puede tener this, cambia según el contexto en el que se encuentra.

Algunos de los contextos donde se puede encontrar son:

• Funciones.

• Métodos de objetos.
• Definición de objetos – clases – que utilizan la palabra “new” para crear instancias – objetos -.
• DOM

Estos contextos pueden ser utilizados en “modo estricto” o en “modo normal” – con modo normal me refiero a no utilizar el modo estricto -.

Alcance global

Si se inspecciona this de manera global – fuera de funciones – el resultado es el objeto global – window – en modo estricto y en modo normal.

<script>
    console.log(this);
// Window {top: Window, window: Window, location: Location, external: Object, chrome: Object…
</script>
<script>
	"use strict";
    console.log(this);
// Window {top: Window, window: Window, location: Location, external: Object, chrome: Object…	
</script>

Funciones

En las funciones el valor de this se ve afectado al utilizar el modo estricto.
En modo estricto su valor va a ser undefined – no definido -.

<script>
	(function() {
        console.log(this);
	}());	
// Window {top: Window, window: Window, location: Location, external: Object, chrome: Object…		
</script>	
<script>
	(function() {
		"use strict";
                console.log(this);
	}());	
// undefined
</script>

Métodos de Objetos

En el caso de los objetos this hace referencia al objeto en el cual fue invocado.

<script>
    var objeto = {
          metodo: function(){
          console.log(this);
        }
      };
      objeto.metodo();
      // Object {metodo: function}
</script>

Aún si se utiliza el modo estricto dentro de un método, o si se genera y utiliza el objeto dentro de una función:

<script>
    var objeto = {
          metodo: function(){
          "use strict";
            console.log(this);
            }
    };

    objeto.metodo();

// Object {metodo: function}

function estricto () {
  "use strict";
  var objeto = {
    metodo: function(){
      console.log(this);
    }
  };

  objeto.metodo();
}
// Object {metodo: function}	
</script>

Creación de objetos con “new”

Cuando se utiliza una función como Clase – o constructor – el valor de this hace referencia al objeto – o instancia – creado.

<script>
  function Clase (){
    this.propiedad = "Propiedad";
    this.metodo = function () {
      console.log(this)
    }
  }
  
var obj = new Clase();
console.log(obj.metodo());

// Clase {propiedad: "Propiedad", metodo: function}

</script>

DOM

En el caso del DOM el uso es similar al de los objetos – los nodos que representan las etiquetas del documento HTML son objetos – el valor de this hace referencia al nodo – objeto – que desencadenó el evento.

<div id='foo'>
  <p>
    Lorem ipsum dolor sit amet...
  </p>
</div>
	
<form>
  <input type='text'>
  <input id='bar' type='button' value='enviar'>
</form>
	
<script>

var foo = document.getElementById('foo');
var bar = document.getElementById('bar');	
	
foo.addEventListener('mouseenter', function () {
  console.log(this);
});
	
// <div id='foo'>...</div>
	
bar.addEventListener('click', function () {
  console.log(this);		
});
	
// <input id='bar' type='button' value='enviar'>

</script>

jQuery

Se puede utilizar de manera similar en un callback de jQuery.

$('#foo').click(function() {
  console.log(this);
});

// <div id="foo">...</div>

Si queremos seguir utilizando el nodo con los métodos y propiedades jQuery tenemos que convertirlo a objeto de jQuery.

/*
Para poder utilizar los métodos / propiedades de jQuery se tiene que convertir el nodo a objeto de jQuery: 
*/

$('#foo').click(function() {
 /* Se utiliza $() para convertir el nodo seleccionado 
    con this a objeto de jQuery */
  console.log($(this));
  $(this).fadeOut();
});

/*
[div#foo, context: div#foo, jquery: "1.11.2", constructor: function, selector: "", toArray: function…]
*/

Ya que conoces un poco más de this lo puedes comenzar a utilizar en tu código.
Puedes descargar los ejemplos de referencia.