3

No snippet que preparei abaixo, tenho uma tabela com alguns dados simples. Abaixo da tabela, há duas labels que contabilizam a idade total dos dados na tabela. A primeira label é calculada usando uma função anônima comum, a segunda, é usando uma arrow function.

Percebi, que na arrow function, o this é Window, e não o objeto que chamou a função, como no outro caso. Devido a isso, a soma na label resulta em NaN (Not a Number)

Lendo a documentação, cheguei ao conceito de this léxico, mas a partir daí já não entendi mais nada. Como poderia contornar a situação para que a arrow function funcione da maneira que eu esperava nesses casos?

window.onload = function (){
  atualizaSomaIdades();
  atualizaSomaIdadesArrowFunction();
}

$('.excluir').click(function (){
  $(this).parent().parent().remove();
  atualizaSomaIdades();
  atualizaSomaIdadesArrowFunction();
});

function atualizaSomaIdades(){
  var total = 0;
  var rows = $('table').find('tbody').find('tr');
  rows.each(function () {
      total += parseInt($(this).find('td').eq(1).text());
  });
  $('#idade-comum').text(total);
}

function atualizaSomaIdadesArrowFunction(){
  var total = 0;
  var rows = $('table').find('tbody').find('tr');
  rows.each(() => {
    total += parseInt($(this).find('td').eq(1).text());
  });
  $('#idade-arrow-function').text(total);

}
td{
  border: 1px solid black;
}

.negrito{
  font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
  <tr>
    <td>Nome</td>
    <td>Idade</td>
    <td>Ações</td>
  </tr>
</thead>
<tbody>
  <tr>
    <td>
      João
    </td>
    <td>
      25
    </td>
    <td>
      <button class="excluir">Remover</button>
    </td>
  </tr>
  <tr>
    <td>
      Carlos
    </td>
    <td>
      16
    </td>
    <td>
      <button class="excluir">Remover</button>
    </td>
  </tr>
  <tr>
    <td>
      Artur
    </td>
    <td>
      21
    </td>
    <td>
      <button class="excluir">Remover</button>
    </td>
  </tr>
</tbody>
</table>

<span class="negrito">Total de idade:</span>
<span id="idade-comum"></span>
<span id="idade-arrow-function"></span>

3 Respostas 3

1

O this léxico na arrow function é muito útil quando se trabalha orientado a objeto no javascript (com classes por exemplo). O exemplo da MDN é bem prático:

function Pessoa(){
  this.idade = 0;

  setInterval(() => {
    this.idade++; // |this| corretamente referência ao objeto Pessoa
  }, 1000);
}

var p = new Pessoa();

Para o seu caso, para que this não pegue um contexto mais global mas sim o local da função, você pode indicar o elemento alterando dessa forma:

rows.each((index,elemento) => {

Exemplo

window.onload = function (){
  atualizaSomaIdades();
  atualizaSomaIdadesArrowFunction();
}

$('.excluir').click(function (){
  $(this).parent().parent().remove();
  atualizaSomaIdades();
  atualizaSomaIdadesArrowFunction();
});

function atualizaSomaIdades(){
  var total = 0;
  var rows = $('table').find('tbody').find('tr');
  rows.each(function () {
      total += parseInt($(this).find('td').eq(1).text());
  });
  $('#idade-comum').text(total);
}

function atualizaSomaIdadesArrowFunction(){
  var total = 0;
  var rows = $('table').find('tbody').find('tr');
  rows.each((index,elemento) => {
    total += parseInt($(elemento).find('td').eq(1).text());
  });
  $('#idade-arrow-function').text(total);

}
td{
  border: 1px solid black;
}

.negrito{
  font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
  <tr>
    <td>Nome</td>
    <td>Idade</td>
    <td>Ações</td>
  </tr>
</thead>
<tbody>
  <tr>
    <td>
      João
    </td>
    <td>
      25
    </td>
    <td>
      <button class="excluir">Remover</button>
    </td>
  </tr>
  <tr>
    <td>
      Carlos
    </td>
    <td>
      16
    </td>
    <td>
      <button class="excluir">Remover</button>
    </td>
  </tr>
  <tr>
    <td>
      Artur
    </td>
    <td>
      21
    </td>
    <td>
      <button class="excluir">Remover</button>
    </td>
  </tr>
</tbody>
</table>

<span class="negrito">Total de idade:</span>
<span id="idade-comum"></span>
<span id="idade-arrow-function"></span>

0

Adicionando às respostas anteriores, você pode usar o método bind para determinar o contexto de this para funções:

rows.each((() => { total += parseInt($(this).find('td').eq(1).text()); }).bind(this));

Doc no Mozilla

O método bind recebe como primeiro argumento um objeto chamado thisArg, que é o contexto para as chamadas de this dentro desta função. Assim, colocando .bind(this) em uma arrow function faz com que todos os this internos sejam iguais ao this externo do escopo dessa função.

0

Você deve usar o conceito de closures para obter uma referência direta ao thisdo contexto externo à sua arrow function.

Basta capturar o this em uma variável e utilizar essa variável dentro da arrow function.

const self = this
rows.each(() => {
  total += parseInt($(self).find('td').eq(1).text());
});

Ou você pode usar uma function normal, que você mesmo viu que captura o this automaticamente.

Caso você queria aprender mais sobre closures:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .