Skip to content

Commit

Permalink
update(JS): web/javascript/reference/functions/arrow_functions (#486)
Browse files Browse the repository at this point in the history
* update(JS): web/javascript/reference/functions/arrow_functions

* update(JS): web/javascript/reference/functions/arrow_functions
  • Loading branch information
undead404 authored Jul 24, 2022
1 parent d446e53 commit cece07c
Showing 1 changed file with 16 additions and 13 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -113,6 +113,8 @@ const bob = (a) => a + 100;
Єдиний аргумент. З простим виразом явний `return` не потрібен:

```js
<!-- markdownlint-disable-next-line -->
param => expression;
(param) => expression;
```

Expand All @@ -125,6 +127,7 @@ const bob = (a) => a + 100;
Наявність декількох рядків інструкцій потребує дужок навколо тіла функції та явного `return`:

```js
// Дужки необов'язкові, коли параметр лише один
(param) => {
const a = 1;
return a + param;
Expand All @@ -148,19 +151,19 @@ const bob = (a) => a + 100;
(params) => ({ foo: 'a' }); // повертає об'єкт { foo: "a" }
```

Підтримуються [залишкові параметри](/uk/docs/Web/JavaScript/Reference/Functions/rest_parameters), причому в такому випадку обовязкові дужки:
Підтримуються [залишкові параметри](/uk/docs/Web/JavaScript/Reference/Functions/rest_parameters), причому в такому випадку обов'язкові дужки:

```js
(a, b, ...r) => expression;
```

Підтримуються [усталені параметри](/uk/docs/Web/JavaScript/Reference/Functions/Default_parameters), причому в такому випадку обовязкові дужки:
Підтримуються [усталені параметри](/uk/docs/Web/JavaScript/Reference/Functions/Default_parameters), причому в такому випадку обов'язкові дужки:

```js
(a = 400, b = 20, c) => expression;
```

Підтримується [деструктуризація](/uk/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) всередині параметрів, причому в такому випадку обовязкові дужки:
Підтримується [деструктурування](/uk/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) всередині параметрів, причому в такому випадку обов'язкові дужки:

```js
([a, b] = [10, 20]) => a + b; // результатом є 30
Expand All @@ -185,8 +188,8 @@ const obj = {
},
};

obj.b(); // друкує undefined, Window {...} (або глобальний об'єкт)
obj.c(); // друкує 10, Object {...}
obj.b(); // друкує undefined, Window { /* … */ } (або глобальний об'єкт)
obj.c(); // друкує 10, Object { /* … */ }
```

Стрілкові функції не мають свого власного `this`. Ось іще один приклад, цього разу із застосуванням {{jsxref("Object.defineProperty()")}}:
Expand All @@ -200,13 +203,13 @@ const obj = {

Object.defineProperty(obj, 'b', {
get: () => {
console.log(this.a, typeof this.a, this); // undefined 'undefined' Window {...} (або глобальний об'єкт)
console.log(this.a, typeof this.a, this); // undefined 'undefined' Window { /* … */ } (або глобальний об'єкт)
return this.a + 10; // звертається до глобального об'єкту 'Window', а отже – 'this.a' поверне 'undefined'
},
});
```

Через те, що тіло [класу](/uk/docs/Web/JavaScript/Reference/Classes) має контекст `this`, стрілкові функції як [поля класу](/uk/docs/Web/JavaScript/Reference/Classes/Public_class_fields) замикаються на контекст `this` класу, і `this` всередині тіла стрілкової функції коректно вказуватиме на примірник (чи, для [статичних полів](/uk/docs/Web/JavaScript/Reference/Classes/static), на сам клас). Втім, через те, що це [замикання](/uk/docs/Web/JavaScript/Closures), а не власна привязка функції, значення `this` не змінюватиметься залежно від контексту виконання.
Через те, що тіло [класу](/uk/docs/Web/JavaScript/Reference/Classes) має контекст `this`, стрілкові функції як [поля класу](/uk/docs/Web/JavaScript/Reference/Classes/Public_class_fields) замикаються на контекст `this` класу, і `this` всередині тіла стрілкової функції коректно вказуватиме на примірник (чи, для [статичних полів](/uk/docs/Web/JavaScript/Reference/Classes/static), на сам клас). Втім, через те, що це [замикання](/uk/docs/Web/JavaScript/Closures), а не власна прив'язка функції, значення `this` не змінюватиметься залежно від контексту виконання.

```js
class C {
Expand All @@ -222,7 +225,7 @@ autoBoundMethod(); // 1
// Якби це був звичайний метод, мало б бути undefined
```

Властивості зі стрілковими функціями часто звуть "автоматично привязаними методами", бо еквівалентом зі звичайними методами є:
Властивості зі стрілковими функціями часто звуть "автоматично прив'язаними методами", бо еквівалентом зі звичайними методами є:

```js
class C {
Expand All @@ -236,7 +239,7 @@ class C {
}
```

> **Примітка:** Поля класу визначаються на _примірнику_, не на прототипі, тож кожне створення примірника створить нову функцію та виділить нове замикання, потенційно призводячи до більшого використання памяті, ніж звичайний, непривязаний метод.
> **Примітка:** Поля класу визначаються на _примірнику_, не на прототипі, тож кожне створення примірника створить нову функцію та виділить нове замикання, потенційно призводячи до більшого використання пам'яті, ніж звичайний, неприв'язаний метод.
### Функції `call`, `apply` та `bind`

Expand Down Expand Up @@ -414,7 +417,7 @@ const func2 = (x, y) => {

### Повернення об'єктних літералів

Слід мати на увазі, що повернення об'єктних літералів в скороченому записі тіла функції `params => {object:literal}` не працюватиме так, як очікується.
Слід мати на увазі, що повернення об'єктних літералів в скороченому записі тіла функції `(params) => {object:literal}` не працюватиме так, як очікується.

```js
const func = () => { foo: 1 };
Expand Down Expand Up @@ -494,7 +497,7 @@ simple(10); // 10

const max = (a, b) => (a > b ? a : b);

// Проста фільтрація, перебирання масиву, тощо...
// Прості фільтрування, відображення масиву тощо.

const arr = [5, 6, 13, 0, 1, 18, 23];

Expand All @@ -510,10 +513,10 @@ const double = arr.map((v) => v * 2);
// Більш лаконічні ланцюги промісів
promise
.then((a) => {
// ...
//
})
.then((b) => {
// ...
//
});

// Безпараметрові стрілкові функції, які простіше розібрати візуально
Expand Down

0 comments on commit cece07c

Please sign in to comment.