Merge branch 'master' into patch-18

This commit is contained in:
Alexey Pyltsyn 2019-10-22 11:07:52 +03:00 committed by GitHub
commit 29ea8907d1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
17 changed files with 42 additions and 43 deletions

View file

@ -4,7 +4,7 @@ importance: 3
# Explain the value of "this"
In the code below we intend to call `user.go()` method 4 times in a row.
In the code below we intend to call `obj.go()` method 4 times in a row.
But calls `(1)` and `(2)` works differently from `(3)` and `(4)`. Why?

View file

@ -288,7 +288,7 @@ For server-side JavaScript, that limitation does not exist, and there exist othe
- Methods `setTimeout(func, delay, ...args)` and `setInterval(func, delay, ...args)` allow us to run the `func` once/regularly after `delay` milliseconds.
- To cancel the execution, we should call `clearTimeout/clearInterval` with the value returned by `setTimeout/setInterval`.
- Nested `setTimeout` calls is a more flexible alternative to `setInterval`, allowing us to set the time *between* executions more precisely.
- Nested `setTimeout` calls are a more flexible alternative to `setInterval`, allowing us to set the time *between* executions more precisely.
- Zero delay scheduling with `setTimeout(func, 0)` (the same as `setTimeout(func)`) is used to schedule the call "as soon as possible, but after the current script is complete".
- The browser limits the minimal delay for five or more nested call of `setTimeout` or for `setInterval` (after 5th call) to 4ms. That's for historical reasons.
@ -299,4 +299,4 @@ For example, the in-browser timer may slow down for a lot of reasons:
- The browser tab is in the background mode.
- The laptop is on battery.
All that may increase the minimal timer resolution (the minimal delay) to 300ms or even 1000ms depending on the browser and OS-level performance settings.
All that may increase the minimal timer resolution (the minimal delay) by 300ms or even 1000ms depending on the browser and OS-level performance settings.

View file

@ -8,7 +8,7 @@ The task is a little more complex variant of <info:task/question-use-bind>.
The `user` object was modified. Now instead of two functions `loginOk/loginFail`, it has a single function `user.login(true/false)`.
What to pass `askPassword` in the code below, so that it calls `user.login(true)` as `ok` and `user.login(false)` as `fail`?
What should we pass `askPassword` in the code below, so that it calls `user.login(true)` as `ok` and `user.login(false)` as `fail`?
```js
function askPassword(ok, fail) {

View file

@ -98,7 +98,7 @@ Functions provide a built-in method [bind](mdn:js/Function/bind) that allows to
The basic syntax is:
```js
// more complex syntax will be little later
// more complex syntax will come a little later
let boundFunc = func.bind(context);
```

View file

@ -118,9 +118,9 @@ Here we had to create additional variables `args` and `ctx` so that the function
Arrow functions:
- Do not have `this`.
- Do not have `arguments`.
- Can't be called with `new`.
- (They also don't have `super`, but we didn't study it. Will be in the chapter <info:class-inheritance>).
- Do not have `this`
- Do not have `arguments`
- Can't be called with `new`
- They also don't have `super`, but we didn't study it yet. We will on the chapter <info:class-inheritance>
That's because they are meant for short pieces of code that do not have their own "context", but rather works in the current one. And they really shine in that use case.
That's because they are meant for short pieces of code that do not have their own "context", but rather work in the current one. And they really shine in that use case.

View file

@ -3,7 +3,7 @@
As we know, objects can store properties.
Till now, a property was a simple "key-value" pair to us. But an object property is actually a more flexible and powerful thing.
Until now, a property was a simple "key-value" pair to us. But an object property is actually a more flexible and powerful thing.
In this chapter we'll study additional configuration options, and in the next we'll see how to invisibly turn them into getter/setter functions.
@ -134,7 +134,7 @@ let user = { };
Object.defineProperty(user, "name", {
*!*
value: "John",
// for new properties need to explicitly list what's true
// for new properties we need to explicitly list what's true
enumerable: true,
configurable: true
*/!*
@ -148,7 +148,7 @@ user.name = "Pete"; // Error
Now let's add a custom `toString` to `user`.
Normally, a built-in `toString` for objects is non-enumerable, it does not show up in `for..in`. But if we add `toString` of our own, then by default it shows up in `for..in`, like this:
Normally, a built-in `toString` for objects is non-enumerable, it does not show up in `for..in`. But if we add a `toString` of our own, then by default it shows up in `for..in`, like this:
```js run
let user = {
@ -162,7 +162,7 @@ let user = {
for (let key in user) alert(key); // name, toString
```
If we don't like it, then we can set `enumerable:false`. Then it won't appear in `for..in` loop, just like the built-in one:
If we don't like it, then we can set `enumerable:false`. Then it won't appear in a `for..in` loop, just like the built-in one:
```js run
let user = {

View file

@ -3,7 +3,7 @@
There are two kinds of properties.
The first kind is *data properties*. We already know how to work with them. All properties that we've been using till now were data properties.
The first kind is *data properties*. We already know how to work with them. All properties that we've been using until now were data properties.
The second type of properties is something new. It's *accessor properties*. They are essentially functions that work on getting and setting a value, but look like regular properties to an external code.
@ -189,9 +189,9 @@ Technically, external code is able to access the name directly by using `user._n
## Using for compatibility
One of the great uses of accessors -- they allow to take control over a "regular" data property at any moment by replacing it with getter and setter and tweak its behavior.
One of the great uses of accessors is that they allow to take control over a "regular" data property at any moment by replacing it with a getter and a setter and tweak its behavior.
Imagine, we started implementing user objects using data properties `name` and `age`:
Imagine we started implementing user objects using data properties `name` and `age`:
```js
function User(name, age) {

View file

@ -6,7 +6,7 @@ importance: 5
The task has two parts.
We have objects:
Given the following objects:
```js
let head = {

View file

@ -2,7 +2,7 @@ importance: 5
---
# Where it writes?
# Where does it write?
We have `rabbit` inheriting from `animal`.

View file

@ -2,11 +2,11 @@ importance: 5
---
# Why two hamsters are full?
# Why are both hamsters full?
We have two hamsters: `speedy` and `lazy` inheriting from the general `hamster` object.
When we feed one of them, the other one is also full. Why? How to fix it?
When we feed one of them, the other one is also full. Why? How can we fix it?
```js run
let hamster = {

View file

@ -246,7 +246,7 @@ The resulting picture:
![](proto-animal-rabbit-walk-3.svg)
If we had other objects like `bird`, `snake` etc., inheriting from `animal`, they would also gain access to methods of `animal`. But `this` in each method call would be the corresponding object, evaluated at the call-time (before dot), not `animal`. So when we write data into `this`, it is stored into these objects.
If we had other objects, like `bird`, `snake`, etc., inheriting from `animal`, they would also gain access to methods of `animal`. But `this` in each method call would be the corresponding object, evaluated at the call-time (before dot), not `animal`. So when we write data into `this`, it is stored into these objects.
As a result, methods are shared, but the object state is not.

View file

@ -20,7 +20,7 @@ alert( rabbit.eats ); // true
```
1. We added one more string (emphasized), what `alert` shows now?
1. We added one more string (emphasized). What will `alert` show now?
```js
function Rabbit() {}
@ -54,7 +54,7 @@ alert( rabbit.eats ); // true
alert( rabbit.eats ); // ?
```
3. Like this (replaced one line)?
3. And like this (replaced one line)?
```js
function Rabbit() {}

View file

@ -2,7 +2,7 @@
Remember, new objects can be created with a constructor function, like `new F()`.
If `F.prototype` is an object, then `new` operator uses it to set `[[Prototype]]` for the new object.
If `F.prototype` is an object, then the `new` operator uses it to set `[[Prototype]]` for the new object.
```smart
JavaScript had prototypal inheritance from the beginning. It was one of the core features of the language.
@ -158,9 +158,9 @@ Rabbit.prototype = {
In this chapter we briefly described the way of setting a `[[Prototype]]` for objects created via a constructor function. Later we'll see more advanced programming patterns that rely on it.
Everything is quite simple, just few notes to make things clear:
Everything is quite simple, just a few notes to make things clear:
- The `F.prototype` property (don't mess with `[[Prototype]]`) sets `[[Prototype]]` of new objects when `new F()` is called.
- The `F.prototype` property (don't mistake it for `[[Prototype]]`) sets `[[Prototype]]` of new objects when `new F()` is called.
- The value of `F.prototype` should be either an object or `null`: other values won't work.
- The `"prototype"` property only has such a special effect when set on a constructor function, and invoked with `new`.

View file

@ -603,7 +603,7 @@ Here are examples of operations and `Reflect` calls that do the same:
|-----------------|----------------|-------------|
| `obj[prop]` | `Reflect.get(obj, prop)` | `[[Get]]` |
| `obj[prop] = value` | `Reflect.set(obj, prop, value)` | `[[Set]]` |
| `delete obj[prop]` | `Reflect.deleteProperty(obj, prop)` | `[[HasProperty]]` |
| `delete obj[prop]` | `Reflect.deleteProperty(obj, prop)` | `[[Delete]]` |
| `new F(value)` | `Reflect.construct(F, value)` | `[[Construct]]` |
| ... | ... | ... |

View file

@ -1,12 +1,12 @@
# Modifying the document
DOM modifications is the key to create "live" pages.
DOM modification is the key to creating "live" pages.
Here we'll see how to create new elements "on the fly" and modify the existing page content.
## Example: show a message
Let's see the methods on example. We'll add a message on the page that looks nicer than `alert`.
Let's demonstrate using an example. We'll add a message on the page that looks nicer than `alert`.
Here's how it will look:
@ -93,9 +93,9 @@ Here's the full code:
This set of methods provides more ways to insert:
- `node.append(...nodes or strings)` -- append nodes or strings at the end of `node`,
- `node.prepend(...nodes or strings)` -- insert nodes or strings into the beginning of `node`,
- `node.before(...nodes or strings)` - insert nodes or strings before the `node`,
- `node.after(...nodes or strings)` - insert nodes or strings after the `node`,
- `node.prepend(...nodes or strings)` -- insert nodes or strings at the beginning of `node`,
- `node.before(...nodes or strings)` - insert nodes or strings before `node`,
- `node.after(...nodes or strings)` - insert nodes or strings after `node`,
- `node.replaceWith(...nodes or strings)` - replaces `node` with the given nodes or strings.
Here's an example of using these methods to add items to a list and the text before/after it:
@ -199,7 +199,7 @@ For instance:
<p>Bye</p>
```
That's how we can append an arbitrary HTML to the page.
That's how we can append arbitrary HTML to the page.
Here's the picture of insertion variants:

View file

@ -3,11 +3,11 @@
In modern websites, scripts are often "heavier" than HTML: their download size is larger, and processing time is also longer.
When the browser loads HTML and comes across a `<script>...</script>` tag, it can't continue building DOM. It must execute the script right now. The same happens for external scripts `<script src="..."></script>`: the browser must wait until the script downloads, execute it, and only after process the rest of the page.
When the browser loads HTML and comes across a `<script>...</script>` tag, it can't continue building the DOM. It must execute the script right now. The same happens for external scripts `<script src="..."></script>`: the browser must wait until the script downloads, execute it, and only after process the rest of the page.
That leads to two important issues:
1. Scripts can't see DOM elements below them, so can't add handlers etc.
1. Scripts can't see DOM elements below them, so they can't add handlers etc.
2. If there's a bulky script at the top of the page, it "blocks the page". Users can't see the page content till it downloads and runs:
```html run height=100
@ -31,7 +31,7 @@ There are some workarounds to that. For instance, we can put a script at the bot
But this solution is far from perfect. For example, the browser notices the script (and can start downloading it) only after it downloaded the full HTML document. For long HTML documents, that may be a noticeable delay.
Such things are invisible for people using very fast connections, but many people in the world still have slower internet speeds and use far-from-perfect mobile internet.
Such things are invisible for people using very fast connections, but many people in the world still have slow internet speeds and use a far-from-perfect mobile internet connection.
Luckily, there are two `<script>` attributes that solve the problem for us: `defer` and `async`.
@ -68,7 +68,7 @@ The following example demonstrates that:
```
1. The page content shows up immediately.
2. `DOMContentLoaded` waits for the deferred script. It only triggers when the script `(2)` is downloaded is executed.
2. `DOMContentLoaded` waits for the deferred script. It only triggers when the script `(2)` is downloaded and executed.
Deferred scripts keep their relative order, just like regular scripts.
@ -94,8 +94,8 @@ The `defer` attribute is ignored if the `<script>` tag has no `src`.
The `async` attribute means that a script is completely independent:
- The page doesn't wait for async scripts, the contents is processed and displayed.
- `DOMContentLoaded` and async scripts don't wait each other:
- The page doesn't wait for async scripts, the contents are processed and displayed.
- `DOMContentLoaded` and async scripts don't wait for each other:
- `DOMContentLoaded` may happen both before an async script (if an async script finishes loading after the page is complete)
- ...or after an async script (if an async script is short or was in HTTP-cache)
- Other scripts don't wait for `async` scripts, and `async` scripts don't wait for them.
@ -146,7 +146,6 @@ That is:
- They don't wait for anything, nothing waits for them.
- The script that loads first -- runs first ("load-first" order).
We can change the load-first order into the document order (just like regular scripts) by explicitly setting `async` property to `false`:
```js run
let script = document.createElement('script');
@ -192,7 +191,7 @@ Please note that if you're using `defer`, then the page is visible *before* the
So the user may read the page, but some graphical components are probably not ready yet.
There should be "loading" indication in proper places, not-working buttons disabled, to clearly show the user what's ready and what's not.
There should be "loading" indications in the proper places, and disabled buttons should show as such, so the user can clearly see what's ready and what's not.
```
In practice, `defer` is used for scripts that need the whole DOM and/or their relative execution order is important. And `async` is used for independent scripts, like counters or ads. And their relative execution order does not matter.

View file

@ -140,7 +140,7 @@ To clearly understand the change, let's trace the search step by step.
![](witch_lazy6.svg)
In this example we saw how the lazy mode works for `pattern:+?`. Quantifiers `pattern:+?` and `pattern:??` work the similar way -- the regexp engine increases the number of repetitions only if the rest of the pattern can't match on the given position.
In this example we saw how the lazy mode works for `pattern:+?`. Quantifiers `pattern:*?` and `pattern:??` work the similar way -- the regexp engine increases the number of repetitions only if the rest of the pattern can't match on the given position.
**Laziness is only enabled for the quantifier with `?`.**