Funções Arrow JavaScript

As funções de seta foram introduzidas no ES6.

As funções de seta nos permitem escrever funções mais curtas:

Sintaxe

let myFunction = (a, b) => a * b;

Experimente você mesmo

Antes:

hello = function() {
  return "Hello World!";
}

Experimente você mesmo

Depois de usar a função de seta:

hello = () => {
  return "Hello World!";
}

Experimente você mesmo

De fato, se a função tiver apenas uma linha de código e essa linha retornar um valor, você pode omitir os parênteses e return Palavra-chave:

Retorno padrão da função de seta:

hello = () => "Hello World!";

Experimente você mesmo

Comentário:Isso só é válido quando a função tem apenas uma linha de código.

Se você tiver parâmetros, passe-os para dentro dos parênteses:

Função de seta com parâmetros:

hello = (val) => "Hello " + val;

Experimente você mesmo

Na verdade, se houver apenas um parâmetro, você também pode omitir os parênteses:

Função de seta sem parênteses:

hello = val => "Hello " + val;

Experimente você mesmo

isto O que fazer?

Em comparação com funções convencionais, as funções de seta têm isto o tratamento também é diferente.

Em resumo, usar funções de seta não tem efeitos sobre isto do vínculo.

Em funções convencionais, a palavra-chave isto representa o objeto que chama a função, que pode ser a janela, o documento, o botão ou qualquer outra coisa.

Para funções de seta,isto A palavra-chave sempre representa o objeto que define a função de seta.

Vamos ver dois exemplos para entender as diferenças.

Ambos os exemplos chamaram o método duas vezes, primeiro ao carregar a página e, em seguida, quando o usuário clicou no botão.

O primeiro exemplo usa uma função convencional, enquanto o segundo exemplo usa uma função de seta.

O resultado mostra que o primeiro exemplo retorna dois objetos diferentes (window e button), enquanto o segundo exemplo retorna duas vezes o objeto window, pois o objeto window é o 'proprietário' da função.

instância

Para funções convencionais, this representa o objeto que chama a função:

// Função convencional:
hello = function() {
  document.getElementById("demo").innerHTML += this;
}
// Chama a função pelo objeto window:
window.addEventListener("load", hello);
// Chama a função pelo objeto button:
document.getElementById("btn").addEventListener("click", hello);

Experimente você mesmo

instância

usando funções de seta, então isto Representa o proprietário da função:

// Função de seta:
hello = () => {
  document.getElementById("demo").innerHTML += this;
}
// Chama a função pelo objeto window:
window.addEventListener("load", hello);
// Chama a função pelo objeto button:
document.getElementById("btn").addEventListener("click", hello);

Experimente você mesmo

Lembre-se dessas diferenças ao usar funções. Às vezes, o comportamento da função convencional é exatamente o que você quer, e se não for, use funções de seta.

Suporte do Navegador

A tabela a seguir indica a primeira versão do navegador que suporta completamente os funções de seta JavaScript:

Chrome IE Firefox Safari Opera
Chrome 45 Edge 12 Firefox 22 Safari 10 Opera 32
Setembro de 2015 Julho de 2015 Maio de 2013 Setembro de 2016 Setembro de 2015