Skip to content

Commit 63deea2

Browse files
authored
Proxy and Reflect (#245)
1 parent 81a6898 commit 63deea2

File tree

9 files changed

+361
-361
lines changed

9 files changed

+361
-361
lines changed

1-js/99-js-misc/01-proxy/01-error-nonexisting/solution.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,14 @@ function wrap(target) {
1010
if (prop in target) {
1111
return Reflect.get(target, prop, receiver);
1212
} else {
13-
throw new ReferenceError(`Property doesn't exist: "${prop}"`)
13+
throw new ReferenceError(`Властивість не існує: "${prop}"`)
1414
}
1515
}
1616
});
1717
}
1818

1919
user = wrap(user);
2020

21-
alert(user.name); // John
22-
alert(user.age); // ReferenceError: Property doesn't exist: "age"
21+
alert(user.name); // Іван
22+
alert(user.age); // ReferenceError: Властивість не існує: "age"
2323
```
Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,32 @@
1-
# Error on reading non-existent property
1+
# Помилка під час зчитування неіснуючої властивості
22

3-
Usually, an attempt to read a non-existent property returns `undefined`.
3+
Зазвичай при спробі прочитати неіснуючу властивість повертається `undefined`.
44

5-
Create a proxy that throws an error for an attempt to read of a non-existent property instead.
5+
Створіть проксі, що видає помилку при спробі зчитування неіснуючої властивості.
66

7-
That can help to detect programming mistakes early.
7+
Це може допомогти виявити помилки програмування раніше.
88

9-
Write a function `wrap(target)` that takes an object `target` and return a proxy that adds this functionality aspect.
9+
Напишіть функцію `wrap(target)`, яка приймає об’єкт `target` і повертає проксі, що додає цей аспект функціональності.
1010

11-
That's how it should work:
11+
Ось як це має працювати:
1212

1313
```js
1414
let user = {
15-
name: "John"
15+
name: "Іван"
1616
};
1717

1818
function wrap(target) {
1919
return new Proxy(target, {
2020
*!*
21-
/* your code */
21+
/* ваш код */
2222
*/!*
2323
});
2424
}
2525

2626
user = wrap(user);
2727

28-
alert(user.name); // John
28+
alert(user.name); // Іван
2929
*!*
30-
alert(user.age); // ReferenceError: Property doesn't exist: "age"
30+
alert(user.age); // ReferenceError: Властивість не існує: "age"
3131
*/!*
3232
```

1-js/99-js-misc/01-proxy/02-array-negative/solution.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ let array = [1, 2, 3];
55
array = new Proxy(array, {
66
get(target, prop, receiver) {
77
if (prop < 0) {
8-
// even if we access it like arr[1]
9-
// prop is a string, so need to convert it to number
8+
// навіть якщо ми намагаємося отримати доступ як arr[1]
9+
// prop є рядком, тому його потрібно перетворити на число
1010
prop = +prop + target.length;
1111
}
1212
return Reflect.get(target, prop, receiver);
Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,33 @@
11

2-
# Accessing array[-1]
2+
# Доступ до масиву[-1]
33

4-
In some programming languages, we can access array elements using negative indexes, counted from the end.
4+
У деяких мовах програмування ми можемо отримати доступ до елементів масиву за допомогою негативних індексів, відрахованих з кінця.
55

6-
Like this:
6+
Наприклад ось так:
77

88
```js
99
let array = [1, 2, 3];
1010

11-
array[-1]; // 3, the last element
12-
array[-2]; // 2, one step from the end
13-
array[-3]; // 1, two steps from the end
11+
array[-1]; // 3, останній елемент
12+
array[-2]; // 2, за крок від кінця
13+
array[-3]; // 1, за два кроки від кінця
1414
```
1515

16-
In other words, `array[-N]` is the same as `array[array.length - N]`.
16+
Іншими словами, `array[-N]` це те саме, що `array[array.length - N]`.
1717

18-
Create a proxy to implement that behavior.
18+
Створіть проксі для реалізації такої поведінки.
1919

20-
That's how it should work:
20+
Ось як це має працювати:
2121

2222
```js
2323
let array = [1, 2, 3];
2424

2525
array = new Proxy(array, {
26-
/* your code */
26+
/* ваш код */
2727
});
2828

2929
alert( array[-1] ); // 3
3030
alert( array[-2] ); // 2
3131

32-
// Other array functionality should be kept "as is"
32+
// Іншу функціональність масиву слід зберегти "як є"
3333
```
Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,26 @@
1-
The solution consists of two parts:
1+
Рішення складається з двох частин:
22

3-
1. Whenever `.observe(handler)` is called, we need to remember the handler somewhere, to be able to call it later. We can store handlers right in the object, using our symbol as the property key.
4-
2. We need a proxy with `set` trap to call handlers in case of any change.
3+
1. Щоразу, коли викликається `.observe(handler)`, нам потрібно десь запам’ятати обробник, щоб мати можливість викликати його пізніше. Ми можемо зберігати обробники прямо в об’єкті, використовуючи наш символ як ключ властивості.
4+
2. Нам потрібен проксі з пасткою `set` для виклику обробників у разі будь-яких змін.
55

66
```js run
77
let handlers = Symbol('handlers');
88

99
function makeObservable(target) {
10-
// 1. Initialize handlers store
10+
// 1. Ініціалізуємо сховище обробників
1111
target[handlers] = [];
1212

13-
// Store the handler function in array for future calls
13+
// Збережемо функцію-обробник в масиві для майбутніх викликів
1414
target.observe = function(handler) {
1515
this[handlers].push(handler);
1616
};
1717

18-
// 2. Create a proxy to handle changes
18+
// 2. Створимо проксі для обробки змін
1919
return new Proxy(target, {
2020
set(target, property, value, receiver) {
21-
let success = Reflect.set(...arguments); // forward the operation to object
22-
if (success) { // if there were no error while setting the property
23-
// call all handlers
21+
let success = Reflect.set(...arguments); // перенаправимо операцію на об’єкт
22+
if (success) { // якщо під час запису властивості не було помилок
23+
// викличемо всі обробники
2424
target[handlers].forEach(handler => handler(property, value));
2525
}
2626
return success;
@@ -36,5 +36,5 @@ user.observe((key, value) => {
3636
alert(`SET ${key}=${value}`);
3737
});
3838

39-
user.name = "John";
39+
user.name = "Іван";
4040
```
Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11

22
# Observable
33

4-
Create a function `makeObservable(target)` that "makes the object observable" by returning a proxy.
4+
Створіть функцію `makeObservable(target)`, яка "робить об’єкт доступним для спостереження", повертаючи проксі.
55

6-
Here's how it should work:
6+
Ось як це має працювати:
77

88
```js run
99
function makeObservable(target) {
10-
/* your code */
10+
/* ваш код */
1111
}
1212

1313
let user = {};
@@ -17,11 +17,11 @@ user.observe((key, value) => {
1717
alert(`SET ${key}=${value}`);
1818
});
1919

20-
user.name = "John"; // alerts: SET name=John
20+
user.name = "Іван"; // сповіщає: SET name=Іван
2121
```
2222

23-
In other words, an object returned by `makeObservable` is just like the original one, but also has the method `observe(handler)` that sets `handler` function to be called on any property change.
23+
Іншими словами, об’єкт, повернутий `makeObservable`, такий же, як оригінальний, але також має метод `observe(handler)`, який встановлює функцію `handler` для виклику при будь-якій зміні властивості.
2424

25-
Whenever a property changes, `handler(key, value)` is called with the name and value of the property.
25+
Щоразу, коли властивість змінюється, викликається `handler(key, value)` з назвою та значенням властивості.
2626

27-
P.S. In this task, please only take care about writing to a property. Other operations can be implemented in a similar way.
27+
P.S. У цьому завданні подбайте лише про запис у властивість. Подібним чином можна реалізувати й інші операції.

0 commit comments

Comments
 (0)