Quando você não deve usar funções de seta

Resumo : neste tutorial você aprenderá quando não deve usar as funções de seta no ES6.

Uma função de seta não possui seu próprio thisvalor e argumentsobjeto. Portanto, você não deve usá-lo como um manipulador de eventos, um método de um objeto literal, um método de protótipo ou quando tiver uma função que usa o argumentsobjeto.

1) Manipuladores de eventos

Suponha que você tenha o seguinte campo de texto de entrada:

<input type="text" name="username" id="username" placeholder="Enter a username">Linguagem de código:  HTML, XML  ( xml )

E você deseja mostrar uma mensagem de saudação quando os usuários digitam seus nomes de usuário. A seguir mostra o <div>elemento que exibirá a mensagem de saudação:

<div id="greeting"></div>Linguagem de código:  HTML, XML  ( xml )

Depois que os usuários digitam seus nomes de usuário, você captura o valor atual da entrada e o atualiza no <div>elemento:

const greeting = document.querySelector('#greeting');
const username = document.querySelector('#username');
username.addEventListener('keyup', () => {
  greeting.textContent = 'Hello ' + this.value;
});Linguagem de código:  JavaScript  ( javascript )

No entanto, ao executar o código, você receberá a seguinte mensagem, independentemente do que digitar:

Hello undefinedLinguagem de código:  JavaScript  ( javascript )

Isso significa que o this.valuemanipulador de eventos sempre retorna undefined.

Conforme mencionado anteriormente, a função de seta não possui thisvalor próprio. Ele usa o thisvalor do escopo lexical envolvente. No exemplo acima, a thisfunção de seta faz referência ao objeto global.

No navegador da web, o objeto global é window. O windowobjeto não possui a valuepropriedade. Portanto, o mecanismo JavaScript adiciona a propriedade value ao windowobjeto e define seus valores como undefined.

Para corrigir esse problema, você precisa usar uma função regular. O thisvalor estará vinculado ao <input>elemento que aciona o evento.

username.addEventListener('keyup', function () {
    input.textContent = 'Hello ' + this.value;
});
Linguagem de código:  JavaScript  ( javascript )

2) Métodos de objeto

Veja o seguinte counterobjeto:

const counter = {
  count: 0,
  next: () => ++this.count,
  current: () => this.count
};Linguagem de código:  JavaScript  ( javascript )

O counterobjeto possui dois métodos: current()e next(). O current()método retorna o valor do contador atual e o next()método retorna o próximo valor do contador.

O seguinte mostra o próximo valor do contador que deve ser 1:

console.log(counter.next());Linguagem de código:  CSS  ( css )

Porém, ele retorna NaN.

A razão é que quando você usa a função de seta dentro do objeto, ela herda o thisvalor do escopo léxico envolvente, que é o escopo global neste exemplo.

O this.countinterior do next()método é equivalente ao window.count(no navegador).

O window.counté undefinedpor padrão porque o windowobjeto não possui a countpropriedade. O next()método adiciona um ao undefinedque resulta em NaN.

Para corrigir isso, você usa funções regulares como método de um objeto literal da seguinte maneira:

const counter = {
    count: 0,
    next() {
        return ++this.count;
    },
    current() {
        return this.count;
    }
};Linguagem de código:  JavaScript  ( javascript )

Agora, chamar o next()método retornará um conforme esperado:

console.log(counter.next()); // 1Linguagem de código:  JavaScript  ( javascript )

3) Métodos de protótipo

Veja o seguinte Counterobjeto que utiliza o prototypepadrão:

function Counter() {
    this.count = 0;
}

Counter.prototype.next = () => {
    return this.count;
};

Counter.prototype.current = () => {
    return ++this.next;
}Linguagem de código:  JavaScript  ( javascript )

O thisvalor nestes métodos next()e current()faz referência ao objeto global. Como você deseja que o thisvalor dentro dos métodos faça referência ao Counterobjeto, você precisa usar as funções regulares:

function Counter() {
    this.count = 0;
}

Counter.prototype.next = function () {
    return this.count;
};

Counter.prototype.current = function () {
    return ++this.next;
}
Linguagem de código:  JavaScript  ( javascript )

4) Funções que usam o objeto de argumentos

As funções de seta não possuem o argumentsobjeto. Portanto, se você tiver uma função que usa argumentsobjeto, não poderá usar a função de seta.

Por exemplo, a seguinte concat()função não funcionará:

const concat = (separator) => {
    let args = Array.prototype.slice.call(arguments, 1);
    return args.join(separator);
}Linguagem de código:  JavaScript  ( javascript )

Em vez disso, você usa uma função regular como esta:

function concat(separator) {
    let args = Array.prototype.slice.call(arguments, 1);
    return args.join(separator);
}Linguagem de código:  JavaScript  ( javascript )

Resumo

Uma função de seta não possui thisvalor próprio. Em vez disso, ele usa o thisvalor do escopo lexical envolvente. Uma função de seta também não possui o argumentsobjeto.
Evite usar a função de seta para manipuladores de eventos, métodos de objeto, métodos de protótipo e funções que usam o argumentsobjeto.