Funções de seta foram introduzidas no ES6.
As funções de seta nos permitem escrever uma sintaxe de função mais curta:
let myFunction = (a, b) => a * b;Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>The Arrow Function</h2>
<p>This example shows the syntax of an Arrow Function, and how to use it.</p>
<p id="demo"></p>
<script>
let myFunction = (a, b) => a * b;
document.getElementById("demo").innerHTML = myFunction(4, 5);
</script>
</body>
</html>
hello = function() {
return "Hello World!";
}Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<p>This example shows the syntax of a function, without the use of arrow function syntax.</p>
<p id="demo"></p>
<script>
let hello = "";
hello = function() {
return "Hello World!";
}
document.getElementById("demo").innerHTML = hello();
</script>
</body>
</html>
hello = () => {
return "Hello World!";
}Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>The Arrow Function</h2>
<p>This example shows the syntax of an Arrow Function, and how to use it.</p>
<p id="demo"></p>
<script>
let hello = "";
hello = () => {
return "Hello World!";
}
document.getElementById("demo").innerHTML = hello();
</script>
</body>
</html>
Fica mais curto! Se a função tiver apenas uma instrução, e a instrução retorna um valor, você pode remover os colchetes e o Palavra-chave return:
hello = () => "Hello World!";Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>The Arrow Function</h2>
<p>This example shows an Arrow Function without the brackets or the return keyword.</p>
<p id="demo"></p>
<script>
let hello = "";
hello = () => "Hello World!";
document.getElementById("demo").innerHTML = hello();
</script>
</body>
</html>
Nota: Isto funciona apenas se a função tiver apenas um declaração.
Se você tiver parâmetros, passe-os entre parênteses:
hello = (val) => "Hello " + val;Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>The Arrow Function</h2>
<p>This example shows an Arrow Function with a parameter.</p>
<p id="demo"></p>
<script>
let hello = "";
hello = (val) => "Hello " + val;
document.getElementById("demo").innerHTML = hello("Universe!");
</script>
</body>
</html>
Na verdade, se você tiver apenas um parâmetro, também poderá pular os parênteses:
hello = val => "Hello " + val;Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>The Arrow Function</h2>
<p>This example shows that if you have only one parameter in an Arrow Function, you can skip the parentheses.</p>
<p id="demo"></p>
<script>
let hello = "";
hello = val => "Hello " + val;
document.getElementById("demo").innerHTML = hello("Universe!");
</script>
</body>
</html>
isto?O tratamento de this também é diferente nas funções de seta em comparação com as normais funções.
Resumindo, com funções de seta não há ligação de isto.
Em funções regulares, a palavra-chave this representava o objeto que chamou o função, que pode ser a janela, o documento, um botão ou qualquer outra coisa.
Com funções de seta, esta palavra-chave sempre representa o objetar que definiu a função de seta.
Vamos dar uma olhada em dois exemplos para entender a diferença.
Ambos os exemplos chamam um método duas vezes, primeiro quando a página carrega e mais uma vez quando o usuário clica em um botão.
O primeiro exemplo usa uma função regular e o segundo exemplo usa uma função de seta.
O resultado mostra que o primeiro exemplo retorna dois objetos diferentes (janela e botão), e a segundo exemplo retorna o objeto window duas vezes, porque o objeto window é o "proprietário" da função.
Com uma função regular isso representa o objeto que chama a função:
// Regular Function:
hello = function() {
document.getElementById("demo").innerHTML
+= this;
}
// The window object calls the function:
window.addEventListener("load", hello);
// A button object calls the
function:
document.getElementById("btn").addEventListener("click", hello);Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript "this"</h1>
<p>This example demonstrate that in a regular function, the "this" keyword represents different objects depending on how the function was called.</p>
<p>Click the button to execute the "hello" function again, and you will see that this time "this" represents the button object.</p>
<button id="btn">Click Me!</button>
<p id="demo"></p>
<script>
let hello = "";
hello = function() {
document.getElementById("demo").innerHTML += this;
}
//The window object calls the function:
window.addEventListener("load", hello);
//A button object calls the function:
document.getElementById("btn").addEventListener("click", hello);
</script>
</body>
</html>
Com uma função de seta isso representa o proprietário da função:
// Arrow Function:
hello = () => {
document.getElementById("demo").innerHTML
+= this;
}
// The window object calls the function:
window.addEventListener("load", hello);
// A button object calls the
function:
document.getElementById("btn").addEventListener("click", hello);Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript "this"</h1>
<p>This example demonstrate that in Arrow Functions, the "this" keyword represents the object that owns the function, no matter who calls the function.</p>
<p>Click the button to execute the "hello" function again, and you will see that "this" still represents the window object.</p>
<button id="btn">Click Me!</button>
<p id="demo"></p>
<script>
let hello = "";
hello = () => {
document.getElementById("demo").innerHTML += this;
}
//The window object calls the function:
window.addEventListener("load", hello);
//A button object calls the function:
document.getElementById("btn").addEventListener("click", hello);
</script>
</body>
</html>
Lembre-se dessas diferenças quando estiver trabalhando com funções. Às vezes o o comportamento das funções regulares é o que você deseja; caso contrário, use as funções de seta.
A tabela a seguir define as primeiras versões de navegadores com suporte total para Funções de seta em JavaScript:
| Chrome 45 | Edge 12 | Firefox 22 | Safari 10 | Opera 32 |
| Sep, 2015 | Jul, 2015 | May, 2013 | Sep, 2016 | Sep, 2015 |