Saiba mais sobre o “this” utilizado javascript

0

Conheça mais sobre a palavra reservada this e entenda como funciona o escopo de um objeto JavaScript.

O operador this é um dos maiores responsáveis por erros e pegadinhas em um código JavaScript. Entender o seu mecanismo de funcionamento e criação é um grande passo para tirar maior proveito da linguagem.

Contexto de execução

Toda função JavaScript, ao ser executada, gera uma associação do objeto criado pelo interpretador através da palavra reservada this. A especificação da ECMAScript chama isso de ThisBinding, um evento que acontece toda vez que um código JavaScript é executado e um novo contexto de execução é estabelecido. O valor do this é constante e ele existe enquanto este contexto de execução existir.

No browser, o this “padrão” referencia o objeto global window. Toda função declarada no escopo global também vai possuir o objeto window como valor do this (no strict mode vai ser undefined).

  1. function myFunc () {
  2. console.log(this);
  3. }
  4.  
  5. var myFunc2 = function () {
  6. console.log(this);
  7. }
  8.  
  9. myFunc(); // Window (…)
  10. myFunc2(); // Window (…)

Objetos

Quando uma função representa um método de um objeto, o valor do this passa a ser o objeto referenciado. Por exemplo:

  1. var myObj = {
  2. init: function () {
  3. console.log(this);
  4. }
  5. };
  6.  
  7. myObj.init(); // Object {init: function}

O mesmo acontece quando um objeto é criado utilizando uma função construtora, só que nesse caso o this representa o objeto instanciado.

  1. function MyObj () {
  2. console.log(this);
  3. }
  4.  
  5. var obj = new MyObj(); // MyObj {}

Callbacks & Eventos

Um dos erros mais comuns acontece quando utilizamos a palavra reservada this dentro de um callback e confundimos seu valor. O this dentro do callback vai guardar o valor do objeto pai da função callback e não da função que recebe o callback.

  1. var myObj = {
  2. init: function (callback) {
  3. callback();
  4. }
  5. };
  6.  
  7. myObj.init(function () {
  8. console.log(this); // Window (…)
  9. });

Para esses casos especiais, podemos definir o valor do this utilizando os métodos call e apply (falo mais sobre eles logo, logo).

Outro ponto que merece atenção é o uso do this na hora de anexar eventos a um elemento. Nesse caso, o valor da palavra reservada representa o elemento e não a função.

  1. var myObj = {
  2. init: function () {
  3. this.link = document.querySelector(‘a’);
  4. this.link.onclick = function (e) {
  5. console.log(this);
  6. };
  7. }
  8. };
  9.  
  10. myObj.init();
  11. // clique no link: <a href=”#”>link</a>

Aqui a solução é armazenar o estado do objeto em uma variável, normalmente chamada de that ou self e utilizá-la na função do evento.

  1. var myObj = {
  2. init: function () {
  3. var that = this;
  4. this.link = document.querySelector(‘a’);
  5. this.link.onclick = function (e) {
  6. console.log(that);
  7. };
  8. }
  9. };
  10.  
  11. myObj.init();
  12. // clique no link: Object {init: function, link: a}

call & apply

Os métodos call e apply permitem que seja definido um valor para o this de uma função. Vejamos o nosso exemplo de callback, agora utilizando uma chamada com o método call:

  1. var myObj = {
  2. init: function (callback) {
  3. callback.call(this);
  4. }
  5. };
  6.  
  7. myObj.init(function () {
  8. console.log(this); // Object {init: function}
  9. });

Notem que o valor retornado pelo log do console agora foi o próprio objeto ao invés do objeto global window. Isto porque executamos o callback através do método call, definindo o valor do this no contexto de execução como sendo o this do objeto.

Sobre os métodos call e apply, a principal diferença entre eles é que um permite a passagem de argumentos utilizando um array enquanto o outro aceita os argumentos como strings:

  1. fun.apply(thisArg[, argsArray])
  2.  
  3. fun.call(thisArg[, arg1[, arg2[, …]]])

Referências

Compartilhe.