jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

renovations

Browse source
This commit is contained in:
Ilya Kantor 2015-01-11 01:54:57 +03:00
parent 4b8b168fd2
commit c7d4c7e3ff
172 changed files with 869 additions and 244 deletions
Download patch file Download diff file Expand all files Collapse all files

154
1-js/4-data-structures/6-object-reference/article.md Normal file
View file

@ -0,0 +1,154 @@
# Объекты: передача по ссылке
Фундаментальным отличием объектов от примитивов, является их хранение и копирование "по ссылке".
[cut]
## Копирование по значению
Обычные значения: строки, числа, булевы значения, `null/undefined` при присваивании переменных копируются целиком или, как говорят, *"по значению"*.
```js
var message = "Привет";
var phrase = message;
```
В результате такого копирования получились две полностью независимые переменные, в каждой из которых хранится значение `"Привет"`.
<img src="variable-copy-value.svg">
## Копирование по ссылке
С объектами -- всё не так.
**В переменной, которой присвоен объект, хранится не сам объект, а "адрес его места в памяти", иными словами -- "ссылка" на него.**
Вот как выглядит переменная, которой присвоен объект:
```js
var user = { name: "Вася" };
```
<img src="variable-contains-reference.svg">
Внимание: объект -- вне переменной. В переменной -- лишь "адрес" (ссылка) для него.
**При копировании переменной с объектом -- копируется эта ссылка, а объект по-прежнему остается в единственном экземпляре.**
Например:
```js
var user = { name: "Вася" }; // в переменной - ссылка
var admin = user; // скопировали ссылку
```
Получили две переменные, в которых находятся ссылки на один и тот же объект:
<img src="variable-copy-reference.svg">
**Так как объект всего один, то изменения через любую переменную видны в других переменных:**
```js
//+ run
var user = { name: 'Вася' };
var admin = user;
*!*admin.name*/!* = 'Петя'; // поменяли данные через admin
alert(*!*user.name*/!*); // 'Петя', изменения видны в user
```
[smart header="Переменная с объектом как \"ключ\" к сейфу с данными"]
Ещё одна аналогия: переменная, в которую присвоен объект, на самом деле хранит не сами данные, а ключ к сейфу, где они хранятся.
При копировании её, получается что мы сделали копию ключа, но сейф по-прежнему один.
[/smart]
## Клонирование объектов
Иногда, на практике -- очень редко, нужно скопировать объект целиком, создать именно полную независимую копию, "клон" объекта.
Что ж, можно сделать и это. Для этого нужно пройти по объекту, достать данные и скопировать на уровне примитивов.
Примерно так:
```js
//+ run
var user = {
name: "Вася",
age: 30
};
*!*
var clone = {}; // новый пустой объект
// скопируем в него все свойства user
for(var key in user) {
clone[key] = user[key];
}
*/!*
// теперь clone - полностью независимая копия
clone.name = "Петя"; // поменяли данные в clone
alert(user.name); // по-прежнем "Вася"
```
В этом коде каждое свойство объекта `user` копируется в `clone`. Если предположить, что они примитивны, то каждое скопируется по значению и мы как раз получим полный клон.
Если же свойства объектов, в свою очередь, могут хранить ссылки на другие объекты, то нужно обойти такие подобъекты и тоже склонировать их. Это называют "глубоким" клонированием.
## Вывод в консоли
Откройте консоль браузера (обычно [key F12]) и запустите следующий код:
```js
//+ run
var time = {
year: 2345,
month: 11,
day: 10,
hour: 11,
minute: 12,
second: 13,
microsecond: 123456
}
console.log(time); // (*)
time.microsecond++; // (**)
console.log(time);
time.microsecond++;
console.log(time);
time.microsecond++;
```
Как видно, в нём некий объект выводится строкой `(*)`, затем он меняется в строке `(**)` и снова выводится, и так несколько раз. Пока ничего необычного, типичная ситуация -- скрипт делает какую-то работу с объектом и выводит в консоли то, как она продвигается.
Необычное -- в другом!
При раскрытии каждый объект будет выглядеть примерно так (скриншот из Chrome):
<img src="object-reference-console.png">
**Судя по выводу, свойство `microsecond` всегда было равно `123459`... Или нет?**
Если посмотреть на код выше то, очевидно, нет! Это свойство меняется, а консоль нас просто дурит.
**При "раскрытии" свойств объекта в консоли -- браузер всегда выводит их текущие (на момент раскрытия) значения.**
Так происходит именно потому, что вывод не делает "копию" текущего содержимого, а сохраняет лишь ссылку на объект. Запомните эту особенность консоли, в будущем, при отладке скриптов у вас не раз возникнет подобная ситуация.
## Итого
<ul>
<li>Объект присваивается и копируется "по ссылке". То есть, в переменной хранится не сам объект а, условно говоря, адрес в памяти, где он находится.</li>
<li>Если переменная-объект скопирована или передана в функцию, то копируется именно эта ссылка, а объект остаётся один в памяти.</li>
</ul>
Это -- одно из ключевых отличий объекта от примитива (числа, строки...), который при присвоении как раз копируется "по значению", то есть полностью.

BIN
1-js/4-data-structures/6-object-reference/object-reference-console@2x.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 123 KiB

47
1-js/4-data-structures/6-object-reference/variable-contains-reference.svg Normal file
View file

@ -0,0 +1,47 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="297px" height="199px" viewBox="0 0 297 199" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
<title>Slice 2</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="variable-contains-reference" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<path d="M43.5,141 L145.5,141" id="Line-2" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path d="M1.5,197.5 L43.5,141.5" id="Line" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path d="M132.5,196.5 L174.5,140.5" id="Line-3" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path d="M43.5,101 L175.5,101" id="Line-7" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path d="M1.5,157.5 L43.5,101.5" id="Line-8" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path d="M132.5,157.5 L174.5,101.5" id="Line-9" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path d="M43,141.5 L43,101.5" id="Line-4" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<rect id="Rectangle-2" stroke="#979797" stroke-width="2" fill="#E8E8E8" sketch:type="MSShapeGroup" transform="translate(81.959003, 132.776161) rotate(47.000000) translate(-81.959003, -132.776161) " x="42" y="120.247795" width="79.918006" height="25.0567324"></rect>
<path d="M175,140 L175,101.5" id="Line-5" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<rect id="Rectangle-4" stroke="#979797" stroke-width="2" fill="#FFFFFF" sketch:type="MSShapeGroup" x="0" y="158" width="133" height="40"></rect>
<g id="Rectangle-3-+-Oval-1-+-message" sketch:type="MSLayerGroup" transform="translate(37.000000, 171.000000)">
<rect id="Rectangle-3" stroke="#979797" fill="#FFFFFF" sketch:type="MSShapeGroup" x="0" y="0" width="63" height="16"></rect>
<circle id="Oval-1" stroke="#979797" sketch:type="MSShapeGroup" cx="3.5" cy="3.5" r="1.5"></circle>
<text id="user" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#4990E2">
<tspan x="15" y="12">user</tspan>
</text>
</g>
<g id="noun_3865-(1)" sketch:type="MSLayerGroup" transform="translate(185.000000, 0.000000)" fill="#000000">
<g id="Three_Stack_1_" sketch:type="MSShapeGroup">
<g id="Cabinet" transform="translate(0.200000, 0.033058)">
<path d="M107.53776,0.321282149 L4.06472,0.321282149 C2.02368,0.321282149 0.36952,0.908809745 0.36952,1.63375009 L0.36952,78.0088142 C0.36952,78.7337546 2.02368,79.3212821 4.06472,79.3212821 L107.53776,79.3212821 C109.5788,79.3212821 111.23296,78.7337546 111.23296,78.0088142 L111.23296,1.63375009 C111.23296,0.908809745 109.5788,0.321282149 107.53776,0.321282149 L107.53776,0.321282149 Z M101.5312,72.9669421 L10.0688,72.9669421 L10.0688,6.84756215 L101.5312,6.84756215 L101.5312,72.9669421 L101.5312,72.9669421 Z" id="Shape"></path>
</g>
<g id="Top_Handle" transform="translate(40.500000, 9.404959)">
<path d="M28.84488,0.0375813223 L25.08024,0.0375813223 L25.08024,5.56178132 C25.08024,5.99756132 24.53712,6.35072132 23.86752,6.35072132 L6.89192,6.35072132 C6.22232,6.35072132 5.6792,5.99756132 5.6792,5.56178132 L5.6792,0.0375813223 L2.1576,0.0375813223 C1.49048,0.0375813223 0.94984,0.387501322 0.94984,0.820041322 L0.94984,8.72402132 C0.94984,9.15656132 1.49048,9.50648132 2.1576,9.50648132 L28.84488,9.50648132 C29.512,9.50648132 30.05264,9.15656132 30.05264,8.72402132 L30.05264,0.820041322 C30.05264,0.387501322 29.50952,0.0375813223 28.84488,0.0375813223 L28.84488,0.0375813223 Z" id="Shape"></path>
</g>
</g>
</g>
<text id="name" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="bold" fill="#979797">
<tspan x="218" y="49">name</tspan>
</text>
<g id="noun_37574_cc" sketch:type="MSLayerGroup" transform="translate(127.000000, 83.500000) rotate(10.000000) translate(-127.000000, -83.500000) translate(72.000000, 36.000000)" fill="#000000">
<g id="Editor" transform="translate(54.754715, 47.398639) rotate(141.000000) translate(-54.754715, -47.398639) translate(-4.796384, 34.631516)" sketch:type="MSShapeGroup">
<path d="M67.2636383,25.5342454 L67.2636383,17.7965953 C67.2636383,17.7965953 3.56264802,17.9173072 2.58917769,0 C34.7901854,16.5161804 67.2668582,10.8327102 67.2668582,10.8327102 L67.2636383,3.09506005 L116.972573,14.3146527 L67.2636383,25.5342454 L67.2636383,25.5342454 Z M72.5431368,22.3343418 L72.5431368,16.3282175 C72.5431368,16.3282175 23.6262507,17.435782 9.14303504,4.96543295 C35.1656667,17.435782 72.5431345,11.9892017 72.5431345,11.9892017 L72.5431368,6.09642199 L107.216377,14.3146527 L72.5431368,22.3343418 L72.5431368,22.3343418 Z" id="left_arrow" transform="translate(59.780875, 12.767123) scale(-1, 1) translate(-59.780875, -12.767123) "></path>
</g>
</g>
<g id="noun_4093_cc" sketch:type="MSLayerGroup" transform="translate(73.000000, 126.000000)" fill="#010101">
<path d="M15.47568,0 L0.52464,0 C0.19664,0 0,0.138870968 0,0.370322581 L0,6.57074194 C0,6.80208065 0.19664,6.94083871 0.52464,6.94083871 L15.47568,6.94083871 C15.80352,6.94083871 16,6.80208065 16,6.57074194 L16,0.370322581 C16,0.138870968 15.80336,0 15.47568,0 L15.47568,0 Z M14.67984,0.555370968 L7.86896,4.34959677 L1.17744,0.555370968 L14.67984,0.555370968 L14.67984,0.555370968 Z M14.95088,6.38558065 L1.04912,6.38558065 C0.88512,6.38558065 0.78688,6.31614516 0.78688,6.20030645 L0.78688,1.03125806 L7.86896,4.99743548 L15.21296,0.884483871 L15.21296,6.20030645 C15.21312,6.31614516 15.11488,6.38558065 14.95088,6.38558065 L14.95088,6.38558065 Z" id="Shape" sketch:type="MSShapeGroup"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 6.3 KiB

72
1-js/4-data-structures/6-object-reference/variable-copy-reference.svg Normal file
View file

@ -0,0 +1,72 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="501px" height="199px" viewBox="0 0 501 199" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
<title>Slice 1</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="variable-copy-reference" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<path d="M43.5,141 L145.5,141" id="Line-2" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path d="M1.5,197.5 L43.5,141.5" id="Line" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path d="M132.5,196.5 L174.5,140.5" id="Line-3" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path d="M43.5,101 L175.5,101" id="Line-7" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path d="M1.5,157.5 L43.5,101.5" id="Line-8" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path d="M132.5,157.5 L174.5,101.5" id="Line-9" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path d="M43,141.5 L43,101.5" id="Line-4" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<rect id="Rectangle-2" stroke="#979797" stroke-width="2" fill="#E8E8E8" sketch:type="MSShapeGroup" transform="translate(81.959003, 132.776161) rotate(47.000000) translate(-81.959003, -132.776161) " x="42" y="120.247795" width="79.918006" height="25.0567324"></rect>
<path d="M175,140 L175,101.5" id="Line-5" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<rect id="Rectangle-4" stroke="#979797" stroke-width="2" fill="#FFFFFF" sketch:type="MSShapeGroup" x="0" y="158" width="133" height="40"></rect>
<g id="Rectangle-3-+-Oval-1-+-message" sketch:type="MSLayerGroup" transform="translate(37.000000, 171.000000)">
<rect id="Rectangle-3" stroke="#979797" fill="#FFFFFF" sketch:type="MSShapeGroup" x="0" y="0" width="63" height="16"></rect>
<circle id="Oval-1" stroke="#979797" sketch:type="MSShapeGroup" cx="3.5" cy="3.5" r="1.5"></circle>
<text id="user" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#4990E2">
<tspan x="15" y="12">user</tspan>
</text>
</g>
<g id="noun_3865-(1)" sketch:type="MSLayerGroup" transform="translate(185.000000, 0.000000)" fill="#000000">
<g id="Three_Stack_1_" sketch:type="MSShapeGroup">
<g id="Cabinet" transform="translate(0.200000, 0.033058)">
<path d="M107.53776,0.321282149 L4.06472,0.321282149 C2.02368,0.321282149 0.36952,0.908809745 0.36952,1.63375009 L0.36952,78.0088142 C0.36952,78.7337546 2.02368,79.3212821 4.06472,79.3212821 L107.53776,79.3212821 C109.5788,79.3212821 111.23296,78.7337546 111.23296,78.0088142 L111.23296,1.63375009 C111.23296,0.908809745 109.5788,0.321282149 107.53776,0.321282149 L107.53776,0.321282149 Z M101.5312,72.9669421 L10.0688,72.9669421 L10.0688,6.84756215 L101.5312,6.84756215 L101.5312,72.9669421 L101.5312,72.9669421 Z" id="Shape"></path>
</g>
<g id="Top_Handle" transform="translate(40.500000, 9.404959)">
<path d="M28.84488,0.0375813223 L25.08024,0.0375813223 L25.08024,5.56178132 C25.08024,5.99756132 24.53712,6.35072132 23.86752,6.35072132 L6.89192,6.35072132 C6.22232,6.35072132 5.6792,5.99756132 5.6792,5.56178132 L5.6792,0.0375813223 L2.1576,0.0375813223 C1.49048,0.0375813223 0.94984,0.387501322 0.94984,0.820041322 L0.94984,8.72402132 C0.94984,9.15656132 1.49048,9.50648132 2.1576,9.50648132 L28.84488,9.50648132 C29.512,9.50648132 30.05264,9.15656132 30.05264,8.72402132 L30.05264,0.820041322 C30.05264,0.387501322 29.50952,0.0375813223 28.84488,0.0375813223 L28.84488,0.0375813223 Z" id="Shape"></path>
</g>
</g>
</g>
<text id="name" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="bold" fill="#979797">
<tspan x="218" y="49">name</tspan>
</text>
<g id="noun_37574_cc" sketch:type="MSLayerGroup" transform="translate(127.000000, 83.500000) rotate(10.000000) translate(-127.000000, -83.500000) translate(72.000000, 36.000000)" fill="#000000">
<g id="Editor" transform="translate(54.754715, 47.398639) rotate(141.000000) translate(-54.754715, -47.398639) translate(-4.796384, 34.631516)" sketch:type="MSShapeGroup">
<path d="M67.2636383,25.5342454 L67.2636383,17.7965953 C67.2636383,17.7965953 3.56264802,17.9173072 2.58917769,0 C34.7901854,16.5161804 67.2668582,10.8327102 67.2668582,10.8327102 L67.2636383,3.09506005 L116.972573,14.3146527 L67.2636383,25.5342454 L67.2636383,25.5342454 Z M72.5431368,22.3343418 L72.5431368,16.3282175 C72.5431368,16.3282175 23.6262507,17.435782 9.14303504,4.96543295 C35.1656667,17.435782 72.5431345,11.9892017 72.5431345,11.9892017 L72.5431368,6.09642199 L107.216377,14.3146527 L72.5431368,22.3343418 L72.5431368,22.3343418 Z" id="left_arrow" transform="translate(59.780875, 12.767123) scale(-1, 1) translate(-59.780875, -12.767123) "></path>
</g>
</g>
<g id="noun_4093_cc" sketch:type="MSLayerGroup" transform="translate(73.000000, 126.000000)" fill="#010101">
<path d="M15.47568,0 L0.52464,0 C0.19664,0 0,0.138870968 0,0.370322581 L0,6.57074194 C0,6.80208065 0.19664,6.94083871 0.52464,6.94083871 L15.47568,6.94083871 C15.80352,6.94083871 16,6.80208065 16,6.57074194 L16,0.370322581 C16,0.138870968 15.80336,0 15.47568,0 L15.47568,0 Z M14.67984,0.555370968 L7.86896,4.34959677 L1.17744,0.555370968 L14.67984,0.555370968 L14.67984,0.555370968 Z M14.95088,6.38558065 L1.04912,6.38558065 C0.88512,6.38558065 0.78688,6.31614516 0.78688,6.20030645 L0.78688,1.03125806 L7.86896,4.99743548 L15.21296,0.884483871 L15.21296,6.20030645 C15.21312,6.31614516 15.11488,6.38558065 14.95088,6.38558065 L14.95088,6.38558065 Z" id="Shape" sketch:type="MSShapeGroup"></path>
</g>
<path d="M367.5,141 L469.5,141" id="Line-16" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path d="M325.5,197.5 L367.5,141.5" id="Line-6" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path d="M456.5,196.5 L498.5,140.5" id="Line-10" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path d="M367.5,101 L499.5,101" id="Line-11" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path d="M325.5,157.5 L367.5,101.5" id="Line-12" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path d="M456.5,157.5 L498.5,101.5" id="Line-13" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path d="M367,141.5 L367,101.5" id="Line-14" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<rect id="Rectangle-5" stroke="#979797" stroke-width="2" fill="#E8E8E8" sketch:type="MSShapeGroup" transform="translate(405.959003, 132.776161) rotate(47.000000) translate(-405.959003, -132.776161) " x="366" y="120.247795" width="79.918006" height="25.0567324"></rect>
<path d="M499,140 L499,101.5" id="Line-15" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<rect id="Rectangle-6" stroke="#979797" stroke-width="2" fill="#FFFFFF" sketch:type="MSShapeGroup" x="324" y="158" width="133" height="40"></rect>
<g id="Rectangle-3-+-Oval-1-+-message-2" sketch:type="MSLayerGroup" transform="translate(361.000000, 171.000000)">
<rect id="Rectangle-3" stroke="#979797" fill="#FFFFFF" sketch:type="MSShapeGroup" x="0" y="0" width="63" height="16"></rect>
<circle id="Oval-1" stroke="#979797" sketch:type="MSShapeGroup" cx="3.5" cy="3.5" r="1.5"></circle>
<text id="admin" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#4990E2">
<tspan x="15" y="12">admin</tspan>
</text>
</g>
<g id="noun_37574_cc-2" sketch:type="MSLayerGroup" transform="translate(358.286167, 83.555879) scale(-1, 1) rotate(10.000000) translate(-358.286167, -83.555879) translate(303.786167, 35.555879)" fill="#000000">
<g id="Editor" transform="translate(54.526831, 47.793916) rotate(141.000000) translate(-54.526831, -47.793916) translate(-5.024268, 35.026793)" sketch:type="MSShapeGroup">
<path d="M67.2636383,25.5342454 L67.2636383,17.7965953 C67.2636383,17.7965953 3.56264802,17.9173072 2.58917769,0 C34.7901854,16.5161804 67.2668582,10.8327102 67.2668582,10.8327102 L67.2636383,3.09506005 L116.972573,14.3146527 L67.2636383,25.5342454 L67.2636383,25.5342454 Z M72.5431368,22.3343418 L72.5431368,16.3282175 C72.5431368,16.3282175 23.6262507,17.435782 9.14303504,4.96543295 C35.1656667,17.435782 72.5431345,11.9892017 72.5431345,11.9892017 L72.5431368,6.09642199 L107.216377,14.3146527 L72.5431368,22.3343418 L72.5431368,22.3343418 Z" id="left_arrow" transform="translate(59.780875, 12.767123) scale(-1, 1) translate(-59.780875, -12.767123) "></path>
</g>
</g>
<g id="noun_4093_cc-2" sketch:type="MSLayerGroup" transform="translate(397.000000, 126.000000)" fill="#010101">
<path d="M15.47568,0 L0.52464,0 C0.19664,0 0,0.138870968 0,0.370322581 L0,6.57074194 C0,6.80208065 0.19664,6.94083871 0.52464,6.94083871 L15.47568,6.94083871 C15.80352,6.94083871 16,6.80208065 16,6.57074194 L16,0.370322581 C16,0.138870968 15.80336,0 15.47568,0 L15.47568,0 Z M14.67984,0.555370968 L7.86896,4.34959677 L1.17744,0.555370968 L14.67984,0.555370968 L14.67984,0.555370968 Z M14.95088,6.38558065 L1.04912,6.38558065 C0.88512,6.38558065 0.78688,6.31614516 0.78688,6.20030645 L0.78688,1.03125806 L7.86896,4.99743548 L15.21296,0.884483871 L15.21296,6.20030645 C15.21312,6.31614516 15.11488,6.38558065 14.95088,6.38558065 L14.95088,6.38558065 Z" id="Shape" sketch:type="MSShapeGroup"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 10 KiB

49
1-js/4-data-structures/6-object-reference/variable-copy-value.svg Normal file
View file

@ -0,0 +1,49 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="366px" height="103px" viewBox="0 0 366 103" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
<title>Diagrams</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="variable-copy-value" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<path d="M43.5,45 L145.5,45" id="Line-2" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path d="M1.5,101.5 L43.5,45.5" id="Line" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path d="M132.5,100.5 L174.5,44.5" id="Line-3" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path d="M43.5,5 L175.5,5" id="Line-7" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path d="M1.5,61.5 L43.5,5.5" id="Line-8" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path d="M132.5,61.5 L174.5,5.5" id="Line-9" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path d="M43,45.5 L43,5.5" id="Line-4" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<rect id="Rectangle-2" stroke="#979797" stroke-width="2" fill="#E8E8E8" sketch:type="MSShapeGroup" transform="translate(81.959003, 36.776161) rotate(47.000000) translate(-81.959003, -36.776161) " x="42" y="24.247795" width="79.918006" height="25.0567324"></rect>
<text id="&quot;Привет&quot;" sketch:type="MSTextLayer" transform="translate(85.693270, 38.500000) rotate(47.000000) translate(-85.693270, -38.500000) " font-family="Open Sans" font-size="14" font-weight="normal" fill="#373535">
<tspan x="54.6932699" y="44">"Привет"</tspan>
</text>
<path d="M175,44 L175,5.5" id="Line-5" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<rect id="Rectangle-4" stroke="#979797" stroke-width="2" fill="#FFFFFF" sketch:type="MSShapeGroup" x="0" y="62" width="133" height="40"></rect>
<g id="Rectangle-3-+-Oval-1-+-message" sketch:type="MSLayerGroup" transform="translate(37.000000, 75.000000)">
<rect id="Rectangle-3" stroke="#979797" fill="#FFFFFF" sketch:type="MSShapeGroup" x="0" y="0" width="63" height="16"></rect>
<circle id="Oval-1" stroke="#979797" sketch:type="MSShapeGroup" cx="3.5" cy="3.5" r="1.5"></circle>
<text id="message" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#4990E2">
<tspan x="7" y="12">message</tspan>
</text>
</g>
<path d="M232.5,45 L334.5,45" id="Line-6" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path d="M190.5,101.5 L232.5,45.5" id="Line-10" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path d="M321.5,100.5 L363.5,44.5" id="Line-11" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path d="M232.5,5 L364.5,5" id="Line-12" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path d="M190.5,61.5 L232.5,5.5" id="Line-13" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path d="M321.5,61.5 L363.5,5.5" id="Line-14" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path d="M232,45.5 L232,5.5" id="Line-15" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<rect id="Rectangle-5" stroke="#979797" stroke-width="2" fill="#E8E8E8" sketch:type="MSShapeGroup" transform="translate(270.959003, 36.776161) rotate(47.000000) translate(-270.959003, -36.776161) " x="231" y="24.247795" width="79.918006" height="25.0567324"></rect>
<text id="&quot;Привет&quot;" sketch:type="MSTextLayer" transform="translate(274.693270, 38.500000) rotate(47.000000) translate(-274.693270, -38.500000) " font-family="Open Sans" font-size="14" font-weight="normal" fill="#373535">
<tspan x="243.69327" y="44">"Привет"</tspan>
</text>
<path d="M364,44 L364,5.5" id="Line-16" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<rect id="Rectangle-6" stroke="#979797" stroke-width="2" fill="#FFFFFF" sketch:type="MSShapeGroup" x="189" y="62" width="133" height="40"></rect>
<g id="Rectangle-3-+-Oval-1-+-message-2" sketch:type="MSLayerGroup" transform="translate(226.000000, 75.000000)">
<rect id="Rectangle-3" stroke="#979797" fill="#FFFFFF" sketch:type="MSShapeGroup" x="0" y="0" width="63" height="16"></rect>
<circle id="Oval-1" stroke="#979797" sketch:type="MSShapeGroup" cx="3.5" cy="3.5" r="1.5"></circle>
<text id="phrase" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#4990E2">
<tspan x="10" y="12">phrase</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 5.4 KiB