Skip to content

Commit c27d811

Browse files
authored
almost done
1 parent fc36130 commit c27d811

File tree

1 file changed

+68
-66
lines changed

1 file changed

+68
-66
lines changed

1-js/04-object-basics/04-object-methods/article.md

Lines changed: 68 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -95,15 +95,15 @@ Szczerze mowiąc, oba zapisy nie są całkowicie identyczne. Istnieją subtelne
9595

9696
## "this" w metodach
9797

98-
It's common that an object method needs to access the information stored in the object to do its job.
98+
Często się zdarza, że metoda obiektu do poprawnego działania potrzebuje dostępu do informacji zawartej w tym samym obiekcie
9999

100-
For instance, the code inside `user.sayHi()` may need the name of the `user`.
100+
DLa przykładu, kod wewnątrz `user.sayHi()` może wymagać imienia użytkownika `user`.
101101

102-
**To access the object, a method can use the `this` keyword.**
102+
**Aby zdobyć taki dostęp, metoda może wykorzystać słowo kluczowe `this`**
103103

104-
The value of `this` is the object "before dot", the one used to call the method.
104+
Wartością `this` jest obiekt "przed kropką", który został wykorzystany do wywołania metody.
105105

106-
For instance:
106+
Na przykład:
107107

108108
```js run
109109
let user = {
@@ -112,7 +112,7 @@ let user = {
112112

113113
sayHi() {
114114
*!*
115-
// "this" is the "current object"
115+
// "this" jest "aktualnym obiektem"
116116
alert(this.name);
117117
*/!*
118118
}
@@ -122,9 +122,9 @@ let user = {
122122
user.sayHi(); // John
123123
```
124124

125-
Here during the execution of `user.sayHi()`, the value of `this` will be `user`.
125+
Podczas wykonania `user.sayHi()`, wartością `this` będzie `user`.
126126

127-
Technically, it's also possible to access the object without `this`, by referencing it via the outer variable:
127+
Możliwe jest również uzyskanie dostępu do obiektu bez używania `this`, przez odwołąnie się do niego przez zmienną z zewnątrz:
128128

129129
```js
130130
let user = {
@@ -133,16 +133,16 @@ let user = {
133133

134134
sayHi() {
135135
*!*
136-
alert(user.name); // "user" instead of "this"
136+
alert(user.name); // "user" zamiast "this"
137137
*/!*
138138
}
139139

140140
};
141141
```
142142

143-
...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.
143+
...Jednak na takim kodzie nie można polegać. Jeśli skopiujemy obiekt `user` do innej zmiennej, np `admin = user` i zmienimy wartości w zmiennej `user`, wtedy nasza metoda będzie się odwoływać do niewłaściwego obiektu.
144144

145-
That's demonstrated below:
145+
Taki przykład przedstawiono poniżej:
146146

147147
```js run
148148
let user = {
@@ -151,36 +151,36 @@ let user = {
151151

152152
sayHi() {
153153
*!*
154-
alert( user.name ); // leads to an error
154+
alert( user.name ); // pojawi się błąd
155155
*/!*
156156
}
157157

158158
};
159159

160160

161161
let admin = user;
162-
user = null; // overwrite to make things obvious
162+
user = null; // dla pewności nadpisujemy zmienną
163163

164-
admin.sayHi(); // Whoops! inside sayHi(), the old name is used! error!
164+
admin.sayHi(); // Ups! wewnątrz sayHi(), wykorzystywana jest zła zmienna! błąd!
165165
```
166166

167-
If we used `this.name` instead of `user.name` inside the `alert`, then the code would work.
167+
Jeśli użylibyśmy `this.name` zamiast `user.name` wewnątrz `alert`, wtedy kod by zadziałał.
168168

169-
## "this" is not bound
169+
## "this" nie jest powiązane
170170

171-
In JavaScript, keyword `this` behaves unlike most other programming languages. It can be used in any function.
171+
W JavaScript słowo kluczowe `this` zachowuje się inaczej niż w innych językach programowania. Może być użyte w każdej funkcji.
172172

173-
There's no syntax error in the following example:
173+
Zapis taki jak w poniższym przykładzie nie powoduje błędu:
174174

175175
```js
176176
function sayHi() {
177177
alert( *!*this*/!*.name );
178178
}
179179
```
180180

181-
The value of `this` is evaluated during the run-time, depending on the context.
181+
Wartość `this` jest określana podczas wykonywania kodu, zależnie od kontekstu.
182182

183-
For instance, here the same function is assigned to two different objects and has different "this" in the calls:
183+
Na przykład tutaj ta sama funkcja jest przypisana do dwóch różnych obiektów i posiada różne "this" przy wywoływaniach:
184184

185185
```js run
186186
let user = { name: "John" };
@@ -191,23 +191,23 @@ function sayHi() {
191191
}
192192

193193
*!*
194-
// use the same function in two objects
194+
// używamy tej samej funkcji w obu obiektach
195195
user.f = sayHi;
196196
admin.f = sayHi;
197197
*/!*
198198

199-
// these calls have different this
200-
// "this" inside the function is the object "before the dot"
199+
// wywołania mają różne this
200+
// "this" wewnątrz funkcji jest obiektem "przed kropką"
201201
user.f(); // John (this == user)
202202
admin.f(); // Admin (this == admin)
203203

204-
admin['f'](); // Admin (dot or square brackets access the method – doesn't matter)
204+
admin['f'](); // Admin (kropka lub nawiasy kwadratowe udzielają dostępu do metody)
205205
```
206206

207-
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.
207+
Zasada jest prosta: jeśli `obj.f()` jest wywołana, to `this` jest `obj` podczas wywoływania `f`. Więc w powyższym przykładzie jest to zarówno `user` lub `admin`.
208208

209209
````smart header="Calling without an object: `this == undefined`"
210-
We can even call the function without an object at all:
210+
Możemy wywołać tę funkcję nawet bez obiektu:
211211

212212
```js run
213213
function sayHi() {
@@ -217,32 +217,34 @@ function sayHi() {
217217
sayHi(); // undefined
218218
```
219219

220-
In this case `this` is `undefined` in strict mode. If we try to access `this.name`, there will be an error.
220+
W tym przypadku `this` jest `undefined` w trybie ścisłym. Jeśli spróbujemy uzyskać dostęp do `this.name` pojawi się błąd.
221221

222-
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.
222+
Poza trybem ścisłym, w tym przypadku, wartością `this` będzie *obiekt globalny* (`window` w przeglądarce, dojdziemy do tego w późniejszym rozdziale [](info:global-object)). Jest to zamierzchłe zachowanie, które tryb `"use strict"` naprawia.
223223

224-
Usually such call is a programming error. If there's `this` inside a function, it expects to be called in an object context.
224+
Zazwyczaj takie wywołanie jest błędem w kodzie. Jeśli w funkcji istnieje `this`, to powinna zostać wywołana jako metoda obiektu.
225225
````
226226
227+
227228
```smart header="The consequences of unbound `this`"
228-
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.
229+
Jeśli programujesz w innym języku, zapewne przywykłeś do "powiązanego this", gdzie metoda zdefiniowana w obiekcie zawsze posiada `this` wskazujące na ten obiekt.
229230
230-
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".
231+
W JavaScript `this` jest "wolne", jego wartość jest określana podczas wykonywania kodu i nie zależy od tego gdzie została zadeklarowana metoda, tylko jaki obiekt znajduje się "przed kropką".
231232
232-
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.
233+
Koncepcja określania `this` podczas wykonywania kodu ma wady i zalety. Z jednej strony, funkcja może być wykorzystywana przez różne obiekty. Z drugiej - im większa swoboda, tym większa podatność na pomyłki.
233234
234-
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.
235+
Naszym zadaniem nie jest ocena czy taki wybór przy tworzeniu języka był dobry czy zły. Zastanawiamy się raczej jak z tym pracować, jak zyskać dzięki temu korzyści i jak uniknąć problemów.
235236
```
236237
237-
## Internals: Reference Type
238+
## Internals: Referencje
238239
239-
```warn header="In-depth language feature"
240-
This section covers an advanced topic, to understand certain edge-cases better.
240+
```warn header="Zaawansowane szczegóły języka"
241+
Ta część zawiera bardziej zaawansowaną terminologię, pomagającą lepiej zrozumieć skrajne przypadki.
241242
242-
If you want to go on faster, it can be skipped or postponed.
243+
Jeśli chcesz szybciej przejść dalej, możesz pominąć tę część lub zostawić do przeczytania na później.
243244
```
244245
245246
An intricate method call can lose `this`, for instance:
247+
Zawiłą metoda może doprowadzić do zgubienia `this`, na przykład:
246248
247249
```js run
248250
let user = {
@@ -251,40 +253,40 @@ let user = {
251253
bye() { alert("Bye"); }
252254
};
253255
254-
user.hi(); // John (the simple call works)
256+
user.hi(); // John (zwykłe wywołanie działa bez problemu)
255257
256258
*!*
257-
// now let's call user.hi or user.bye depending on the name
258-
(user.name == "John" ? user.hi : user.bye)(); // Error!
259+
// teraz warunkowo wywołajmy metodę user.hi lub user.bye w zależności od wartości name
260+
(user.name == "John" ? user.hi : user.bye)(); // Błąd!
259261
*/!*
260262
```
261263
262-
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`.
264+
W ostatniej linijce operator warunkowy wybiera pomiędzy `user.hi` i `user.bye`. W powyższym przykładzie wynikiem jest `ures.hi`.
263265
264-
Then the method is immediately called with parentheses `()`. But it doesn't work correctly!
266+
Następnie metoda jest natychmiast wywoływana z nawiasami `()`. Ale nie działa prawidłowo!
265267
266-
As you can see, the call results in an error, because the value of `"this"` inside the call becomes `undefined`.
268+
Jak widzisz, wywołanie powoduje błąd, ponieważ wartość `"this"` wewnątrz metody staje się `undefined`.
267269
268-
This works (object dot method):
270+
Ten kod działa (obiekt kropka metoda):
269271
```js
270272
user.hi();
271273
```
272274
273-
This doesn't (evaluated method):
275+
Ten nie działa (metoda określana):
274276
```js
275-
(user.name == "John" ? user.hi : user.bye)(); // Error!
277+
(user.name == "John" ? user.hi : user.bye)(); // Błąd!
276278
```
277279
278-
Why? If we want to understand why it happens, let's get under the hood of how `obj.method()` call works.
280+
Dlaczego? Jeśli chcemy zrozumieć dlaczego tak się dzieje, przyjrzyjmy się dokładnie działa jak wywołanie `obj.method()`.
279281
280-
Looking closely, we may notice two operations in `obj.method()` statement:
282+
Patrząc uważne, możemy zaobserwować dwie wykonujące się operacje w `obj.method()`:
281283
282-
1. First, the dot `'.'` retrieves the property `obj.method`.
283-
2. Then parentheses `()` execute it.
284+
1. Najpierw, kropka `'.'` pobiera wląściwość `obj.method`.
285+
2. Następnie nawiasy `()` ją wykonują.
284286
285-
So, how does the information about `this` get passed from the first part to the second one?
287+
Jak więc informacja o `this` migruje z pierwszej części do drugiej?
286288
287-
If we put these operations on separate lines, then `this` will be lost for sure:
289+
Jeśli rozłożymy te operacje na oddzielne linie kodu, wartość `this` z pewnością zostanie zgubiona:
288290
289291
```js run
290292
let user = {
@@ -293,38 +295,38 @@ let user = {
293295
}
294296
295297
*!*
296-
// split getting and calling the method in two lines
298+
// podział pomiędzy pobraniem i wywołanie metody na oddzielne linie
297299
let hi = user.hi;
298-
hi(); // Error, because this is undefined
300+
hi(); // Błąd, ponieważ this jest undefined
299301
*/!*
300302
```
301303
302-
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`.
304+
`hi = user.hi` przypisuje metodę do zmiennej, a na samym końcu jest wywoływana jako osobna funkcja, więc `this` nie posiada już tutaj żadnej wartości.
303305
304-
**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).**
306+
**Żeby `user.hi()` działalo, JavaScript używa sztuczki -- kropka `'.'` nie zwraca funkcji, tylko wartość ze specjalną]ym [Typem Referencji](https://tc39.github.io/ecma262/#sec-reference-specification-type).**
305307
306-
The Reference Type is a "specification type". We can't explicitly use it, but it is used internally by the language.
308+
Typ Referencji jest "typem specyfikacji". Nie możemy go bezpośrednio uzyć, ale jest on wbudowany i wykorzystywany przez język.
307309
308-
The value of Reference Type is a three-value combination `(base, name, strict)`, where:
310+
Wartością Typu Referencji jest trójwartościowa kombinacja `(base, name, strict)`, gdzie:
309311
310-
- `base` is the object.
311-
- `name` is the property name.
312-
- `strict` is true if `use strict` is in effect.
312+
- `base` jest obiektem.
313+
- `name` jest nazwą właściwości.
314+
- `strict` jest true jeśli używamy `use strict`.
313315
314-
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:
316+
Wynikiem dostępu do właściwości `user.hi` nie jest funkcja, tylko wartość Typu Referencji. Dla `user.hi` w trybie ścisłym jest to:
315317
316318
```js
317319
// Reference Type value
318320
(user, "hi", true)
319321
```
320322
321-
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).
323+
Jeśli wywołujemy nawiasy `()` na Typ Referencji, otrzymują one całą informację o obiekcie, jego metodzie i mogą ustawić dla this prawidłową wartość (w tym przypadku `=user`).
322324
323-
Reference type is a special "intermediary" internal type, with the purpose to pass information from dot `.` to calling parentheses `()`.
325+
Typ Referencji jest specjalnym "pośrednim" typem wewnętrznym, którego zadaniem jest przekazywanie informacji z kropki `.` do nawiasów `()`.
324326
325-
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`.
327+
Każda inna operacja, jak przypisanie `hi = user.hi` odrzuca całkowicie Typ Referencji, bierze wartośc z `user.hi` (funkcji) i przekazuje ją dalej. Zatem każda następna operacja "gubi" `this`.
326328
327-
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). Later in this tutorial, we will learn various ways to solve this problem such as [func.bind()](/bind#solution-2-bind).
329+
Podsumowując, wartość `this` jest przekazywane we właściwy sposób jeśli funkcja jest wywoływana za pomocą kropki `obj.method()` lub nawiasów kwadratowych `obj[`method`]()` (obie składnie zadziałają tutaj identycznie). W dalszej części kursu, nauczymy się różnych możliwości aby rozwiązać ten problem, takich jak [func.bind()](/bind#solution-2-bind).
328330
329331
## Arrow functions have no "this"
330332

0 commit comments

Comments
 (0)