From 3e8c7c0431214425ae5b14877c28a67292187171 Mon Sep 17 00:00:00 2001 From: Mykola Sopiha Date: Sat, 24 Jul 2021 10:18:30 +0300 Subject: [PATCH 1/5] Object methods, 'this' --- .../4-object-property-this/solution.md | 26 +-- .../4-object-property-this/task.md | 10 +- .../04-object-methods/7-calculator/task.md | 12 +- .../8-chain-calls/solution.md | 4 +- .../04-object-methods/8-chain-calls/task.md | 12 +- .../04-object-methods/article.md | 173 +++++++++--------- 6 files changed, 119 insertions(+), 118 deletions(-) diff --git a/1-js/04-object-basics/04-object-methods/4-object-property-this/solution.md b/1-js/04-object-basics/04-object-methods/4-object-property-this/solution.md index f33c9310e..71776ec66 100644 --- a/1-js/04-object-basics/04-object-methods/4-object-property-this/solution.md +++ b/1-js/04-object-basics/04-object-methods/4-object-property-this/solution.md @@ -1,10 +1,10 @@ -**Answer: an error.** +**Відповідь: помилка.** Try it: ```js run function makeUser() { return { - name: "John", + name: "Іван", ref: this }; } @@ -14,31 +14,31 @@ let user = makeUser(); alert( user.ref.name ); // Error: Cannot read property 'name' of undefined ``` -That's because rules that set `this` do not look at object definition. Only the moment of call matters. +Це тому, що правила, які встановлюють `this`, не розглядають оголошення об’єкта. Важливий лише момент виклику метода. -Here the value of `this` inside `makeUser()` is `undefined`, because it is called as a function, not as a method with "dot" syntax. +Тут значення `this` всередині `makeUser()` є `undefined`, оскільки воно викликається як функція, а не як метод із синтаксисом "через крапку". -The value of `this` is one for the whole function, code blocks and object literals do not affect it. +Значення `this` є одним для всієї функції, блоки коду та літерали об’єктів на це не впливають. -So `ref: this` actually takes current `this` of the function. +Отже `ref: this` насправді бере значення `this` функції. -We can rewrite the function and return the same `this` with `undefined` value: +Ми можемо переписати функцію і повернути те саме `this` зі значенням` undefined`: ```js run function makeUser(){ - return this; // this time there's no object literal + return this; // цього разу немає літералу об’єкта } alert( makeUser().name ); // Error: Cannot read property 'name' of undefined ``` -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. +Як бачите, результат `alert( makeUser().name )` збігається з результатом `alert( user.ref.name )` з попереднього прикладу. -Here's the opposite case: +Ось протилежний випадок: ```js run function makeUser() { return { - name: "John", + name: "Іван", *!* ref() { return this; @@ -49,7 +49,7 @@ function makeUser() { let user = makeUser(); -alert( user.ref().name ); // John +alert( user.ref().name ); // Іван ``` -Now it works, because `user.ref()` is a method. And the value of `this` is set to the object before dot `.`. +Зараз це працює, оскільки `user.ref()` - це метод. І значення `this` встановлюється для об'єкта перед крапкою `.`. diff --git a/1-js/04-object-basics/04-object-methods/4-object-property-this/task.md b/1-js/04-object-basics/04-object-methods/4-object-property-this/task.md index c6f8f9658..be135604b 100644 --- a/1-js/04-object-basics/04-object-methods/4-object-property-this/task.md +++ b/1-js/04-object-basics/04-object-methods/4-object-property-this/task.md @@ -2,22 +2,22 @@ importance: 5 --- -# Using "this" in object literal +# Використання "this" у об’єктному літералі -Here the function `makeUser` returns an object. +Тут функція `makeUser` повертає об’єкт. -What is the result of accessing its `ref`? Why? +Який результат доступу до його `ref`? Чому? ```js function makeUser() { return { - name: "John", + name: "Іван", ref: this }; } let user = makeUser(); -alert( user.ref.name ); // What's the result? +alert( user.ref.name ); // Який результат? ``` diff --git a/1-js/04-object-basics/04-object-methods/7-calculator/task.md b/1-js/04-object-basics/04-object-methods/7-calculator/task.md index aa22608ec..faf5453de 100644 --- a/1-js/04-object-basics/04-object-methods/7-calculator/task.md +++ b/1-js/04-object-basics/04-object-methods/7-calculator/task.md @@ -2,17 +2,17 @@ importance: 5 --- -# Create a calculator +# Створіть калькулятор -Create an object `calculator` with three methods: +Створіть об'єкт `calculator` трьома методами: -- `read()` prompts for two values and saves them as object properties. -- `sum()` returns the sum of saved values. -- `mul()` multiplies saved values and returns the result. +- `read()` запитує два значення та зберігає їх як властивості об'єкта. +- `sum()` повертає суму збережених значень. +- `mul()` множить збережені значення і повертає результат. ```js let calculator = { - // ... your code ... + // ... ваш код ... }; calculator.read(); diff --git a/1-js/04-object-basics/04-object-methods/8-chain-calls/solution.md b/1-js/04-object-basics/04-object-methods/8-chain-calls/solution.md index ab4e37340..27cd35d10 100644 --- a/1-js/04-object-basics/04-object-methods/8-chain-calls/solution.md +++ b/1-js/04-object-basics/04-object-methods/8-chain-calls/solution.md @@ -1,4 +1,4 @@ -The solution is to return the object itself from every call. +Рішення полягає у поверненні самого об’єкта з кожного виклику функції. ```js run demo let ladder = { @@ -26,7 +26,7 @@ let ladder = { ladder.up().up().down().up().down().showStep(); // 1 ``` -We also can write a single call per line. For long chains it's more readable: +Ми також можемо написати один виклик функції на кожну лінію коду. Для довгих ланцюгів коду це читабельніше: ```js ladder diff --git a/1-js/04-object-basics/04-object-methods/8-chain-calls/task.md b/1-js/04-object-basics/04-object-methods/8-chain-calls/task.md index eca9f4e92..b0b8edd45 100644 --- a/1-js/04-object-basics/04-object-methods/8-chain-calls/task.md +++ b/1-js/04-object-basics/04-object-methods/8-chain-calls/task.md @@ -2,9 +2,9 @@ importance: 2 --- -# Chaining +# Ланцюг викликів -There's a `ladder` object that allows to go up and down: +Існує об'єкт `ladder`, що дозволяє підніматися вгору-вниз: ```js let ladder = { @@ -15,13 +15,13 @@ let ladder = { down() { this.step--; }, - showStep: function() { // shows the current step + showStep: function() { // показує поточний крок alert( this.step ); } }; ``` -Now, if we need to make several calls in sequence, can do it like this: +Тепер, якщо нам потрібно зробити кілька викликів послідовно, можна зробити це так: ```js ladder.up(); @@ -30,10 +30,10 @@ ladder.down(); ladder.showStep(); // 1 ``` -Modify the code of `up`, `down` and `showStep` to make the calls chainable, like this: +Змініть код `up`, `down` і `showStep`, щоб зробити доступними ланцюг викликів, наприклад: ```js ladder.up().up().down().showStep(); // 1 ``` -Such approach is widely used across JavaScript libraries. +Такий підхід широко використовується в бібліотеках JavaScript. diff --git a/1-js/04-object-basics/04-object-methods/article.md b/1-js/04-object-basics/04-object-methods/article.md index a36b9ca07..8ed465700 100644 --- a/1-js/04-object-basics/04-object-methods/article.md +++ b/1-js/04-object-basics/04-object-methods/article.md @@ -1,46 +1,46 @@ -# Object methods, "this" +# Методи об’єкту, "this" -Objects are usually created to represent entities of the real world, like users, orders and so on: +Об’єкти зазвичай створюються для представлення сутностей реального світу, таких як користувачі, замовлення тощо: ```js let user = { - name: "John", + name: "Іван", age: 30 }; ``` -And, in the real world, a user can *act*: select something from the shopping cart, login, logout etc. +І в реальному світі користувач може *діяти*: вибрати щось із кошика для покупок, авторизуватися, виходити із системи тощо. -Actions are represented in JavaScript by functions in properties. +Дії представлені в JavaScript функціями у властивостях об’єкта. -## Method examples +## Приклади методів -For a start, let's teach the `user` to say hello: +Для початку давайте навчимо `user` вітатися: ```js run let user = { - name: "John", + name: "Іван", age: 30 }; *!* user.sayHi = function() { - alert("Hello!"); + alert("Привіт!"); }; */!* -user.sayHi(); // Hello! +user.sayHi(); // Привіт! ``` -Here we've just used a Function Expression to create a function and assign it to the property `user.sayHi` of the object. +Тут ми щойно використали Function Expression (функціональний вираз) для створення функції та присвоїли її властивості `user.sayHi` об’єкта. -Then we can call it as `user.sayHi()`. The user can now speak! +Потім ми викликати її завдяки `user.sayHi()`. Користувач тепер може говорити! -A function that is a property of an object is called its *method*. +Функція, яка є властивістю об’єкта, називається його *методом*. -So, here we've got a method `sayHi` of the object `user`. +Отже, ми отримали метод `sayHi` об’єкта `user`. -Of course, we could use a pre-declared function as a method, like this: +Звичайно, ми могли б використовувати попередньо оголошену функцію як метод, наприклад: ```js run let user = { @@ -50,107 +50,108 @@ let user = { *!* // first, declare function sayHi() { - alert("Hello!"); + alert("Привіт!"); }; // then add as a method user.sayHi = sayHi; */!* -user.sayHi(); // Hello! +user.sayHi(); // Привіт! ``` ```smart header="Object-oriented programming" -When we write our code using objects to represent entities, that's called [object-oriented programming](https://en.wikipedia.org/wiki/Object-oriented_programming), in short: "OOP". +Коли ми пишемо наш код, використовуючи об’єкти для представлення сутностей, це називається [об’єктно-орієнтоване програмування +](https://uk.wikipedia.org/wiki/Об'єктно-орієнтоване_програмування), скорочено: "ООП". -OOP is a big thing, an interesting science of its own. How to choose the right entities? How to organize the interaction between them? That's architecture, and there are great books on that topic, like "Design Patterns: Elements of Reusable Object-Oriented Software" by E. Gamma, R. Helm, R. Johnson, J. Vissides or "Object-Oriented Analysis and Design with Applications" by G. Booch, and more. +ООП - велика річ, сама по собі цікава наука. Як правильно вибрати сутності? Як організувати взаємодію між ними? Це архітектура, і на цю тему є чудові книги, такі як "Шаблони проектування: елементи багаторазового об’єктно-орієнтованого програмного забезпечення" Е. Гамми, Р. Хелма, Р. Джонсона, Дж. Віссідеса або "Об’єктно-орієнтований аналіз та дизайн з Додатки "Г. Буча та ін. ``` -### Method shorthand +### Скорочений запис методу -There exists a shorter syntax for methods in an object literal: +Існує більш короткий синтаксис для методів в літералі об’єкта: ```js -// these objects do the same +// цей об’єкт робить те ж саме user = { sayHi: function() { - alert("Hello"); + alert("Привіт!"); } }; -// method shorthand looks better, right? +// скорочений метод виглядає краще, чи не так? user = { *!* - sayHi() { // same as "sayHi: function(){...}" + sayHi() { // те ж саме що й "sayHi: function(){...}" */!* - alert("Hello"); + alert("Привіт!"); } }; ``` -As demonstrated, we can omit `"function"` and just write `sayHi()`. +Як було показано, ми можемо опустити `"function"` і написати просто `sayHi()`. -To tell the truth, the notations are not fully identical. There are subtle differences related to object inheritance (to be covered later), but for now they do not matter. In almost all cases the shorter syntax is preferred. +Слід відзначити, що ці позначення не є повністю ідентичними. Існують тонкі відмінності, пов’язані з успадкуванням об’єктів (про які піде мова пізніше), але наразі вони не мають значення. Майже у всіх випадках скорочений синтаксис краще. -## "this" in methods +## "this" в методах -It's common that an object method needs to access the information stored in the object to do its job. +Як правило, метод об’єкта повинен отримувати доступ до інформації, що зберігається в об’єкті, для виконання своєї роботи. -For instance, the code inside `user.sayHi()` may need the name of the `user`. +Наприклад, коду всередині `user.sayHi()` може знадобитися ім’я, що зберігається в об’єкті `user`. -**To access the object, a method can use the `this` keyword.** +**Для доступу до інформації всередині об’єкта метод може використовувати ключове слово `this`.** -The value of `this` is the object "before dot", the one used to call the method. +Значенням `this` є об’єкт «перед крапкою», який використовується для виклику методу. -For instance: +Наприклад: ```js run let user = { - name: "John", + name: "Іван", age: 30, sayHi() { *!* - // "this" is the "current object" + // "this" - це "поточний об’єкт" alert(this.name); */!* } }; -user.sayHi(); // John +user.sayHi(); // Іван ``` -Here during the execution of `user.sayHi()`, the value of `this` will be `user`. +Тут під час виконання коду `user.sayHi()`, значенням `this` буде `user` (посилання на об’єкт). -Technically, it's also possible to access the object without `this`, by referencing it via the outer variable: +Також можна отримати доступ до об’єкта без цього, посилаючись на нього через зовнішню змінну: ```js let user = { - name: "John", + name: "Іван", age: 30, sayHi() { *!* - alert(user.name); // "user" instead of "this" + alert(user.name); // використовуємо змінну "user" замість "this" */!* } }; ``` -...But such code is unreliable. If we decide to copy `user` to another variable, e.g. `admin = user` and overwrite `user` with something else, then it will access the wrong object. +...Але такий код ненадійний. Якщо ми вирішимо скопіювати `user` в іншу змінну, напр. `admin = user` перезаписати `user` чимось іншим, тоді цей код отримає доступ до неправильного об’єкта. -That's demonstrated below: +Це продемонстровано нижче: ```js run let user = { - name: "John", + name: "Іван", age: 30, sayHi() { *!* - alert( user.name ); // leads to an error + alert( user.name ); // призводить до помилки */!* } @@ -158,20 +159,20 @@ let user = { let admin = user; -user = null; // overwrite to make things obvious +user = null; // перезапишемо значення змінної для наглядності *!* admin.sayHi(); // TypeError: Cannot read property 'name' of null */!* ``` -If we used `this.name` instead of `user.name` inside the `alert`, then the code would work. +Якщо ми використовуємо `this.name` замість `user.name` всередині `alert`, тоді цей код буде працювати. -## "this" is not bound +## "this" не являється фіксованим -In JavaScript, keyword `this` behaves unlike most other programming languages. It can be used in any function, even if it's not a method of an object. +В JavaScript, ключове слово `this` веде себе не так, як в більшості мов програмування. -There's no syntax error in the following example: +В цьому коді немає синтаксичної помилки: ```js function sayHi() { @@ -179,36 +180,36 @@ function sayHi() { } ``` -The value of `this` is evaluated during the run-time, depending on the context. +Значення `this` обчислюється під час виконання і залежить від контексту. -For instance, here the same function is assigned to two different objects and has different "this" in the calls: +Наприклад, тут одна й та ж функція призначена двом різним об’єктам і має різний "this" при викликах: ```js run -let user = { name: "John" }; -let admin = { name: "Admin" }; +let user = { name: "Іван" }; +let admin = { name: "Адмін" }; function sayHi() { alert( this.name ); } *!* -// use the same function in two objects +// використовуємо одну і ту ж функцію в двох об’єктах user.f = sayHi; admin.f = sayHi; */!* -// these calls have different this -// "this" inside the function is the object "before the dot" -user.f(); // John (this == user) -admin.f(); // Admin (this == admin) +// виклики функцій, приведені нижче, мають різні this +// "this" всередині функції являється посиланням на об’экт "перед крапкою" +user.f(); // Іван (this == user) +admin.f(); // Адмін (this == admin) -admin['f'](); // Admin (dot or square brackets access the method – doesn't matter) +admin['f'](); // Адмін (неважливо те, як звертатися до методу об’єкта - через крапку чи квадратні дужки) ``` -The rule is simple: if `obj.f()` is called, then `this` is `obj` during the call of `f`. So it's either `user` or `admin` in the example above. +Правило просте: якщо `obj.f()` викликано, то `this` це `obj` під час виконання `f`. Так що в даному прикладі це `user` або `admin`. -````smart header="Calling without an object: `this == undefined`" -We can even call the function without an object at all: +````smart header="Виклик без об’єкта: `this == undefined`" +Ми можемо навіть викликати функцію взагалі без об’єкта: ```js run function sayHi() { @@ -218,53 +219,53 @@ function sayHi() { sayHi(); // undefined ``` -In this case `this` is `undefined` in strict mode. If we try to access `this.name`, there will be an error. +В такому випадку `this` є `undefined` в суворому режимі (`"use strict"`). Якщо ми спробуємо звернутися до `this.name` трапиться помилка. -In non-strict mode the value of `this` in such case will be the *global object* (`window` in a browser, we'll get to it later in the chapter [](info:global-object)). This is a historical behavior that `"use strict"` fixes. +У несуворому режимі значенням `this` в такому випадку буде *глобальний об’єкт* (`window` у браузері, ми дійдемо до нього пізніше в главі [] (інформація: global-object)). Це - поведінка, яка склалася історично та виправляється завдяки використанню суворого режиму (`"use strict"`). -Usually such call is a programming error. If there's `this` inside a function, it expects to be called in an object context. +Зазвичай такий виклик є помилкою програмування. Якщо всередині функції є `this`, вона очікує виклику в контексті об’єкта. ```` -```smart header="The consequences of unbound `this`" -If you come from another programming language, then you are probably used to the idea of a "bound `this`", where methods defined in an object always have `this` referencing that object. +```smart header="Наслідки вільного `this`" +Якщо ви прийшли з іншої мови програмування, то ви, мабуть, звикли до ідеї "зв’язаного `this`", де методи, визначені в об’єкті, завжди мають `this`, що посилається на цей об’єкт. -In JavaScript `this` is "free", its value is evaluated at call-time and does not depend on where the method was declared, but rather on what object is "before the dot". +В JavaScript `this` є "вільним", його значення обчислюється під час виклику і не залежить від того, де метод був оголошений, а від того, який об’єкт "перед крапкою". -The concept of run-time evaluated `this` has both pluses and minuses. On the one hand, a function can be reused for different objects. On the other hand, the greater flexibility creates more possibilities for mistakes. +Поняття `this`, що оцінюється в процесі роботи має як плюси, так і мінуси. З одного боку, функцію можна використовувати повторно для різних об’єктів. З іншого боку, більша гнучкість створює більше можливостей для помилок. -Here our position is not to judge whether this language design decision is good or bad. We'll understand how to work with it, how to get benefits and avoid problems. +Тут наша позиція полягає не в тому, щоб судити, добре чи погане таке рішення щодо дизайну мови. Ми зрозуміємо, як з цим працювати, як отримати переваги та уникнути проблем. ``` -## Arrow functions have no "this" +## Стрілочні функції не мають "this" -Arrow functions are special: they don't have their "own" `this`. If we reference `this` from such a function, it's taken from the outer "normal" function. +Стрілочні функції особливі: у них немає "свого" `this`. Якщо ми посилаємось на `this` з такої функції, його значення береться із зовнішньої "нормальної" функції. -For instance, here `arrow()` uses `this` from the outer `user.sayHi()` method: +Наприклад, тут `arrow()` використовує `this` із зовнішнього `user.sayHi()` методу: ```js run let user = { - firstName: "Ilya", + firstName: "Ілля", sayHi() { let arrow = () => alert(this.firstName); arrow(); } }; -user.sayHi(); // Ilya +user.sayHi(); // Ілля ``` -That's a special feature of arrow functions, it's useful when we actually do not want to have a separate `this`, but rather to take it from the outer context. Later in the chapter we'll go more deeply into arrow functions. +Це особливість стрілочних функцій, це корисно, коли ми насправді не хочемо мати окреме `this`, а скоріше взяти це із зовнішнього контексту. Далі в главі ми детальніше розглянемо стрілочні функції. -## Summary +## Висновок -- Functions that are stored in object properties are called "methods". -- Methods allow objects to "act" like `object.doSomething()`. -- Methods can reference the object as `this`. +- Функції, які зберігаються у властивостях об’єкта, називаються "методами". +- Методи дозволяють об’єктам "діяти" подібно до `object.doSomething()`. +- Методи можуть посилатися на об’єкт завдяки `this`. -The value of `this` is defined at run-time. -- When a function is declared, it may use `this`, but that `this` has no value until the function is called. -- A function can be copied between objects. -- When a function is called in the "method" syntax: `object.method()`, the value of `this` during the call is `object`. +- Значення `this` визначається під час виконання. +- Коли функція оголошена, вона може використовувати `this`, але саме `this` не має значення, доки функція не буде викликана. +- Функцію можна копіювати між об'єктами. +- Коли функція викликається в синтаксисі "метода": `object.method()`, значення `this` під час виклику є `object` – об’кт перед крапкою. -Please note that arrow functions are special: they have no `this`. When `this` is accessed inside an arrow function, it is taken from outside. +Зверніть увагу, що стрілочні функції є особливими: у них немає `this`. Коли всередині стрілочної функції звертаються до `this`, то його значення береться ззовні. From 78bc1c0644417057c4266baf8ab9a359f4635664 Mon Sep 17 00:00:00 2001 From: Mykola Sopiha Date: Sat, 24 Jul 2021 15:42:00 +0300 Subject: [PATCH 2/5] Object methods, 'this' --- .../4-object-property-this/solution.md | 4 ++-- .../04-object-methods/7-calculator/task.md | 2 +- .../04-object-methods/8-chain-calls/task.md | 2 +- 1-js/04-object-basics/04-object-methods/article.md | 14 +++++++------- 4 files changed, 11 insertions(+), 11 deletions(-) diff --git a/1-js/04-object-basics/04-object-methods/4-object-property-this/solution.md b/1-js/04-object-basics/04-object-methods/4-object-property-this/solution.md index 71776ec66..472a16f63 100644 --- a/1-js/04-object-basics/04-object-methods/4-object-property-this/solution.md +++ b/1-js/04-object-basics/04-object-methods/4-object-property-this/solution.md @@ -20,13 +20,13 @@ alert( user.ref.name ); // Error: Cannot read property 'name' of undefined Значення `this` є одним для всієї функції, блоки коду та літерали об’єктів на це не впливають. -Отже `ref: this` насправді бере значення `this` функції. +Отже, `ref: this` дійсно бере значення `this` функції. Ми можемо переписати функцію і повернути те саме `this` зі значенням` undefined`: ```js run function makeUser(){ - return this; // цього разу немає літералу об’єкта + return this; // цього разу немає літерала об’єкта } alert( makeUser().name ); // Error: Cannot read property 'name' of undefined diff --git a/1-js/04-object-basics/04-object-methods/7-calculator/task.md b/1-js/04-object-basics/04-object-methods/7-calculator/task.md index faf5453de..56b38cad2 100644 --- a/1-js/04-object-basics/04-object-methods/7-calculator/task.md +++ b/1-js/04-object-basics/04-object-methods/7-calculator/task.md @@ -4,7 +4,7 @@ importance: 5 # Створіть калькулятор -Створіть об'єкт `calculator` трьома методами: +Створіть об'єкт `calculator` з трьома методами: - `read()` запитує два значення та зберігає їх як властивості об'єкта. - `sum()` повертає суму збережених значень. diff --git a/1-js/04-object-basics/04-object-methods/8-chain-calls/task.md b/1-js/04-object-basics/04-object-methods/8-chain-calls/task.md index b0b8edd45..46832f1e9 100644 --- a/1-js/04-object-basics/04-object-methods/8-chain-calls/task.md +++ b/1-js/04-object-basics/04-object-methods/8-chain-calls/task.md @@ -30,7 +30,7 @@ ladder.down(); ladder.showStep(); // 1 ``` -Змініть код `up`, `down` і `showStep`, щоб зробити доступними ланцюг викликів, наприклад: +Змініть код `up`, `down` і `showStep` так, щоб зробити доступними ланцюг викликів, наприклад: ```js ladder.up().up().down().showStep(); // 1 diff --git a/1-js/04-object-basics/04-object-methods/article.md b/1-js/04-object-basics/04-object-methods/article.md index 8ed465700..efbec4ec5 100644 --- a/1-js/04-object-basics/04-object-methods/article.md +++ b/1-js/04-object-basics/04-object-methods/article.md @@ -64,7 +64,7 @@ user.sayHi(); // Привіт! Коли ми пишемо наш код, використовуючи об’єкти для представлення сутностей, це називається [об’єктно-орієнтоване програмування ](https://uk.wikipedia.org/wiki/Об'єктно-орієнтоване_програмування), скорочено: "ООП". -ООП - велика річ, сама по собі цікава наука. Як правильно вибрати сутності? Як організувати взаємодію між ними? Це архітектура, і на цю тему є чудові книги, такі як "Шаблони проектування: елементи багаторазового об’єктно-орієнтованого програмного забезпечення" Е. Гамми, Р. Хелма, Р. Джонсона, Дж. Віссідеса або "Об’єктно-орієнтований аналіз та дизайн з Додатки "Г. Буча та ін. +ООП є великою предметною областю і цікавою наукою саме по собі. Як правильно обрати сутності? Як організувати взаємодію між ними? Це архітектура, і на цю тему є чудові книги, такі як "Шаблони проектування: елементи багаторазового об’єктно-орієнтованого програмного забезпечення" Е. Гамми, Р. Хелма, Р. Джонсона, Дж. Віссідеса або "Об’єктно-орієнтований аналіз та дизайн з застосунками" Г. Буча та ін. ``` ### Скорочений запис методу @@ -91,7 +91,7 @@ user = { Як було показано, ми можемо опустити `"function"` і написати просто `sayHi()`. -Слід відзначити, що ці позначення не є повністю ідентичними. Існують тонкі відмінності, пов’язані з успадкуванням об’єктів (про які піде мова пізніше), але наразі вони не мають значення. Майже у всіх випадках скорочений синтаксис краще. +Слід відзначити, що ці позначення не є повністю ідентичними. Існують тонкі відмінності, пов’язані з наслідуванням об’єктів (про які піде мова пізніше), але наразі вони не мають значення. Майже у всіх випадках скорочений синтаксис краще. ## "this" в методах @@ -101,7 +101,7 @@ user = { **Для доступу до інформації всередині об’єкта метод може використовувати ключове слово `this`.** -Значенням `this` є об’єкт «перед крапкою», який використовується для виклику методу. +Значенням `this` є об’єкт "перед крапкою", який використовується для виклику методу. Наприклад: @@ -122,7 +122,7 @@ let user = { user.sayHi(); // Іван ``` -Тут під час виконання коду `user.sayHi()`, значенням `this` буде `user` (посилання на об’єкт). +Тут під час виконання коду `user.sayHi()`, значенням `this` буде `user`. Також можна отримати доступ до об’єкта без цього, посилаючись на нього через зовнішню змінну: @@ -231,7 +231,7 @@ sayHi(); // undefined В JavaScript `this` є "вільним", його значення обчислюється під час виклику і не залежить від того, де метод був оголошений, а від того, який об’єкт "перед крапкою". -Поняття `this`, що оцінюється в процесі роботи має як плюси, так і мінуси. З одного боку, функцію можна використовувати повторно для різних об’єктів. З іншого боку, більша гнучкість створює більше можливостей для помилок. +Поняття `this`, що визначається в процесі роботи має як плюси, так і мінуси. З одного боку, функцію можна використовувати повторно для різних об’єктів. З іншого боку, більша гнучкість створює більше можливостей для помилок. Тут наша позиція полягає не в тому, щоб судити, добре чи погане таке рішення щодо дизайну мови. Ми зрозуміємо, як з цим працювати, як отримати переваги та уникнути проблем. ``` @@ -254,7 +254,7 @@ let user = { user.sayHi(); // Ілля ``` -Це особливість стрілочних функцій, це корисно, коли ми насправді не хочемо мати окреме `this`, а скоріше взяти це із зовнішнього контексту. Далі в главі ми детальніше розглянемо стрілочні функції. +Це особливість стрілочних функцій є корисною коли ми не хочемо мати окреме `this`, а лише взяти його із зовнішнього контексту. Далі в главі ми детальніше розглянемо стрілочні функції. ## Висновок @@ -266,6 +266,6 @@ user.sayHi(); // Ілля - Значення `this` визначається під час виконання. - Коли функція оголошена, вона може використовувати `this`, але саме `this` не має значення, доки функція не буде викликана. - Функцію можна копіювати між об'єктами. -- Коли функція викликається в синтаксисі "метода": `object.method()`, значення `this` під час виклику є `object` – об’кт перед крапкою. +- Коли функція викликається в синтаксисі "методу": `object.method()`, значення `this` під час виклику є `object` – об’кт перед крапкою. Зверніть увагу, що стрілочні функції є особливими: у них немає `this`. Коли всередині стрілочної функції звертаються до `this`, то його значення береться ззовні. From aab163db03204f70df4130e5ca8cf2156981277f Mon Sep 17 00:00:00 2001 From: Mykola Sopiha Date: Mon, 26 Jul 2021 01:34:13 +0300 Subject: [PATCH 3/5] fix: Object methods, 'this' --- .../4-object-property-this/solution.md | 2 +- .../4-object-property-this/task.md | 2 +- .../04-object-methods/8-chain-calls/task.md | 4 +-- .../04-object-methods/article.md | 26 +++++++++---------- 4 files changed, 17 insertions(+), 17 deletions(-) diff --git a/1-js/04-object-basics/04-object-methods/4-object-property-this/solution.md b/1-js/04-object-basics/04-object-methods/4-object-property-this/solution.md index 472a16f63..67483b211 100644 --- a/1-js/04-object-basics/04-object-methods/4-object-property-this/solution.md +++ b/1-js/04-object-basics/04-object-methods/4-object-property-this/solution.md @@ -52,4 +52,4 @@ let user = makeUser(); alert( user.ref().name ); // Іван ``` -Зараз це працює, оскільки `user.ref()` - це метод. І значення `this` встановлюється для об'єкта перед крапкою `.`. +Зараз це працює, оскільки `user.ref()` -- це метод. І значення `this` встановлюється для об'єкта перед крапкою `.`. diff --git a/1-js/04-object-basics/04-object-methods/4-object-property-this/task.md b/1-js/04-object-basics/04-object-methods/4-object-property-this/task.md index be135604b..693ea021d 100644 --- a/1-js/04-object-basics/04-object-methods/4-object-property-this/task.md +++ b/1-js/04-object-basics/04-object-methods/4-object-property-this/task.md @@ -2,7 +2,7 @@ importance: 5 --- -# Використання "this" у об’єктному літералі +# Використання "this" в об’єктному літералі Тут функція `makeUser` повертає об’єкт. diff --git a/1-js/04-object-basics/04-object-methods/8-chain-calls/task.md b/1-js/04-object-basics/04-object-methods/8-chain-calls/task.md index 46832f1e9..ac780f360 100644 --- a/1-js/04-object-basics/04-object-methods/8-chain-calls/task.md +++ b/1-js/04-object-basics/04-object-methods/8-chain-calls/task.md @@ -4,7 +4,7 @@ importance: 2 # Ланцюг викликів -Існує об'єкт `ladder`, що дозволяє підніматися вгору-вниз: +Існує об'єкт `ladder`, що дозволяє підійматися вгору-вниз: ```js let ladder = { @@ -30,7 +30,7 @@ ladder.down(); ladder.showStep(); // 1 ``` -Змініть код `up`, `down` і `showStep` так, щоб зробити доступними ланцюг викликів, наприклад: +Змініть код `up`, `down` і `showStep` так, щоб зробити доступним ланцюг викликів, наприклад: ```js ladder.up().up().down().showStep(); // 1 diff --git a/1-js/04-object-basics/04-object-methods/article.md b/1-js/04-object-basics/04-object-methods/article.md index efbec4ec5..cdabd5c96 100644 --- a/1-js/04-object-basics/04-object-methods/article.md +++ b/1-js/04-object-basics/04-object-methods/article.md @@ -15,7 +15,7 @@ let user = { ## Приклади методів -Для початку давайте навчимо `user` вітатися: +Для початку навчімо `user` вітатися: ```js run let user = { @@ -34,7 +34,7 @@ user.sayHi(); // Привіт! Тут ми щойно використали Function Expression (функціональний вираз) для створення функції та присвоїли її властивості `user.sayHi` об’єкта. -Потім ми викликати її завдяки `user.sayHi()`. Користувач тепер може говорити! +Потім ми викликали її завдяки `user.sayHi()`. Користувач тепер може говорити! Функція, яка є властивістю об’єкта, називається його *методом*. @@ -64,11 +64,11 @@ user.sayHi(); // Привіт! Коли ми пишемо наш код, використовуючи об’єкти для представлення сутностей, це називається [об’єктно-орієнтоване програмування ](https://uk.wikipedia.org/wiki/Об'єктно-орієнтоване_програмування), скорочено: "ООП". -ООП є великою предметною областю і цікавою наукою саме по собі. Як правильно обрати сутності? Як організувати взаємодію між ними? Це архітектура, і на цю тему є чудові книги, такі як "Шаблони проектування: елементи багаторазового об’єктно-орієнтованого програмного забезпечення" Е. Гамми, Р. Хелма, Р. Джонсона, Дж. Віссідеса або "Об’єктно-орієнтований аналіз та дизайн з застосунками" Г. Буча та ін. +ООП є великою предметною областю і цікавою наукою саме по собі. Як правильно обрати сутності? Як організувати взаємодію між ними? Це архітектура, і на цю тему є чудові книги, такі як "Шаблони проєктування: елементи багаторазового об’єктно-орієнтованого програмного забезпечення" Е. Гамми, Р. Хелма, Р. Джонсона, Дж. Віссідеса або "Об’єктно-орієнтований аналіз та дизайн з застосунками" Г. Буча та ін. ``` ### Скорочений запис методу -Існує більш короткий синтаксис для методів в літералі об’єкта: +Існує коротший синтаксис для методів в літералі об’єкта: ```js // цей об’єкт робить те ж саме @@ -112,7 +112,7 @@ let user = { sayHi() { *!* - // "this" - це "поточний об’єкт" + // "this" -- це "поточний об’єкт" alert(this.name); */!* } @@ -159,7 +159,7 @@ let user = { let admin = user; -user = null; // перезапишемо значення змінної для наглядності +user = null; // перезапишемо значення змінної для наочності *!* admin.sayHi(); // TypeError: Cannot read property 'name' of null @@ -170,7 +170,7 @@ admin.sayHi(); // TypeError: Cannot read property 'name' of null ## "this" не являється фіксованим -В JavaScript, ключове слово `this` веде себе не так, як в більшості мов програмування. +В JavaScript, ключове слово `this` поводить себе не так, як в більшості мов програмування. В цьому коді немає синтаксичної помилки: @@ -193,17 +193,17 @@ function sayHi() { } *!* -// використовуємо одну і ту ж функцію в двох об’єктах +// використовуємо одну і ту ж функцію у двох об’єктах user.f = sayHi; admin.f = sayHi; */!* // виклики функцій, приведені нижче, мають різні this -// "this" всередині функції являється посиланням на об’экт "перед крапкою" +// "this" всередині функції являється посиланням на об’єкт "перед крапкою" user.f(); // Іван (this == user) admin.f(); // Адмін (this == admin) -admin['f'](); // Адмін (неважливо те, як звертатися до методу об’єкта - через крапку чи квадратні дужки) +admin['f'](); // Адмін (неважливо те, як звертатися до методу об’єкта -- через крапку чи квадратні дужки) ``` Правило просте: якщо `obj.f()` викликано, то `this` це `obj` під час виконання `f`. Так що в даному прикладі це `user` або `admin`. @@ -221,7 +221,7 @@ sayHi(); // undefined В такому випадку `this` є `undefined` в суворому режимі (`"use strict"`). Якщо ми спробуємо звернутися до `this.name` трапиться помилка. -У несуворому режимі значенням `this` в такому випадку буде *глобальний об’єкт* (`window` у браузері, ми дійдемо до нього пізніше в главі [] (інформація: global-object)). Це - поведінка, яка склалася історично та виправляється завдяки використанню суворого режиму (`"use strict"`). +У несуворому режимі значенням `this` в такому випадку буде *глобальний об’єкт* (`window` у браузері, ми дійдемо до нього пізніше в главі [] (інформація: global-object)). Це -- поведінка, яка склалася історично та виправляється завдяки використанню суворого режиму (`"use strict"`). Зазвичай такий виклик є помилкою програмування. Якщо всередині функції є `this`, вона очікує виклику в контексті об’єкта. ```` @@ -265,7 +265,7 @@ user.sayHi(); // Ілля - Значення `this` визначається під час виконання. - Коли функція оголошена, вона може використовувати `this`, але саме `this` не має значення, доки функція не буде викликана. -- Функцію можна копіювати між об'єктами. -- Коли функція викликається в синтаксисі "методу": `object.method()`, значення `this` під час виклику є `object` – об’кт перед крапкою. +- Функцію можна копіювати між об’єктами. +- Коли функція викликається в синтаксисі "методу": `object.method()`, значення `this` під час виклику є `object` – об’єкт перед крапкою. Зверніть увагу, що стрілочні функції є особливими: у них немає `this`. Коли всередині стрілочної функції звертаються до `this`, то його значення береться ззовні. From d3fbbed92b5c36b3d91c515aaeadd7b0c4742657 Mon Sep 17 00:00:00 2001 From: Mykola Sopiha Date: Mon, 26 Jul 2021 02:11:28 +0300 Subject: [PATCH 4/5] fix: Object methods, 'this' --- 1-js/04-object-basics/04-object-methods/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/04-object-basics/04-object-methods/article.md b/1-js/04-object-basics/04-object-methods/article.md index cdabd5c96..e6f070ab0 100644 --- a/1-js/04-object-basics/04-object-methods/article.md +++ b/1-js/04-object-basics/04-object-methods/article.md @@ -257,7 +257,7 @@ user.sayHi(); // Ілля Це особливість стрілочних функцій є корисною коли ми не хочемо мати окреме `this`, а лише взяти його із зовнішнього контексту. Далі в главі ми детальніше розглянемо стрілочні функції. -## Висновок +## Підсумки - Функції, які зберігаються у властивостях об’єкта, називаються "методами". - Методи дозволяють об’єктам "діяти" подібно до `object.doSomething()`. From 8208c76d7e79609191ce6b97d6e4330b1a6923e8 Mon Sep 17 00:00:00 2001 From: Taras Date: Tue, 27 Jul 2021 22:09:36 +0300 Subject: [PATCH 5/5] Update 1-js/04-object-basics/04-object-methods/article.md --- 1-js/04-object-basics/04-object-methods/article.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/1-js/04-object-basics/04-object-methods/article.md b/1-js/04-object-basics/04-object-methods/article.md index e6f070ab0..ea4223edd 100644 --- a/1-js/04-object-basics/04-object-methods/article.md +++ b/1-js/04-object-basics/04-object-methods/article.md @@ -61,8 +61,7 @@ user.sayHi(); // Привіт! ``` ```smart header="Object-oriented programming" -Коли ми пишемо наш код, використовуючи об’єкти для представлення сутностей, це називається [об’єктно-орієнтоване програмування -](https://uk.wikipedia.org/wiki/Об'єктно-орієнтоване_програмування), скорочено: "ООП". +Коли ми пишемо наш код, використовуючи об’єкти для представлення сутностей, це називається [об’єктно-орієнтоване програмування](https://uk.wikipedia.org/wiki/Об'єктно-орієнтоване_програмування), скорочено: "ООП". ООП є великою предметною областю і цікавою наукою саме по собі. Як правильно обрати сутності? Як організувати взаємодію між ними? Це архітектура, і на цю тему є чудові книги, такі як "Шаблони проєктування: елементи багаторазового об’єктно-орієнтованого програмного забезпечення" Е. Гамми, Р. Хелма, Р. Джонсона, Дж. Віссідеса або "Об’єктно-орієнтований аналіз та дизайн з застосунками" Г. Буча та ін. ```