freeCodeCamp/guide/russian/javascript/arrow-functions/index.md

78 lines
2.4 KiB
Markdown
Raw Normal View History

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