final move to png
This commit is contained in:
parent
0ed8583dc2
commit
90855e8899
43 changed files with 101 additions and 101 deletions
|
@ -64,7 +64,7 @@ JavaScript -- быстрый и мощный язык, но браузер на
|
|||
|
||||
**Большинство возможностей JavaScript в браузере ограничено текущим окном и страницей.**
|
||||
|
||||
<img src="limitations.svg" width="530" height="400">
|
||||
<img src="limitations.png" width="530" height="400">
|
||||
|
||||
<ul>
|
||||
<li>JavaScript не может читать/записывать произвольные файлы на жесткий диск, копировать их или вызывать программы. Он не имеет прямого доступа к операционной системе.
|
||||
|
|
|
@ -52,7 +52,7 @@ var user = 'John', age = 25, message = 'Hello';
|
|||
|
||||
Например, переменная `message` -- это коробка, в которой хранится значение `"Hello!"`:
|
||||
|
||||
<img src="variable.svg">
|
||||
<img src="variable.png">
|
||||
|
||||
В коробку можно положить любое значение, а позже - поменять его. Значение в переменной можно изменять сколько угодно раз:
|
||||
|
||||
|
@ -69,7 +69,7 @@ alert( message );
|
|||
|
||||
При изменении значения старое содержимое переменной удаляется.
|
||||
|
||||
<img src="variable-change.svg">
|
||||
<img src="variable-change.png">
|
||||
|
||||
Можно объявить две переменные и копировать данные из одной в другую:
|
||||
|
||||
|
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 22 KiB |
|
@ -7,7 +7,7 @@
|
|||
|
||||
Шпаргалка с правилами синтаксиса (детально их варианты разобраны далее):
|
||||
|
||||
<img src="code-style.svg">
|
||||
<img src="code-style.png">
|
||||
|
||||
<!--
|
||||
```js
|
||||
|
@ -57,7 +57,7 @@ if (n < 0) {
|
|||
```
|
||||
-->
|
||||
|
||||
<img src="figure-bracket-style.svg">
|
||||
<img src="figure-bracket-style.png">
|
||||
|
||||
Если у вас уже есть опыт в разработке, и вы привыкли делать скобку на отдельной строке -- это тоже вариант. В конце концов, решать вам. Но в большинстве JavaScript-фреймворков стиль именно такой.
|
||||
|
||||
|
|
|
@ -13,7 +13,7 @@
|
|||
|
||||
Её можно легко представить как шкаф с подписанными ящиками. Все данные хранятся в ящичках. По имени можно легко найти ящик и взять то значение, которое в нём лежит.
|
||||
|
||||
<img src="object.svg">
|
||||
<img src="object.png">
|
||||
|
||||
В отличие от реальных шкафов, в ассоциативный массив можно в любой момент добавить новые именованные "ящики" или удалить существующие. Далее мы увидим примеры, как это делается.
|
||||
|
||||
|
@ -40,7 +40,7 @@
|
|||
var person = {}; // пока пустой
|
||||
```
|
||||
|
||||
<img src="object-person-empty.svg">
|
||||
<img src="object-person-empty.png">
|
||||
|
||||
|
||||
Основные операции с объектами -- это создание, получение и удаление свойств.
|
||||
|
@ -55,7 +55,7 @@ person.name = 'Вася';
|
|||
person.age = 25; // запишем ещё одно свойство: с именем 'age' и значением 25
|
||||
```
|
||||
|
||||
<img src="object-person-1.svg">
|
||||
<img src="object-person-1.png">
|
||||
|
||||
Значения хранятся "внутри" ящиков. Обратим внимание -- любые значения, любых типов: число, строка -- не важно.
|
||||
|
||||
|
@ -72,7 +72,7 @@ delete person.age;
|
|||
|
||||
Осталось только свойство `name`:
|
||||
|
||||
<img src="object-person-2.svg">
|
||||
<img src="object-person-2.png">
|
||||
|
||||
Следующая операция:
|
||||
<ol start="4">
|
||||
|
|
|
@ -15,7 +15,7 @@ var phrase = message;
|
|||
|
||||
В результате такого копирования получились две полностью независимые переменные, в каждой из которых хранится значение `"Привет"`.
|
||||
|
||||
<img src="variable-copy-value.svg">
|
||||
<img src="variable-copy-value.png">
|
||||
|
||||
## Копирование по ссылке
|
||||
|
||||
|
@ -31,7 +31,7 @@ var user = {
|
|||
};
|
||||
```
|
||||
|
||||
<img src="variable-contains-reference.svg">
|
||||
<img src="variable-contains-reference.png">
|
||||
|
||||
Внимание: объект -- вне переменной. В переменной -- лишь "адрес" (ссылка) для него.
|
||||
|
||||
|
@ -48,7 +48,7 @@ var admin = user; // скопировали ссылку
|
|||
|
||||
Получили две переменные, в которых находятся ссылки на один и тот же объект:
|
||||
|
||||
<img src="variable-copy-reference.svg">
|
||||
<img src="variable-copy-reference.png">
|
||||
|
||||
**Так как объект всего один, то изменения через любую переменную видны в других переменных:**
|
||||
|
||||
|
|
|
@ -84,13 +84,13 @@ alert( arr[2].name ); // Петя
|
|||
|
||||
Одно из применений массива -- это [очередь](http://ru.wikipedia.org/wiki/%D0%9E%D1%87%D0%B5%D1%80%D0%B5%D0%B4%D1%8C_%28%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5%29). В классическом программировании так называют упорядоченную коллекцию элементов, такую что элементы добавляются в конец, а обрабатываются -- с начала.
|
||||
|
||||
<img src="queue.svg">
|
||||
<img src="queue.png">
|
||||
|
||||
В реальной жизни эта структура данных встречается очень часто. Например, очередь сообщений, которые надо показать на экране.
|
||||
|
||||
Очень близка к очереди еще одна структура данных: [стек](http://ru.wikipedia.org/wiki/%D0%A1%D1%82%D0%B5%D0%BA). Это такая коллекция элементов, в которой новые элементы добавляются в конец и берутся с конца.
|
||||
|
||||
<img src="stack.svg">
|
||||
<img src="stack.png">
|
||||
|
||||
Например, стеком является колода карт, в которую новые карты кладутся сверху, и берутся -- тоже сверху.
|
||||
|
||||
|
@ -225,7 +225,7 @@ alert( a ); // 0,,,,,5
|
|||
|
||||
Методы `push/pop` выполняются быстро, а `shift/unshift` -- медленно.
|
||||
|
||||
<img src="array-speed.svg">
|
||||
<img src="array-speed.png">
|
||||
|
||||
|
||||
Чтобы понять, почему работать с концом массива -- быстрее, чем с его началом, разберём подробнее происходящее при операции:
|
||||
|
@ -243,7 +243,7 @@ fruits.shift(); // убрать 1 элемент с начала
|
|||
<li>Обновить свойство `length`.</li>
|
||||
</ol>
|
||||
|
||||
<img src="array-shift.svg">
|
||||
<img src="array-shift.png">
|
||||
|
||||
**Чем больше элементов в массиве, тем дольше их перемещать, это много операций с памятью.**
|
||||
|
||||
|
@ -257,7 +257,7 @@ fruits.shift(); // убрать 1 элемент с начала
|
|||
fruits.pop(); // убрать 1 элемент с конца
|
||||
```
|
||||
|
||||
<img src="array-pop.svg">
|
||||
<img src="array-pop.png">
|
||||
|
||||
**Перемещать при `pop` не требуется, так как прочие элементы после этой операции остаются на тех же индексах.**
|
||||
|
||||
|
|
|
@ -23,7 +23,7 @@ var list = {
|
|||
```
|
||||
|
||||
Графическое представление этого списка:
|
||||
<img src="linked-list.svg">
|
||||
<img src="linked-list.png">
|
||||
|
||||
Альтернативный способ создания:
|
||||
|
||||
|
|
|
@ -147,7 +147,7 @@ alert( result ); // 15
|
|||
|
||||
Поток вычислений получается такой
|
||||
|
||||
<img src="reduce.svg">
|
||||
<img src="reduce.png">
|
||||
|
||||
В виде таблицы где каждая строка -- вызов функции на очередном элементе массива:
|
||||
|
||||
|
|
|
@ -100,7 +100,7 @@ var family = marry({
|
|||
|
||||
Получившийся объект `family` можно изобразить так:
|
||||
|
||||
<img src="family.svg">
|
||||
<img src="family.png">
|
||||
|
||||
Здесь стрелочками показаны ссылки, а вот свойство `name` ссылкой не является, там хранится примитив, поэтому оно внутри самого объекта.
|
||||
|
||||
|
@ -115,13 +115,13 @@ delete family.mother.husband;
|
|||
|
||||
А если две, то получается, что от бывшего `family.father` ссылки выходят, но в него -- ни одна не идёт:
|
||||
|
||||
<img src="family-no-father.svg">
|
||||
<img src="family-no-father.png">
|
||||
|
||||
**Совершенно неважно, что из объекта выходят какие-то ссылки, они не влияют на достижимость этого объекта.**
|
||||
|
||||
Бывший `family.father` стал недостижимым и будет удалён вместе со своми данными, которые также более недоступны из программы.
|
||||
|
||||
<img src="family-no-father-2.svg">
|
||||
<img src="family-no-father-2.png">
|
||||
|
||||
А теперь -- рассмотрим более сложный случай. Что будет, если удалить главную ссылку `family`?
|
||||
|
||||
|
@ -133,7 +133,7 @@ window.family = null;
|
|||
|
||||
Результат:
|
||||
|
||||
<img src="family-no-family.svg">
|
||||
<img src="family-no-family.png">
|
||||
|
||||
Как видим, объекты в конструкции всё ещё связаны между собой. Однако, поиск от корня их не находит, они не достижимы, и значит сборщик мусора удалит их из памяти.
|
||||
|
||||
|
|
|
@ -184,7 +184,7 @@ setTimeout(function run() {
|
|||
|
||||
При `setInterval` внутренний таймер будет срабатывать чётко каждые `100` мс и вызывать `func(i)`:
|
||||
|
||||
<img src="setinterval-interval.svg">
|
||||
<img src="setinterval-interval.png">
|
||||
|
||||
Вы обратили внимание?...
|
||||
|
||||
|
@ -202,7 +202,7 @@ setTimeout(function run() {
|
|||
|
||||
А так будет выглядить картинка с рекурсивным `setTimeout`:
|
||||
|
||||
<img src="settimeout-interval.svg">
|
||||
<img src="settimeout-interval.png">
|
||||
|
||||
**При рекурсивном `setTimeout` задержка всегда фиксирована и равна 100мс.**
|
||||
|
||||
|
|
|
@ -38,7 +38,7 @@ alert( rabbit.eats ); // true
|
|||
|
||||
Иллюстрация происходящего при чтении `rabbit.eats` (поиск идет снизу вверх):
|
||||
|
||||
<img src="proto-animal-rabbit.svg">
|
||||
<img src="proto-animal-rabbit.png">
|
||||
|
||||
**Объект, на который указывает ссылка `__proto__`, называется *"прототипом"*. В данном случае получилось, что `animal` является прототипом для `rabbit`.**
|
||||
|
||||
|
|
|
@ -33,7 +33,7 @@ alert( {}.__proto__.toString ); // function toString
|
|||
<li>В дальнейшем при обращении к `obj.toString()` -- функция будет взята из `Object.prototype`.</li>
|
||||
</ol>
|
||||
|
||||
<img src="native-prototypes-object.svg">
|
||||
<img src="native-prototypes-object.png">
|
||||
|
||||
Это можно легко проверить:
|
||||
|
||||
|
@ -55,7 +55,7 @@ alert( obj.__proto__.__proto__ ); // null, нет
|
|||
|
||||
Точно такой же подход используется в массивах `Array`, функциях `Function` и других объектах. Встроенные методы для них находятся в `Array.prototype`, `Function.prototype` и т.п.
|
||||
|
||||
<img src="native-prototypes-classes.svg">
|
||||
<img src="native-prototypes-classes.png">
|
||||
|
||||
Например, когда мы создаём массив, `[1, 2, 3]`, то это альтернативный вариант синтаксиса `new Array`, так что у массивов есть стандартный прототип `Array.prototype`.
|
||||
|
||||
|
@ -81,7 +81,7 @@ alert( arr ); // 1,2,3 <-- результат Array.prototype.toString
|
|||
|
||||
Как мы видели раньше, у `Object.prototype` есть свой `toString`, но так как в `Array.prototype` он ищется первым, то берётся именно вариант для массивов:
|
||||
|
||||
<img src="native-prototypes-array-tostring.svg">
|
||||
<img src="native-prototypes-array-tostring.png">
|
||||
|
||||
|
||||
[smart header="Вызов методов через `apply` из прототипа"]
|
||||
|
|
|
@ -12,7 +12,7 @@
|
|||
|
||||
Взглянем на него ещё раз на примере `Array`, который наследует от `Object`:
|
||||
|
||||
<img src="class-inheritance-array-object.svg">
|
||||
<img src="class-inheritance-array-object.png">
|
||||
|
||||
<ul>
|
||||
<li>Методы массивов `Array` хранятся в `Array.prototype`.</li>
|
||||
|
@ -109,7 +109,7 @@ Rabbit.prototype.jump = function() { ... };
|
|||
|
||||
Теперь выглядеть иерархия будет так:
|
||||
|
||||
<img src="class-inheritance-rabbit-animal.svg">
|
||||
<img src="class-inheritance-rabbit-animal.png">
|
||||
|
||||
В `prototype` по умолчанию всегда находится свойство `constructor`, указывающее на функцию-конструктор. В частности, `Rabbit.prototype.constructor == Rabbit`. Если мы рассчитываем использовать это свойство, то при замене `prototype` через `Object.create` нужно его явно сохранить:
|
||||
|
||||
|
@ -225,7 +225,7 @@ Rabbit.prototype.run = function(speed) {
|
|||
|
||||
Вызов `rabbit.run()` теперь будет брать `run` из своего прототипа:
|
||||
|
||||
<img src="class-inheritance-rabbit-run-animal.svg">
|
||||
<img src="class-inheritance-rabbit-run-animal.png">
|
||||
|
||||
|
||||
### Вызов метода родителя внутри своего
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue