-
Notifications
You must be signed in to change notification settings - Fork 30
Object methods, "this" #99
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
Changes from 25 commits
5acaad4
0b7cdf7
fc36130
c27d811
cec745d
2c00ba5
f32d381
682ad7a
3c6e3b2
95071a1
c9f8bf6
528001f
c2246d4
6c37606
4d37377
bf914f1
fc8e2d0
c6e7d40
e619579
fad7054
4ce04d7
30fc462
1ce5947
ef13202
d8beb4e
769f335
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,29 +1,28 @@ | ||
**Error**! | ||
**Błąd**! | ||
|
||
Try it: | ||
Sprawdź ten kod: | ||
|
||
```js run | ||
let user = { | ||
name: "John", | ||
go: function() { alert(this.name) } | ||
} | ||
|
||
(user.go)() // error! | ||
(user.go)() // błąd! | ||
``` | ||
W większości przeglądarek wiadomość o błędzie nie zawiera zbyt wielu szczegółów mówiących co poszło nie tak. | ||
|
||
The error message in most browsers does not give us much of a clue about what went wrong. | ||
**Błąd wystąpił ponieważ nie ma średnika po`user = {...}`.** | ||
|
||
**The error appears because a semicolon is missing after `user = {...}`.** | ||
|
||
JavaScript does not auto-insert a semicolon before a bracket `(user.go)()`, so it reads the code like: | ||
JavaScript nie wstawia automatycznie średnika przed nawiasem `(user.go)()`, więc czyta kod w ten sposób:' | ||
|
||
```js no-beautify | ||
let user = { go:... }(user.go)() | ||
``` | ||
|
||
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. | ||
Teraz widzimy, że taka składnia jest w zasadzie wywołaniem funkcji `{ go: ... }` z argumentem `(user.go)`. W dodatku wywołanie to znajduje się w tej samej linijce co `let user`, więc do obiekt `user` nie został jeszcze nawet zdefiniowany, dlatego pojawia się błąd. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The sense of the first sentence has changed a bit. It should be something like: "Teraz widzimy, że taka składnia jest w zasadzie wywołaniem objektu Also, please remove redunand "do" word from that part of the second sentence: "więc do obiekt |
||
|
||
If we insert the semicolon, all is fine: | ||
Jeśli wstawimy średnik, kod będzie działać: | ||
|
||
```js run | ||
let user = { | ||
|
@@ -34,4 +33,4 @@ let user = { | |
(user.go)() // John | ||
``` | ||
|
||
Please note that brackets 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. | ||
Miej na uwadze, że nawiasy wokół `(user.go)` nie mają tu żadnego znaczenia. Zazwyczaj służą do zachowania kolejności wykonywania działań, jednak w tym przypadku kropka `.` i tak ma pierwszeństwo. Jedynie średnik jest tu niezbędny. |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -2,9 +2,9 @@ importance: 2 | |
|
||
--- | ||
|
||
# Syntax check | ||
# Sprawdzian ze składni | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. It should be more like: "Sprawdzenie składni" |
||
|
||
What is the result of this code? | ||
Jaki będzie rezultat wykonania tego kodu ? | ||
|
||
|
||
```js no-beautify | ||
|
@@ -16,4 +16,4 @@ let user = { | |
(user.go)() | ||
``` | ||
|
||
P.S. There's a pitfall :) | ||
P.S. Jest tu pułapka :) |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,22 +1,21 @@ | ||
|
||
Here's the explanations. | ||
Oto wyjaśnienie. | ||
|
||
1. That's a regular object method call. | ||
1. Jest to zwykłe wywołanie metody obiektu. | ||
|
||
2. The same, brackets do not change the order of operations here, the dot is first anyway. | ||
2. Tak jak powyżej. Nawiasy nie zmieniają tutaj kolejności wykonywania działań. Kropka ma pierwszeństwo. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Please try to avoid splitting one original sentence into some smaller ones while translating. So please change that to: "Tak jak powyżej, nawiasy nie zmieniają tutaj kolejności wykonywania działań, kropka i tak ma pierwszeństwo." |
||
|
||
3. Here we have a more complex call `(expression).method()`. The call works as if it were split into two lines: | ||
3. Tutaj mamy bardziej złożone wywołanie `(expression).method()`. Wywołanie działa tutaj tak jakby było rozbite na dwie linijki kodu: | ||
|
||
```js no-beautify | ||
f = obj.go; // calculate the expression | ||
f(); // call what we have | ||
f = obj.go; // przypisanie jako wartość zmiennej | ||
f(); // wywołanie stworzonej zmiennej | ||
``` | ||
|
||
Here `f()` is executed as a function, without `this`. | ||
`f()` jest tutaj wywoływane jako funkcja, bez `this`. | ||
|
||
4. The similar thing as `(3)`, to the left of the dot `.` we have an expression. | ||
4. Podobna sytuacja jak w `(3)`, po lewej stronie od kropki `.` mamy wyrażenie. | ||
|
||
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. | ||
|
||
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`. | ||
Żeby wyjaśnić zachowanie `(3)` i `(4)` musimy przypomnieć sobie, że akcesory właściwości (kropki lub nawiasy kwadratowe) zwracają wartość Typu Referencji. | ||
|
||
Każda inna operacja niż wywołanie metody (jak przypisanie `=` lub `||`) zmienia Typ Referencji na zwykłą wartość, która nie zawiera informacji pozwalającej ustalić wartości `this`. |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -2,11 +2,11 @@ importance: 3 | |
|
||
--- | ||
|
||
# Explain the value of "this" | ||
# Określ wartość "this": | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Please remove redunand ":" sign at the end of line. |
||
|
||
In the code below we intend to call `obj.go()` method 4 times in a row. | ||
W poniższym kodzie chcemy wywołać metodę `obj.go()` cztery razy pod rząd. | ||
|
||
But calls `(1)` and `(2)` works differently from `(3)` and `(4)`. Why? | ||
Jednak wywołania `(1)` i `(2)` działają inaczej niż `(3)` i `(4)`. Dlaczego? | ||
|
||
```js run no-beautify | ||
let obj, method; | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,6 +1,6 @@ | ||
**Answer: an error.** | ||
**Odpowiedź: błąd.** | ||
|
||
Try it: | ||
Uruchom ten kod: | ||
```js run | ||
function makeUser() { | ||
return { | ||
|
@@ -14,26 +14,26 @@ 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. | ||
Jest to spowodowane tym, że reguły ustalające wartość `this` nie uwzględniają faktu istnienia obiektu. Znaczenie ma tylko moment wywołania. | ||
|
||
Here the value of `this` inside `makeUser()` is `undefined`, because it is called as a function, not as a method with "dot" syntax. | ||
Wartość `this` wewnątrz `makeUser()` jest `undefined`, ponieważ jest wywołana jako funkcja, a nie jako metoda wywołana za pomocą "kropki". | ||
|
||
The value of `this` is one for the whole function, code blocks and object literals do not affect it. | ||
Wartość `this` jest tu ustalona wyłącznie dla tej funkcji. Bloki kodu i obiekty nie są w tym przypadku brane pod uwagę. | ||
|
||
So `ref: this` actually takes current `this` of the function. | ||
Zatem `ref:this` jest równoznaczne z `this` funkcji. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Please change "ref:this" into "ref: this" just for clarity. |
||
|
||
We can rewrite the function and return the same `this` with `undefined` value: | ||
Możemy napisać tę funkcję od nowa w taki sposób, że będzie zwracała takie samo `this` z wartością `undefined`: | ||
|
||
```js run | ||
function makeUser(){ | ||
return this; // this time there's no object literal | ||
return this; // tym razem nie jest zwracany obiekt | ||
} | ||
|
||
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. | ||
Jak widzisz wynik `alert( makeUser().name )` jest taki sam jak wynik `alert( user.ref.name )` z poprzedniego przykładu. | ||
|
||
Here's the opposite case: | ||
A tutaj odwrotna sytuacja: | ||
|
||
```js run | ||
function makeUser() { | ||
|
@@ -52,4 +52,4 @@ let user = makeUser(); | |
alert( user.ref().name ); // John | ||
``` | ||
|
||
Now it works, because `user.ref()` is a method. And the value of `this` is set to the object before dot `.`. | ||
Teraz kod działa prawidłowo, ponieważ `user.ref()` jest metodą, a wartością `this` jest obiekt przed kropką `.`. |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -2,11 +2,11 @@ importance: 5 | |
|
||
--- | ||
|
||
# Using "this" in object literal | ||
# "this" w literałach obiektowych | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. "Używanie |
||
|
||
Here the function `makeUser` returns an object. | ||
Poniższa funkcja `makeUser` zwraca obiekt. | ||
|
||
What is the result of accessing its `ref`? Why? | ||
Jaki będzie rezultat dostępu do jego `ref` ? I dlaczego? | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. please remove space between |
||
|
||
```js | ||
function makeUser() { | ||
|
@@ -18,6 +18,6 @@ function makeUser() { | |
|
||
let user = makeUser(); | ||
|
||
alert( user.ref.name ); // What's the result? | ||
alert( user.ref.name ); // Jaki będzie wynik? | ||
``` | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
missing space between "po" and "`user..."