diff --git a/1-js/03-code-quality/01-debugging-chrome/article.md b/1-js/03-code-quality/01-debugging-chrome/article.md index 4f50fb428b..eff9fd2681 100644 --- a/1-js/03-code-quality/01-debugging-chrome/article.md +++ b/1-js/03-code-quality/01-debugging-chrome/article.md @@ -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. -- "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. diff --git a/1-js/06-advanced-functions/10-bind/article.md b/1-js/06-advanced-functions/10-bind/article.md index 7a6e47b90a..2611158581 100644 --- a/1-js/06-advanced-functions/10-bind/article.md +++ b/1-js/06-advanced-functions/10-bind/article.md @@ -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. diff --git a/1-js/09-classes/01-class/article.md b/1-js/09-classes/01-class/article.md index 135d24929b..f5c50c4b70 100644 --- a/1-js/09-classes/01-class/article.md +++ b/1-js/09-classes/01-class/article.md @@ -347,9 +347,7 @@ alert(user.name); // John ### Making bound methods with class fields -As demonstrated in the chapter 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 . 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`: @@ -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 : +In the chapter , 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); @@ -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