Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Reference Type#212

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Merged
otmon76 merged 1 commit intojavascript-tutorial:masterfromotmon76:1.14.4
Jun 4, 2025
Merged
Show file tree
Hide file tree
Changes fromall commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 17 additions & 17 deletions1-js/99-js-misc/04-reference-type/2-check-syntax/solution.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,37 @@
**Error**!
**Chyba!**

Try it:
Zkuste si to:

```js run
letuser = {
name: "John",
go: function() { alert(this.name) }
letuž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.**

JavaScriptdoes not auto-insert a semicolon before a bracket `(user.go)()`,so it reads the code like:
JavaScriptautomaticky nevloží středník před závorku `(uživatel.jdi)()`,takže přečte kód jako:

```js no-beautify
letuser = {go:... }(user.go)()
letuž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 `letuser`,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 `letuž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
letuser = {
name: "John",
go: function() { alert(this.name) }
letuž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.
14 changes: 7 additions & 7 deletions1-js/99-js-misc/04-reference-type/2-check-syntax/task.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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
letuser = {
name: "John",
go: function() { alert(this.name) }
letuž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 :)
20 changes: 10 additions & 10 deletions1-js/99-js-misc/04-reference-type/3-why-this/solution.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -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`.

18 changes: 9 additions & 9 deletions1-js/99-js-misc/04-reference-type/3-why-this/task.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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
```

108 changes: 54 additions & 54 deletions1-js/99-js-misc/04-reference-type/article.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -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
letuser = {
name: "John",
hi() { alert(this.name); },
bye() { alert("Bye"); }
letuž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 wanttounderstand why it happens, let's get under the hood of how`obj.method()` call works.
Proč? Chceme-li porozumět, proč setodě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
letuser = {
name: "John",
hi() { alert(this.name); }
};
letuživatel = {
jméno: "Jan",
ahoj() { alert(this.jméno); }
}

*!*
//split getting and calling the method in two lines
lethi =user.hi;
hi(); //Error, because thisis undefined
//rozdělíme získání a volání metody na dva řádky
letahoj =uživatel.ahoj;
ahoj(); //Chyba, protože thisje 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, JavaScriptuses 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, JavaScriptpouží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`istrue if`use strict` is in effect.
- `base`(základ) je objekt.
- `name`(název) je název vlastnosti.
- `strict`(striktní) jetrue, 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.

[8]ページ先頭

©2009-2025 Movatter.jp