Coleção Filhos do JavaScript | Este artigo

Ao usar o JavaScript, podemos nos perguntar o que essa palavra – chave significa em diferentes cenários.

Você pode começar a usá-lo em um evento de clique de um elemento DOM, talvez usando o padrão de construtor e a lista continua. Então você começa a vê-lo sendo usado em cenários mais avançados, onde isso é alterado nos bastidores.

Estes são os usos do presente você deve estar familiarizado com:

Apontando para o escopo global (janela)

var number = 7;
console.log(this.number === window.number); // true
...
another = 8; // global variable
console.log(this.another === window.another); // true
...
//within a function this is set to window
function Fn() {
  return this;
};
console.log(Fn() === window); // true

Apontando para um literal de objeto

// object scope
var scope = {
    number: 7,
    Fn: function() {
        return this.number; 
    }
};
// this points to scope (not window)
console.log(scope.Fn()); // 7

Apontando para um novo objeto usando nova palavra-chave

//constructor function
function Person(id) {
  //new keyword implicit this = {};
  this.id = id;
  //new keyword implicit return this;
};
//this points to new object
var person = new Person(1);

Apontar para um objeto usando chamar ou aplicar

function Fn(a, b) { return a + b + this; };
// implicit this = 1
console.log(Fn.call(1, 2, 3)); //6
console.log(Fn.apply(1, [2, 3])); //6
//note: if null is passed this = window

Usado em um manipulador de eventos DOM

<!-- this is set to the DOM element -->
<a href="#" class="myclass another" id="1" onclick="alert(this.id + ' ' + this.className)">DOM element</a>

Referência: link de referência do Mozilla JavaScript