60 lines
2.4 KiB
Markdown
60 lines
2.4 KiB
Markdown
---
|
||
sidebar_position: 4
|
||
---
|
||
|
||
# Стрелочные функции
|
||
|
||
Существует ещё один очень простой и лаконичный синтаксис для создания функций, который часто лучше, чем Function Expression.
|
||
|
||
```js
|
||
let sum = (a, b) => a + b;
|
||
```
|
||
|
||
## У стрелочных функций нет «this»
|
||
Если происходит обращение к this, его значение берётся снаружи.
|
||
|
||
❗ ***Стрелочные функции нельзя использовать с new***
|
||
> Отсутствие this естественным образом ведёт к другому ограничению: стрелочные функции не могут быть использованы как конструкторы. Они не могут быть вызваны с new.
|
||
|
||
Стрелочные функции VS bind
|
||
Существует тонкая разница между стрелочной функцией => и обычной функцией, вызванной с .bind(this):
|
||
|
||
- .bind(this) создаёт «связанную версию» функции.
|
||
- Стрелка => ничего не привязывает. У функции просто нет this. При получении значения this – оно, как обычная переменная, берётся из внешнего лексического окружения.
|
||
|
||
## Стрелочные функции не имеют «arguments»
|
||
|
||
Это отлично подходит для декораторов, когда нам нужно пробросить вызов с текущими this и arguments.
|
||
```js
|
||
function defer(f, ms) {
|
||
return function() {
|
||
setTimeout(() => f.apply(this, arguments), ms)
|
||
};
|
||
}
|
||
|
||
function sayHi(who) {
|
||
alert('Hello, ' + who);
|
||
}
|
||
|
||
let sayHiDeferred = defer(sayHi, 2000);
|
||
sayHiDeferred("John"); // выводит "Hello, John" через 2 секунды`
|
||
```
|
||
|
||
То же самое без стрелочной функции выглядело бы так:
|
||
|
||
```js
|
||
function defer(f, ms) {
|
||
return function(...args) {
|
||
let ctx = this;
|
||
setTimeout(function() {
|
||
return f.apply(ctx, args);
|
||
}, ms);
|
||
};
|
||
}
|
||
```
|
||
|
||
#### Стрелочные функции:
|
||
- Не имеют this.
|
||
- Не имеют arguments.
|
||
- Не могут быть вызваны с new.
|
||
- У них также нет super. |