67 lines
2.4 KiB
Markdown
67 lines
2.4 KiB
Markdown
---
|
||
title: Arrow Functions
|
||
localeTitle: Стрелочные функции
|
||
---
|
||
Стрелочные функции - новый синтаксис ES6 для написания функций JavaScript. Более короткий синтаксис экономит время, а также упрощает область видимости функции.
|
||
|
||
## Что такое стрелочные функции?
|
||
|
||
Стрелочные функции — более краткий синтаксис для написания функций с использованием стрелки ( `=>` ).
|
||
|
||
### Основной синтаксис
|
||
|
||
Ниже приведен базовый пример стрелочной функции:
|
||
|
||
```javascript
|
||
// синтаксис в ES5
|
||
var multiply = function(x, y) {
|
||
return x * y;
|
||
};
|
||
|
||
// стрелочные функции в ES6
|
||
var multiply = (x, y) => { return x * y; };
|
||
|
||
// или еще проще
|
||
var multiply = (x, y) => x * y;
|
||
```
|
||
|
||
Вам больше не нужны ключевые слова `function`, `return` и даже фигурные скобки.
|
||
|
||
### Упрощение `this`
|
||
|
||
До появления стрелочных функций, функции имели собственное значение `this`. Чтобы использовать `this` традиционным способом, мы вынуждены прибегнуть к данному приёму:
|
||
|
||
```javascript
|
||
// синтаксис ES5
|
||
function Person() {
|
||
// мы привязываем `this` к переменной `self`, которую можно использовать позже
|
||
var self = this;
|
||
self.age = 0;
|
||
|
||
setInterval(function growUp() {
|
||
// `self` ссылается на нужный нам объект
|
||
self.age++;
|
||
}, 1000);
|
||
}
|
||
```
|
||
|
||
Стрелочная функция не определяет своего собственного значения `this`, а наследует `this` от родительской функции:
|
||
|
||
```javascript
|
||
// синтаксис ES6
|
||
function Person(){
|
||
this.age = 0;
|
||
|
||
setInterval(() => {
|
||
// `this` теперь ссылается на объект Person, отлично!
|
||
this.age++;
|
||
}, 1000);
|
||
}
|
||
|
||
var p = new Person();
|
||
```
|
||
|
||
#### Дополнительные материалы
|
||
|
||
[Ссылка на MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions)
|