Neste tutorial, você aprenderá sobre a função de seta do JavaScript com a ajuda de exemplos.
A função de seta é um dos recursos introduzidos na versão ES6 do JavaScript. Ele permite que você crie funções de uma forma mais limpa em comparação com as funções normais. Por exemplo,
esta função
// function expression let x = function(x, y) ( return x * y; )
pode ser escrito como
// using arrow functions let x = (x, y) => x * y;
usando uma função de seta.
Sintaxe da função de seta
A sintaxe da função de seta é:
let myFunction = (arg1, arg2,… argN) => ( statement(s) )
Aqui,
myFunctioné o nome da funçãoarg1, arg2,… argNsão os argumentos da funçãostatement(s)é o corpo da função
Se o corpo tiver uma única instrução ou expressão, você pode escrever a função de seta como:
let myFunction = (arg1, arg2,… argN) => expression
Exemplo 1: função de seta sem argumento
Se uma função não aceita nenhum argumento, você deve usar parênteses vazios. Por exemplo,
let greet = () => console.log('Hello'); greet(); // Hello
Exemplo 2: função de seta com um argumento
Se uma função tiver apenas um argumento, você pode omitir os parênteses. Por exemplo,
let greet = x => console.log(x); greet('Hello'); // Hello
Exemplo 3: Função de seta como uma expressão
Você também pode criar uma função dinamicamente e usá-la como uma expressão. Por exemplo,
let age = 5; let welcome = (age console.log('Baby') : () => console.log('Adult'); welcome(); // Baby
Exemplo 4: Funções de seta multilinha
Se o corpo de uma função tiver várias instruções, você precisará colocá-las entre chaves (). Por exemplo,
let sum = (a, b) => ( let result = a + b; return result; ) let result1 = sum(5,7); console.log(result1); // 12
isso com função de seta
Dentro de uma função regular, esta palavra-chave se refere à função onde é chamada.
No entanto, thisnão está associado às funções de seta. A função de seta não tem função própria this. Portanto, sempre que você chama this, ele se refere ao seu escopo pai. Por exemplo,
Dentro de uma função regular
function Person() ( this.name = 'Jack', this.age = 25, this.sayName = function () ( // this is accessible console.log(this.age); function innerFunc() ( // this refers to the global object console.log(this.age); console.log(this); ) innerFunc(); ) ) let x = new Person(); x.sayName();
Resultado
25 janela indefinida ()
Aqui, this.agedentro this.sayName()é acessível porque this.sayName()é o método de um objeto.
No entanto, innerFunc()é uma função normal e this.agenão está acessível porque thisse refere ao objeto global (objeto Window no navegador). Portanto, this.agedentro da innerFunc()função dá undefined.
Dentro de uma função de seta
function Person() ( this.name = 'Jack', this.age = 25, this.sayName = function () ( console.log(this.age); let innerFunc = () => ( console.log(this.age); ) innerFunc(); ) ) const x = new Person(); x.sayName();
Resultado
25 25
Aqui, a innerFunc()função é definida usando a função de seta. E dentro da função de seta, thisrefere-se ao escopo do pai. Portanto, this.agedá 25 .
Vinculação de argumentos
Funções regulares têm ligação de argumentos. É por isso que, ao passar argumentos para uma função regular, você pode acessá-los usando a argumentspalavra - chave. Por exemplo,
let x = function () ( console.log(arguments); ) x(4,6,7); // Arguments (4, 6, 7)
As funções de seta não têm ligação de argumentos.
Quando você tentar acessar um argumento usando a função de seta, ocorrerá um erro. Por exemplo,
let x = () => ( console.log(arguments); ) x(4,6,7); // ReferenceError: Can't find variable: arguments
Para resolver esse problema, você pode usar a sintaxe de propagação. Por exemplo,
let x = (… n) => ( console.log(n); ) x(4,6,7); // (4, 6, 7)
Função de seta com promessas e chamadas de retorno
As funções de seta fornecem uma sintaxe melhor para escrever promessas e retornos de chamada. Por exemplo,
// ES5 asyncFunction().then(function() ( return asyncFunction1(); )).then(function() ( return asyncFunction2(); )).then(function() ( finish; ));
pode ser escrito como
// ES6 asyncFunction() .then(() => asyncFunction1()) .then(() => asyncFunction2()) .then(() => finish);
Coisas que você deve evitar com funções de seta
1. Você não deve usar funções de seta para criar métodos dentro de objetos.
let person = ( name: 'Jack', age: 25, sayName: () => ( // this refers to the global… // console.log(this.age); ) ) person.sayName(); // undefined
2. Você não pode usar uma função de seta como construtor . Por exemplo,
let Foo = () => (); let foo = new Foo(); // TypeError: Foo is not a constructor
Nota : As funções de seta foram introduzidas no ES6 . Alguns navegadores podem não suportar o uso de funções de seta. Visite o suporte da função JavaScript Arrow para saber mais.
