final move to png

This commit is contained in:
Ilya Kantor 2015-04-18 01:40:37 +03:00
parent 0ed8583dc2
commit 90855e8899
43 changed files with 101 additions and 101 deletions

View file

@ -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 не может читать/записывать произвольные файлы на жесткий диск, копировать их или вызывать программы. Он не имеет прямого доступа к операционной системе.

View file

@ -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">
Можно объявить две переменные и копировать данные из одной в другую:

View file

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 22 KiB

Before After
Before After

View file

@ -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-фреймворков стиль именно такой.

View file

@ -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">

View file

@ -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">
**Так как объект всего один, то изменения через любую переменную видны в других переменных:**

View file

@ -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` не требуется, так как прочие элементы после этой операции остаются на тех же индексах.**

View file

@ -23,7 +23,7 @@ var list = {
```
Графическое представление этого списка:
<img src="linked-list.svg">
<img src="linked-list.png">
Альтернативный способ создания:

View file

@ -147,7 +147,7 @@ alert( result ); // 15
Поток вычислений получается такой
<img src="reduce.svg">
<img src="reduce.png">
В виде таблицы где каждая строка -- вызов функции на очередном элементе массива:

View file

@ -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">
Как видим, объекты в конструкции всё ещё связаны между собой. Однако, поиск от корня их не находит, они не достижимы, и значит сборщик мусора удалит их из памяти.

View file

@ -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мс.**

View file

@ -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`.**

View file

@ -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` из прототипа"]

View file

@ -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">
### Вызов метода родителя внутри своего