Skip to content
Open
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
2 changes: 1 addition & 1 deletion 1-js/03-code-quality/01-debugging-chrome/article.md
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,7 @@ There are buttons for it at the top of the right panel. Let's engage them.
That's good if we're not interested to see what happens inside the function call.

<span class="devtools" style="background-position:-4px -194px"></span> -- "Step into", hotkey `key:F11`.
: That's similar to "Step", but behaves differently in case of asynchronous function calls. If you're only starting to learn JavaScript, then you can ignore the difference, as we don't have asynchronous calls yet.
: That's similar to "Step", but behaves differently in case of asynchronous function calls. If you're only starting to learn JavaScript, then you can ignore the difference, as we haven't learnt about asynchronous calls yet.

For the future, just note that "Step" command ignores async actions, such as `setTimeout` (scheduled function call), that execute later. The "Step into" goes into their code, waiting for them if necessary. See [DevTools manual](https://developers.google.com/web/updates/2018/01/devtools#async) for more details.

Expand Down
2 changes: 1 addition & 1 deletion 1-js/06-advanced-functions/10-bind/article.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ When passing object methods as callbacks, for instance to `setTimeout`, there's

In this chapter we'll see the ways to fix it.

## Losing "this"
## The "losing `this`" problem

We've already seen examples of losing `this`. Once a method is passed somewhere separately from the object -- `this` is lost.

Expand Down
14 changes: 6 additions & 8 deletions 1-js/09-classes/01-class/article.md
Original file line number Diff line number Diff line change
Expand Up @@ -347,9 +347,7 @@ alert(user.name); // John

### Making bound methods with class fields

As demonstrated in the chapter <info:bind> functions in JavaScript have a dynamic `this`. It depends on the context of the call.

So if an object method is passed around and called in another context, `this` won't be a reference to its object any more.
Recall the **"losing `this`"** problem from the chapter <info:bind>. Functions in JavaScript have a dynamic `this` — it depends on how the function is called, not where it's defined. So, when an object method is passed around (e.g. as a callback to `setTimeout`, or as an event handler), `this` no longer points to the original object.

For instance, this code will show `undefined`:

Expand All @@ -371,20 +369,20 @@ setTimeout(button.click, 1000); // undefined
*/!*
```

The problem is called "losing `this`".

There are two approaches to fixing it, as discussed in the chapter <info:bind>:
In the chapter <info:bind>, we discussed two approaches to fixing it:

1. Pass a wrapper-function, such as `setTimeout(() => button.click(), 1000)`.
2. Bind the method to object, e.g. in the constructor.

Class fields provide another, quite elegant syntax:
Making methods bound to object instances using class fields is a third solution. Such methods, called "bound methods" can be created with a very elegant syntax, as shown below:

```js run
class Button {
constructor(value) {
this.value = value;
}

*!*
click = () => {
alert(this.value);
Expand All @@ -397,9 +395,9 @@ let button = new Button("hello");
setTimeout(button.click, 1000); // hello
```

The class field `click = () => {...}` is created on a per-object basis, there's a separate function for each `Button` object, with `this` inside it referencing that object. We can pass `button.click` around anywhere, and the value of `this` will always be correct.
The class field `click = () => {...}` is created per instance — each `Button` instance gets its own function with `this` permanently bound to that instance. Therefore, we can pass `button.click` anywhere, and `this` will always be correct.

That's especially useful in browser environment, for event listeners.
This is especially useful for event listeners in a browser environment.

## Summary

Expand Down