From d6c0a988d96cd9a8b57a1fe36274b888e7b09087 Mon Sep 17 00:00:00 2001 From: Otmar Onderek Date: Sun, 9 Mar 2025 21:56:03 +0100 Subject: [PATCH] 1.14.4 --- .../2-check-syntax/solution.md | 34 +++--- .../04-reference-type/2-check-syntax/task.md | 14 +-- .../04-reference-type/3-why-this/solution.md | 20 ++-- .../04-reference-type/3-why-this/task.md | 18 +-- 1-js/99-js-misc/04-reference-type/article.md | 108 +++++++++--------- 5 files changed, 97 insertions(+), 97 deletions(-) diff --git a/1-js/99-js-misc/04-reference-type/2-check-syntax/solution.md b/1-js/99-js-misc/04-reference-type/2-check-syntax/solution.md index ba5d3bf04..a59d0015f 100644 --- a/1-js/99-js-misc/04-reference-type/2-check-syntax/solution.md +++ b/1-js/99-js-misc/04-reference-type/2-check-syntax/solution.md @@ -1,37 +1,37 @@ -**Error**! +**Chyba!** -Try it: +Zkuste si to: ```js run -let user = { - name: "John", - go: function() { alert(this.name) } +let uživatel = { + jméno: "Jan", + jdi: function() { alert(this.jméno) } } -(user.go)() // error! +(uživatel.jdi)() // chyba! ``` -The error message in most browsers does not give us much of a clue about what went wrong. +Ve většině prohlížečů nám chybová zpráva nedává mnoho informací o tom, co bylo špatně. -**The error appears because a semicolon is missing after `user = {...}`.** +**Chyba se objevila proto, že za `uživatel = {...}` chybí středník.** -JavaScript does not auto-insert a semicolon before a bracket `(user.go)()`, so it reads the code like: +JavaScript automaticky nevloží středník před závorku `(uživatel.jdi)()`, takže přečte kód jako: ```js no-beautify -let user = { go:... }(user.go)() +let uživatel = { jdi:... }(uživatel.jdi)() ``` -Then we can also see that such a joint expression is syntactically a call of the object `{ go: ... }` as a function with the argument `(user.go)`. And that also happens on the same line with `let user`, so the `user` object has not yet even been defined, hence the error. +Pak také vidíme, že takový spojený výraz je syntakticky voláním objektu `{ jdi: ... }` jako funkce s argumentem `(uživatel.jdi)`. A to se také odehrává na stejném řádku jako `let uživatel`, takže objekt `uživatel` ještě ani nebyl definován, proto nastane chyba. -If we insert the semicolon, all is fine: +Jestliže vložíme středník, bude vše v pořádku: ```js run -let user = { - name: "John", - go: function() { alert(this.name) } +let uživatel = { + jméno: "Jan", + jdi: function() { alert(this.jméno) } }*!*;*/!* -(user.go)() // John +(uživatel.jdi)() // Jan ``` -Please note that parentheses around `(user.go)` do nothing here. Usually they setup the order of operations, but here the dot `.` works first anyway, so there's no effect. Only the semicolon thing matters. +Prosíme všimněte si, že závorky okolo `(uživatel.jdi)` tady nic nedělají. Obvykle nastavují pořadí operací, ale tady jako první zafunguje tečka `.` tak jako tak, takže závorky nemají žádný efekt. Vadí jenom chybějící středník. diff --git a/1-js/99-js-misc/04-reference-type/2-check-syntax/task.md b/1-js/99-js-misc/04-reference-type/2-check-syntax/task.md index f40d68735..927d801a6 100644 --- a/1-js/99-js-misc/04-reference-type/2-check-syntax/task.md +++ b/1-js/99-js-misc/04-reference-type/2-check-syntax/task.md @@ -2,18 +2,18 @@ importance: 2 --- -# Syntax check +# Syntaktická kontrola -What is the result of this code? +Jaký je výsledek tohoto kódu? ```js no-beautify -let user = { - name: "John", - go: function() { alert(this.name) } +let uživatel = { + jméno: "Jan", + jdi: function() { alert(this.jméno) } } -(user.go)() +(uživatel.jdi)() ``` -P.S. There's a pitfall :) +P.S. Je tady chyták :) diff --git a/1-js/99-js-misc/04-reference-type/3-why-this/solution.md b/1-js/99-js-misc/04-reference-type/3-why-this/solution.md index e4ee78748..4aa1f8c78 100644 --- a/1-js/99-js-misc/04-reference-type/3-why-this/solution.md +++ b/1-js/99-js-misc/04-reference-type/3-why-this/solution.md @@ -1,22 +1,22 @@ -Here's the explanations. +Zde je vysvětlení. -1. That's a regular object method call. +1. Toto je běžné volání metody objektu. -2. The same, parentheses do not change the order of operations here, the dot is first anyway. +2. Totéž, závorky tady nezmění pořadí operací, tečka je i tak první. -3. Here we have a more complex call `(expression)()`. The call works as if it were split into two lines: +3. Zde máme složitější volání `(výraz)()`. Toto volání funguje tak, jako by bylo rozděleno na dva řádky: ```js no-beautify - f = obj.go; // calculate the expression - f(); // call what we have + f = obj.jdi; // vypočítáme výraz + f(); // zavoláme to, co máme ``` - Here `f()` is executed as a function, without `this`. + Zde se `f()` spustí jako funkce bez `this`. -4. The similar thing as `(3)`, to the left of the parentheses `()` we have an expression. +4. Podobně jako `(3)`, nalevo od závorek `()` máme výraz. -To explain the behavior of `(3)` and `(4)` we need to recall that property accessors (dot or square brackets) return a value of the Reference Type. +Abychom vysvětlili chování `(3)` a `(4)`, musíme si vzpomenout, že operátory přístupu k vlastnostem (tečka nebo hranaté závorky) vracejí hodnotu referenčního typu. -Any operation on it except a method call (like assignment `=` or `||`) turns it into an ordinary value, which does not carry the information allowing to set `this`. +Jakákoli operace na ní kromě volání metody (např. přiřazení `=`, nebo `||`) ji změní na obyčejnou hodnotu, která neobsahuje informaci umožňující nastavit `this`. diff --git a/1-js/99-js-misc/04-reference-type/3-why-this/task.md b/1-js/99-js-misc/04-reference-type/3-why-this/task.md index e2c073f62..dd61240f5 100644 --- a/1-js/99-js-misc/04-reference-type/3-why-this/task.md +++ b/1-js/99-js-misc/04-reference-type/3-why-this/task.md @@ -2,25 +2,25 @@ importance: 3 --- -# Explain the value of "this" +# Vysvětlete hodnotu „this“ -In the code below we intend to call `obj.go()` method 4 times in a row. +V následujícím kódu jsme měli v úmyslu volat metodu `obj.jdi()` čtyřikrát za sebou. -But calls `(1)` and `(2)` works differently from `(3)` and `(4)`. Why? +Avšak volání `(1)` a `(2)` fungují jinak než `(3)` a `(4)`. Proč? ```js run no-beautify -let obj, method; +let obj, metoda; obj = { - go: function() { alert(this); } + jdi: function() { alert(this); } }; -obj.go(); // (1) [object Object] +obj.jdi(); // (1) [object Object] -(obj.go)(); // (2) [object Object] +(obj.jdi)(); // (2) [object Object] -(method = obj.go)(); // (3) undefined +(metoda = obj.jdi)(); // (3) undefined -(obj.go || obj.stop)(); // (4) undefined +(obj.jdi || obj.stůj)(); // (4) undefined ``` diff --git a/1-js/99-js-misc/04-reference-type/article.md b/1-js/99-js-misc/04-reference-type/article.md index 894db8fc6..d28cf60e0 100644 --- a/1-js/99-js-misc/04-reference-type/article.md +++ b/1-js/99-js-misc/04-reference-type/article.md @@ -1,108 +1,108 @@ -# Reference Type +# Referenční typ -```warn header="In-depth language feature" -This article covers an advanced topic, to understand certain edge-cases better. +```warn header="Hlubší vlastnost jazyka" +Tento článek se zabývá pokročilým tématem, abychom lépe porozuměli určitým okrajovým případům. -It's not important. Many experienced developers live fine without knowing it. Read on if you want to know how things work under the hood. +Toto téma není důležité. Mnoho zkušených vývojářů žije šťastně i bez jeho znalosti. Článek si přečtěte, pokud chcete vědět, jak fungují věci „pod kapotou“. ``` -A dynamically evaluated method call can lose `this`. +Dynamicky vyhodnocované volání metody může ztratit `this`. -For instance: +Například: ```js run -let user = { - name: "John", - hi() { alert(this.name); }, - bye() { alert("Bye"); } +let uživatel = { + jméno: "Jan", + ahoj() { alert(this.jméno); }, + nashle() { alert("Nashle"); } }; -user.hi(); // works +uživatel.ahoj(); // funguje -// now let's call user.hi or user.bye depending on the name +// nyní podle jména zavolejme uživatel.ahoj nebo uživatel.nashle *!* -(user.name == "John" ? user.hi : user.bye)(); // Error! +(uživatel.jméno == "Jan" ? uživatel.ahoj : uživatel.nashle)(); // Chyba! */!* ``` -On the last line there is a conditional operator that chooses either `user.hi` or `user.bye`. In this case the result is `user.hi`. +Na posledním řádku je podmíněný operátor, který vybere buď `uživatel.ahoj`, nebo `uživatel.nashle`. V tomto případě je výsledek `uživatel.ahoj`. -Then the method is immediately called with parentheses `()`. But it doesn't work correctly! +Pak je tato metoda okamžitě volána pomocí závorek `()`. Ale nefunguje to správně! -As you can see, the call results in an error, because the value of `"this"` inside the call becomes `undefined`. +Jak vidíte, výsledkem volání je chyba, protože hodnota `"this"` uvnitř volání se stala `undefined`. -This works (object dot method): +Tohle funguje (objekt tečka metoda): ```js -user.hi(); +uživatel.ahoj(); ``` -This doesn't (evaluated method): +Tohle ne (vyhodnocená metoda): ```js -(user.name == "John" ? user.hi : user.bye)(); // Error! +(uživatel.jméno == "Jan" ? uživatel.ahoj : uživatel.nashle)(); // Chyba! ``` -Why? If we want to understand why it happens, let's get under the hood of how `obj.method()` call works. +Proč? Chceme-li porozumět, proč se to děje, podívejme se na zoubek tomu, jak funguje volání `obj.metoda()`. -## Reference type explained +## Vysvětlení referenčního typu -Looking closely, we may notice two operations in `obj.method()` statement: +Když se podíváme pozorněji, můžeme si v příkazu `obj.metoda()` všimnout dvou operací: -1. First, the dot `'.'` retrieves the property `obj.method`. -2. Then parentheses `()` execute it. +1. Nejprve tečka `'.'` získá vlastnost `obj.metoda`. +2. Pak ji závorky `()` spustí. -So, how does the information about `this` get passed from the first part to the second one? +Jak se tedy informace o `this` předá z první části do druhé? -If we put these operations on separate lines, then `this` will be lost for sure: +Umístíme-li tyto operace na samostatné řádky, pak bude `this` zcela jistě ztraceno: ```js run -let user = { - name: "John", - hi() { alert(this.name); } -}; +let uživatel = { + jméno: "Jan", + ahoj() { alert(this.jméno); } +} *!* -// split getting and calling the method in two lines -let hi = user.hi; -hi(); // Error, because this is undefined +// rozdělíme získání a volání metody na dva řádky +let ahoj = uživatel.ahoj; +ahoj(); // Chyba, protože this je undefined */!* ``` -Here `hi = user.hi` puts the function into the variable, and then on the last line it is completely standalone, and so there's no `this`. +Zde `ahoj = uživatel.ahoj` vloží funkci do proměnné a ta je pak na posledním řádku zcela samostatná, takže tam není žádné `this`. -**To make `user.hi()` calls work, JavaScript uses a trick -- the dot `'.'` returns not a function, but a value of the special [Reference Type](https://tc39.github.io/ecma262/#sec-reference-specification-type).** +**Aby volání `uživatel.ahoj()` fungovalo, JavaScript používá trik -- tečka `'.'` nevrací funkci, ale hodnotu speciálního [referenčního typu](https://tc39.github.io/ecma262/#sec-reference-specification-type).** -The Reference Type is a "specification type". We can't explicitly use it, but it is used internally by the language. +Referenční typ je „specifikační typ“. Nemůžeme jej explicitně používat, ale je používán vnitřně jazykem. -The value of Reference Type is a three-value combination `(base, name, strict)`, where: +Hodnotou referenčního typu je tříhodnotová kombinace `(base, name, strict)`, kde: -- `base` is the object. -- `name` is the property name. -- `strict` is true if `use strict` is in effect. +- `base` (základ) je objekt. +- `name` (název) je název vlastnosti. +- `strict` (striktní) je true, pokud je použito `use strict`. -The result of a property access `user.hi` is not a function, but a value of Reference Type. For `user.hi` in strict mode it is: +Výsledkem přístupu k vlastnosti `uživatel.ahoj` není funkce, ale hodnota referenčního typu. Pro `uživatel.ahoj` ve striktním režimu to je: ```js -// Reference Type value -(user, "hi", true) +// hodnota referenčního typu +(uživatel, "ahoj", true) ``` -When parentheses `()` are called on the Reference Type, they receive the full information about the object and its method, and can set the right `this` (`user` in this case). +Když se na referenčním typu zavolají závorky `()`, obdrží úplnou informaci o objektu a jeho metodě a mohou tedy nastavit správné `this` (v tomto případě `uživatel`). -Reference type is a special "intermediary" internal type, with the purpose to pass information from dot `.` to calling parentheses `()`. +Referenční typ je speciální „zprostředkovatelský“ interní typ, jehož účelem je předat informaci z tečky `.` volajícím závorkám `()`. -Any other operation like assignment `hi = user.hi` discards the reference type as a whole, takes the value of `user.hi` (a function) and passes it on. So any further operation "loses" `this`. +Jakákoli jiná operace, např. přiřazení `ahoj = uživatel.ahoj`, celý referenční typ zahodí, vezme hodnotu `uživatel.ahoj` (funkci) a předá ji dál. Jakákoli další operace tedy „ztratí“ `this`. -So, as the result, the value of `this` is only passed the right way if the function is called directly using a dot `obj.method()` or square brackets `obj['method']()` syntax (they do the same here). There are various ways to solve this problem such as [func.bind()](/bind#solution-2-bind). +Výsledkem tedy je, že hodnota `this` se předá správně jen tehdy, je-li funkce volána přímo pomocí syntaxe tečky `obj.metoda()` nebo hranatých závorek `obj['metoda']()` (obojí zde provádí totéž). Existují různé způsoby, jak tento problém vyřešit, např. [funkce.bind()](/bind#solution-2-bind). -## Summary +## Shrnutí -Reference Type is an internal type of the language. +Referenční typ je interní jazykový typ. -Reading a property, such as with dot `.` in `obj.method()` returns not exactly the property value, but a special "reference type" value that stores both the property value and the object it was taken from. +Načtení vlastnosti, např. pomocí tečky `.` v `obj.metoda()`, nevrací přesně hodnotu vlastnosti, ale speciální hodnotu „referenčního typu“, v níž je uložena jak hodnota vlastnosti, tak objekt, z něhož byla převzata. -That's for the subsequent method call `()` to get the object and set `this` to it. +To je proto, aby následné volání metody `()` mohlo získat objekt a nastavit jej jako `this`. -For all other operations, the reference type automatically becomes the property value (a function in our case). +Při všech ostatních operacích se z referenčního typu automaticky stává hodnota vlastnosti (v našem případě funkce). -The whole mechanics is hidden from our eyes. It only matters in subtle cases, such as when a method is obtained dynamically from the object, using an expression. +Celá tato mechanika je před našima očima ukryta. Záleží na ní jen v krajních případech, například když je metoda získána z objektu dynamicky použitím výrazu.