Skip to content
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 our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Revert "Object methods, "this"" #149

Merged
merged 1 commit into from
Jan 16, 2025
Merged
Show file tree
Hide file tree
Changes from all 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
Original file line number Diff line number Diff line change
@@ -1,55 +1,55 @@
**Odpověď: chyba.**
**Answer: an error.**

Zkuste to:
Try it:
```js run
function vytvořUživatele() {
function makeUser() {
return {
jméno: "Jan",
odkaz: this
name: "John",
ref: this
};
}

let uživatel = vytvořUživatele();
let user = makeUser();

alert( uživatel.odkaz.jméno ); // Chyba: Nelze načíst vlastnost 'jméno' objektu undefined
alert( user.ref.name ); // Error: Cannot read property 'name' of undefined
```

Je to proto, že pravidla, která nastavují `this`, se nedívají do definice objektu. Záleží jen na okamžiku volání.
That's because rules that set `this` do not look at object definition. Only the moment of call matters.

Zde je hodnota `this` uvnitř `vytvořUživatele()` `undefined`, protože tato funkce je volána jako funkce, ne jako metoda „tečkovou“ syntaxí.
Here the value of `this` inside `makeUser()` is `undefined`, because it is called as a function, not as a method with "dot" syntax.

Hodnota `this` je stejná pro celou funkci, bloky kódu a objektové literály ji neovlivňují.
The value of `this` is one for the whole function, code blocks and object literals do not affect it.

Takže `odkaz: this` vezme ve skutečnosti aktuální `this` této funkce.
So `ref: this` actually takes current `this` of the function.

Můžeme funkci přepsat a vrátit stejné `this` s hodnotou `undefined`:
We can rewrite the function and return the same `this` with `undefined` value:

```js run
function vytvořUživatele(){
return this; // tentokrát tady není objektový literál
function makeUser(){
return this; // this time there's no object literal
}

alert( vytvořUživatele().jméno ); // Chyba: Nelze načíst vlastnost 'jméno' objektu undefined
alert( makeUser().name ); // Error: Cannot read property 'name' of undefined
```
Jak vidíte, výsledek `alert( vytvořUživatele().jméno )` je stejný jako výsledek `alert( uživatel.odkaz.jméno )` z předchozího příkladu.
As you can see the result of `alert( makeUser().name )` is the same as the result of `alert( user.ref.name )` from the previous example.

Toto je opačný příklad:
Here's the opposite case:

```js run
function vytvořUživatele() {
function makeUser() {
return {
jméno: "Jan",
name: "John",
*!*
odkaz() {
ref() {
return this;
}
*/!*
};
}

let uživatel = vytvořUživatele();
let user = makeUser();

alert( uživatel.odkaz().jméno ); // Jan
alert( user.ref().name ); // John
```

Teď to funguje, protože `uživatel.odkaz()` je metoda. A hodnota `this` se nastaví na objekt před tečkou `.`.
Now it works, because `user.ref()` is a method. And the value of `this` is set to the object before dot `.`.
Original file line number Diff line number Diff line change
Expand Up @@ -2,22 +2,22 @@ importance: 5

---

# Použití „this“ v objektovém literálu
# Using "this" in object literal

Zde funkce `vytvořUživatele` vrátí objekt.
Here the function `makeUser` returns an object.

Jaký je výsledek přístupu k jeho vlastnosti `odkaz`? Proč?
What is the result of accessing its `ref`? Why?

```js
function vytvořUživatele() {
function makeUser() {
return {
jméno: "Jan",
odkaz: this
name: "John",
ref: this
};
}

let uživatel = vytvořUživatele();
let user = makeUser();

alert( uživatel.odkaz.jméno ); // Jaký je výsledek?
alert( user.ref.name ); // What's the result?
```

Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
let kalkulátor = {
součet() {
let calculator = {
sum() {
return this.a + this.b;
},

součin() {
mul() {
return this.a * this.b;
},

načti() {
read() {
this.a = +prompt('a?', 0);
this.b = +prompt('b?', 0);
}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,31 +1,32 @@

describe("kalkulátor", function() {

describe("calculator", function() {

context("když zadáme 2 a 3", function() {
context("when 2 and 3 entered", function() {
beforeEach(function() {
sinon.stub(window, "prompt");

prompt.onCall(0).returns("2");
prompt.onCall(1).returns("3");

kalkulátor.načti();
calculator.read();
});

afterEach(function() {
prompt.restore();
});

it('funkce načti načte dvě hodnoty a uloží je jako vlastnosti objektu', function () {
assert.equal(kalkulátor.a, 2);
assert.equal(kalkulátor.b, 3);
it('the read get two values and saves them as object properties', function () {
assert.equal(calculator.a, 2);
assert.equal(calculator.b, 3);
});

it("součet je 5", function() {
assert.equal(kalkulátor.součet(), 5);
it("the sum is 5", function() {
assert.equal(calculator.sum(), 5);
});

it("součin je 6", function() {
assert.equal(kalkulátor.součin(), 6);
it("the multiplication product is 6", function() {
assert.equal(calculator.mul(), 6);
});
});

Expand Down
14 changes: 7 additions & 7 deletions 1-js/04-object-basics/04-object-methods/7-calculator/solution.md
Original file line number Diff line number Diff line change
@@ -1,21 +1,21 @@

```js run demo solution
let kalkulátor = {
součet() {
let calculator = {
sum() {
return this.a + this.b;
},

součin() {
mul() {
return this.a * this.b;
},

načti() {
read() {
this.a = +prompt('a?', 0);
this.b = +prompt('b?', 0);
}
};

kalkulátor.načti();
alert( kalkulátor.součet() );
alert( kalkulátor.součin() );
calculator.read();
alert( calculator.sum() );
alert( calculator.mul() );
```
20 changes: 10 additions & 10 deletions 1-js/04-object-basics/04-object-methods/7-calculator/task.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,22 +2,22 @@ importance: 5

---

# Vytvořte kalkulátor
# Create a calculator

Vytvořte objekt `kalkulátor` se třemi metodami:
Create an object `calculator` with three methods:

- `načti()` se zeptá na dvě hodnoty a uloží je jako vlastnosti objektu pod názvy po řadě `a` a `b`.
- `součet()` vrátí součet uložených hodnot.
- `součin()` vynásobí uložené hodnoty mezi sebou a vrátí výsledek.
- `read()` prompts for two values and saves them as object properties with names `a` and `b` respectively.
- `sum()` returns the sum of saved values.
- `mul()` multiplies saved values and returns the result.

```js
let kalkulátor = {
// ... váš kód ...
let calculator = {
// ... your code ...
};

kalkulátor.načti();
alert( kalkulátor.součet() );
alert( kalkulátor.součin() );
calculator.read();
alert( calculator.sum() );
alert( calculator.mul() );
```

[demo]
Original file line number Diff line number Diff line change
@@ -1,21 +1,16 @@

let žebřík = {
stupeň: 0,
nahoru: function() {
this.stupeň++;
let ladder = {
step: 0,
up: function() {
this.step++;
return this;
},
dolů: function() {
this.stupeň--;
down: function() {
this.step--;
return this;
},
<<<<<<< HEAD
zobrazStupeň: function() {
alert(this.stupeň);
=======
showStep: function() {
alert(this.step);
return this;
>>>>>>> 71da17e5960f1c76aad0d04d21f10bc65318d3f6
}
};
Original file line number Diff line number Diff line change
@@ -1,36 +1,36 @@

describe('Žebřík', function() {
describe('Ladder', function() {
before(function() {
window.alert = sinon.stub(window, "alert");
});

beforeEach(function() {
žebřík.stupeň = 0;
ladder.step = 0;
});

it('nahoru() by mělo vrátit this', function() {
assert.equal(žebřík.nahoru(), žebřík);
it('up() should return this', function() {
assert.equal(ladder.up(), ladder);
});

it('dolů() by mělo vrátit this', function() {
assert.equal(žebřík.dolů(), žebřík);
it('down() should return this', function() {
assert.equal(ladder.down(), ladder);
});

it('zobrazStupeň() by mělo volat alert', function() {
žebřík.zobrazStupeň();
it('showStep() should call alert', function() {
ladder.showStep();
assert(alert.called);
});

it('nahoru() by mělo zvýšit stupeň', function() {
assert.equal(žebřík.nahoru().nahoru().stupeň, 2);
it('up() should increase step', function() {
assert.equal(ladder.up().up().step, 2);
});

it('dolů() by mělo snížit stupeň', function() {
assert.equal(žebřík.dolů().stupeň, -1);
it('down() should decrease step', function() {
assert.equal(ladder.down().step, -1);
});

it('dolů().nahoru().nahoru().nahoru() ', function() {
assert.equal(žebřík.dolů().nahoru().nahoru().nahoru().stupeň, 2);
it('down().up().up().up() ', function() {
assert.equal(ladder.down().up().up().up().step, 2);
});

it('showStep() should return this', function() {
Expand All @@ -42,7 +42,7 @@ describe('Žebřík', function() {
});

after(function() {
žebřík.stupeň = 0;
ladder.step = 0;
alert.restore();
});
});
36 changes: 18 additions & 18 deletions 1-js/04-object-basics/04-object-methods/8-chain-calls/solution.md
Original file line number Diff line number Diff line change
@@ -1,39 +1,39 @@
Řešením je v každém volání vrátit tento objekt samotný.
The solution is to return the object itself from every call.

```js run demo
let žebřík = {
stupeň: 0,
nahoru() {
this.stupeň++;
let ladder = {
step: 0,
up() {
this.step++;
*!*
return this;
*/!*
},
dolů() {
this.stupeň--;
down() {
this.step--;
*!*
return this;
*/!*
},
zobrazStupeň() {
alert( this.stupeň );
showStep() {
alert( this.step );
*!*
return this;
*/!*
}
};

žebřík.nahoru().nahoru().dolů().zobrazStupeň().dolů().zobrazStupeň(); // zobrazí 1, pak 0
ladder.up().up().down().showStep().down().showStep(); // shows 1 then 0
```

Můžeme také psát každé volání na nový řádek. U delšího zřetězení je to čitelnější:
We also can write a single call per line. For long chains it's more readable:

```js
žebřík
.nahoru()
.nahoru()
.dolů()
.zobrazStupeň() // 1
.dolů()
.zobrazStupeň(); // 0
ladder
.up()
.up()
.down()
.showStep() // 1
.down()
.showStep(); // 0
```
Loading