Skip to content

Commit 2c49349

Browse files
authored
Merge pull request #206 from otmon76/1.14.1
Proxy and Reflect
2 parents 6b40991 + 2d2a59c commit 2c49349

File tree

10 files changed

+563
-565
lines changed

10 files changed

+563
-565
lines changed
Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,23 @@
11

22
```js run
3-
let user = {
4-
name: "John"
3+
let uživatel = {
4+
jméno: "Jan"
55
};
66

7-
function wrap(target) {
8-
return new Proxy(target, {
9-
get(target, prop, receiver) {
10-
if (prop in target) {
11-
return Reflect.get(target, prop, receiver);
7+
function obal(cíl) {
8+
return new Proxy(cíl, {
9+
get(cíl, vlastnost, příjemce) {
10+
if (vlastnost in cíl) {
11+
return Reflect.get(cíl, vlastnost, příjemce);
1212
} else {
13-
throw new ReferenceError(`Property doesn't exist: "${prop}"`)
13+
throw new ReferenceError(`Vlastnost neexistuje: "${vlastnost}"`)
1414
}
1515
}
1616
});
1717
}
1818

19-
user = wrap(user);
19+
uživatel = obal(uživatel);
2020

21-
alert(user.name); // John
22-
alert(user.age); // ReferenceError: Property doesn't exist: "age"
21+
alert(ivatel.jméno); // Jan
22+
alert(ivatel.věk); // ReferenceError: Vlastnost neexistuje: "věk"
2323
```
Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,32 @@
1-
# Error on reading non-existent property
1+
# Chyba při načítání neexistující vlastnosti
22

3-
Usually, an attempt to read a non-existent property returns `undefined`.
3+
Pokus o načtení neexistující vlastnosti zpravidla vrátí `undefined`.
44

5-
Create a proxy that throws an error for an attempt to read of a non-existent property instead.
5+
Vytvořte proxy, která při pokusu o načtení neexistující vlastnosti místo toho vyvolá chybu.
66

7-
That can help to detect programming mistakes early.
7+
To nám může pomoci dříve detekovat programátorské chyby.
88

9-
Write a function `wrap(target)` that takes an object `target` and return a proxy that adds this functionality aspect.
9+
Napište funkci `obal(cíl)`, která vezme objekt `cíl` a vrátí proxy, která přidá tento funkcionální aspekt.
1010

11-
That's how it should work:
11+
Mělo by to fungovat takto:
1212

1313
```js
14-
let user = {
15-
name: "John"
14+
let uživatel = {
15+
jméno: "Jan"
1616
};
1717

18-
function wrap(target) {
19-
return new Proxy(target, {
18+
function obal(cíl) {
19+
return new Proxy(cíl, {
2020
*!*
21-
/* your code */
21+
/* váš kód */
2222
*/!*
2323
});
2424
}
2525

26-
user = wrap(user);
26+
uživatel = obal(uživatel);
2727

28-
alert(user.name); // John
28+
alert(ivatel.jméno); // Jan
2929
*!*
30-
alert(user.age); // ReferenceError: Property doesn't exist: "age"
30+
alert(ivatel.věk); // ReferenceError: Vlastnost neexistuje: "věk"
3131
*/!*
3232
```
Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11

22
```js run
3-
let array = [1, 2, 3];
3+
let pole = [1, 2, 3];
44

5-
array = new Proxy(array, {
6-
get(target, prop, receiver) {
7-
if (prop < 0) {
8-
// even if we access it like arr[1]
9-
// prop is a string, so need to convert it to number
10-
prop = +prop + target.length;
5+
pole = new Proxy(pole, {
6+
get(cíl, vlastnost, příjemce) {
7+
if (vlastnost < 0) {
8+
// i když k poli přistupujeme přes pole[1],
9+
// vlastnost je řetězec, takže jej musíme konvertovat na číslo
10+
vlastnost = +vlastnost + l.length;
1111
}
12-
return Reflect.get(target, prop, receiver);
12+
return Reflect.get(cíl, vlastnost, příjemce);
1313
}
1414
});
1515

1616

17-
alert(array[-1]); // 3
18-
alert(array[-2]); // 2
17+
alert(pole[-1]); // 3
18+
alert(pole[-2]); // 2
1919
```
Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,33 @@
11

2-
# Accessing array[-1]
2+
# Přístup k poli[-1]
33

4-
In some programming languages, we can access array elements using negative indexes, counted from the end.
4+
V některých programovacích jazycích můžeme přistupovat k prvkům pole pomocí záporných indexů, které se počítají od konce.
55

6-
Like this:
6+
Například:
77

88
```js
9-
let array = [1, 2, 3];
9+
let pole = [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+
pole[-1]; // 3, poslední prvek
12+
pole[-2]; // 2, jeden krok od konce
13+
pole[-3]; // 1, dva kroky od konce
1414
```
1515

16-
In other words, `array[-N]` is the same as `array[array.length - N]`.
16+
Jinými slovy, `pole[-N]` je totéž jako `pole[pole.length - N]`.
1717

18-
Create a proxy to implement that behavior.
18+
Vytvořte proxy, která bude toto chování implementovat.
1919

20-
That's how it should work:
20+
Měla by fungovat takto:
2121

2222
```js
23-
let array = [1, 2, 3];
23+
let pole = [1, 2, 3];
2424

25-
array = new Proxy(array, {
26-
/* your code */
25+
pole = new Proxy(pole, {
26+
/* váš kód */
2727
});
2828

29-
alert( array[-1] ); // 3
30-
alert( array[-2] ); // 2
29+
alert( pole[-1] ); // 3
30+
alert( pole[-2] ); // 2
3131

32-
// Other array functionality should be kept "as is"
32+
// Ostatní funkcionalita pole by měla zůstat nezměněná
3333
```
Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,40 @@
1-
The solution consists of two parts:
1+
Řešení se skládá ze dvou částí:
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. Kdykoli je zavoláno `.pozoruj(handler)`, musíme si handler někde pamatovat, abychom jej mohli volat později. Handlery si můžeme ukládat rovnou do objektu a jako klíč vlastnosti použít náš symbol.
4+
2. Potřebujeme proxy s pastí `set`, která v případě jakékoli změny zavolá handlery.
55

66
```js run
7-
let handlers = Symbol('handlers');
7+
let handlery = Symbol('handlery');
88

9-
function makeObservable(target) {
10-
// 1. Initialize handlers store
11-
target[handlers] = [];
9+
function učiňPozorovatelným(cíl) {
10+
// 1. Inicializace skladu handlerů
11+
cíl[handlery] = [];
1212

13-
// Store the handler function in array for future calls
14-
target.observe = function(handler) {
15-
this[handlers].push(handler);
13+
// Uložíme funkci handleru do pole pro budoucí volání
14+
l.pozoruj = function(handler) {
15+
this[handlery].push(handler);
1616
};
1717

18-
// 2. Create a proxy to handle changes
19-
return new Proxy(target, {
20-
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
24-
target[handlers].forEach(handler => handler(property, value));
18+
// 2. Vytvoříme proxy pro zpracování změn
19+
return new Proxy(cíl, {
20+
set(cíl, vlastnost, hodnota, příjemce) {
21+
let úspěch = Reflect.set(...arguments); // předáme operaci objektu
22+
if (úspěch) { // pokud při nastavování vlastnosti nedošlo k chybě,
23+
// zavoláme všechny handlery
24+
cíl[handlery].forEach(handler => handler(vlastnost, hodnota));
2525
}
26-
return success;
26+
return úspěch;
2727
}
2828
});
2929
}
3030

31-
let user = {};
31+
let uživatel = {};
3232

33-
user = makeObservable(user);
33+
uživatel = učiňPozorovatelným(uživatel);
3434

35-
user.observe((key, value) => {
36-
alert(`SET ${key}=${value}`);
35+
ivatel.pozoruj((klíč, hodnota) => {
36+
alert(`SET ${klíč}=${hodnota}`);
3737
});
3838

39-
user.name = "John";
39+
ivatel.jméno = "Jan";
4040
```
Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,27 @@
11

2-
# Observable
2+
# Pozorovatelný objekt
33

4-
Create a function `makeObservable(target)` that "makes the object observable" by returning a proxy.
4+
Vytvořte funkci `učiňPozorovatelným(cíl)`, která „učiní objekt pozorovatelným“ tím, že vrátí proxy.
55

6-
Here's how it should work:
6+
Mělo by to fungovat takto:
77

88
```js run
9-
function makeObservable(target) {
10-
/* your code */
9+
function učiňPozorovatelným(cíl) {
10+
/* váš kód */
1111
}
1212

13-
let user = {};
14-
user = makeObservable(user);
13+
let uživatel = {};
14+
uživatel = učiňPozorovatelným(uživatel);
1515

16-
user.observe((key, value) => {
17-
alert(`SET ${key}=${value}`);
16+
ivatel.pozoruj((klíč, hodnota) => {
17+
alert(`SET ${klíč}=${hodnota}`);
1818
});
1919

20-
user.name = "John"; // alerts: SET name=John
20+
ivatel.jméno = "Jan"; // oznámí: SET jméno=Jan
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+
Jinými slovy, objekt vrácený funkcí `učiňPozorovatelným` je stejný jako původní, ale navíc obsahuje metodu `pozoruj(handler)`, která nastaví funkci `handler` tak, aby byla volána při každé změně vlastnosti.
2424

25-
Whenever a property changes, `handler(key, value)` is called with the name and value of the property.
25+
Kdykoli se změní některá vlastnost, je zavolán `handler(klíč, hodnota)` s jejím názvem a hodnotou.
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. V této úloze se postarejte jen o zápis do vlastnosti. Ostatní operace mohou být implementovány podobně.

0 commit comments

Comments
 (0)