JavaScript Arrow Functions

Course recommendation:

Arrow functions were introduced in ES6.

Arrow functions allow us to write shorter functions:

Syntax

Probeer het zelf uit

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

hello = function() {
  After using arrow functions:
}

Probeer het zelf uit

Before:

hello = () => {
  After using arrow functions:
}

Probeer het zelf uit

return "Hello World!"; It has indeed become shorter! If the function has only one statement and it returns a value, you can remove the parentheses and return

Keyword:

Default return value of arrow function:

Probeer het zelf uit

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

This only works if the function has only one statement.

If you have parameters, pass them into the parentheses:

Arrow function with parameters:

Probeer het zelf uit

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

In fact, if there is only one parameter, you can also omit the parentheses:

Arrow function without parentheses:

Probeer het zelf uit

this hello = val => "Hello " + val;

What should we do? this Compared to normal functions, arrow functions have a different handling for

In short, using arrow functions does not have a handling process that is different. this binding.

In normal functions, the keyword this represents the object that calls the function, which can be a window, document, button, or anything else.

For arrow functions,this The keyword always indicates the object that defines the arrow function.

Let's look at two examples to understand the difference.

These two examples both call the method twice, once when the page loads and once when the user clicks the button.

The first example uses a normal function, and the second example uses an arrow function.

The result shows that the first example returns two different objects (window and button), and the second example returns two window objects because the window object is the 'owner' of the function.

example

For normal functions, 'this' refers to the object that calls the function:

// Normal function:
hello = function() {
  document.getElementById("demo").innerHTML += this;
}
// window object roept deze functie aan:
window.addEventListener("load", hello);
// button object roept deze functie aan:
document.getElementById("btn").addEventListener("click", hello);

Probeer het zelf uit

example

used arrow functions, then this Vertegenwoordigt de eigenaar van de functie:

// pijlfunctie:
hello = () => {
  document.getElementById("demo").innerHTML += this;
}
// window object roept deze functie aan:
window.addEventListener("load", hello);
// button object roept deze functie aan:
document.getElementById("btn").addEventListener("click", hello);

Probeer het zelf uit

Onthoud deze verschillen wanneer je functies gebruikt. Soms is het gedrag van reguliere functies precies wat je wilt, en als dat niet het geval is, gebruik dan arrow functies.

Browserondersteuning

De tabel hieronder vermeldt de eerste browserversie die volledig JavaScript arrow functies ondersteunt:

Chrome IE Firefox Safari Opera
Chrome 45 Edge 12 Firefox 22 Safari 10 Opera 32
September 2015 Juli 2015 Mei 2013 September 2016 September 2015