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

images to svg

Browse source
This commit is contained in:
Ilya Kantor 2019-07-28 15:42:37 +03:00
parent a31e881856
commit 3ba28aa104
734 changed files with 11682 additions and 245 deletions
Download patch file Download diff file Expand all files Collapse all files

18
1-js/04-object-basics/01-object/article.md
View file

@ -9,7 +9,7 @@ An object can be created with figure brackets `{…}` with an optional list of *
We can imagine an object as a cabinet with signed files. Every piece of data is stored in its file by the key. It's easy to find a file by its name or add/remove a file.
![](object.png)
![](object.svg)
An empty object ("empty cabinet") can be created using one of two syntaxes:
@ -18,7 +18,7 @@ let user = new Object(); // "object constructor" syntax
let user = {}; // "object literal" syntax
```
![](object-user-empty.png)
![](object-user-empty.svg)
Usually, the figure brackets `{...}` are used. That declaration is called an *object literal*.
@ -42,7 +42,7 @@ In the `user` object, there are two properties:
The resulting `user` object can be imagined as a cabinet with two signed files labeled "name" and "age".
![user object](object-user.png)
![user object](object-user.svg)
We can add, remove and read files from it any time.
@ -60,7 +60,7 @@ The value can be of any type. Let's add a boolean one:
user.isAdmin = true;
```
![user object 2](object-user-isadmin.png)
![user object 2](object-user-isadmin.svg)
To remove a property, we can use `delete` operator:
@ -68,7 +68,7 @@ To remove a property, we can use `delete` operator:
delete user.age;
```
![user object 3](object-user-delete.png)
![user object 3](object-user-delete.svg)
We can also use multiword property names, but then they must be quoted:
@ -80,7 +80,7 @@ let user = {
};
```
![](object-user-props.png)
![](object-user-props.svg)
The last property in the list may end with a comma:
@ -474,7 +474,7 @@ let phrase = message;
As a result we have two independent variables, each one is storing the string `"Hello!"`.
![](variable-copy-value.png)
![](variable-copy-value.svg)
Objects are not like that.
@ -488,7 +488,7 @@ let user = {
};
```
![](variable-contains-reference.png)
![](variable-contains-reference.svg)
Here, the object is stored somewhere in memory. And the variable `user` has a "reference" to it.
@ -506,7 +506,7 @@ let admin = user; // copy the reference
Now we have two variables, each one with the reference to the same object:
![](variable-copy-reference.png)
![](variable-copy-reference.svg)
We can use any variable to access the cabinet and modify its contents:

BIN
1-js/04-object-basics/01-object/object-user-delete.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 5.3 KiB

36
1-js/04-object-basics/01-object/object-user-delete.svg Normal file
View file

@ -0,0 +1,36 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="248px" height="173px" viewBox="0 0 248 173" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>object-user-delete.svg</title>
<desc>Created with sketchtool.</desc>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="object-user-delete.svg">
<rect fill="#FFFFFF" x="0" y="0" width="248" height="173"></rect>
<path d="M127.93675,101 L111.270083,121 L241.729917,121 L225.06325,101 L127.93675,101 Z" id="Rectangle-4-Copy" stroke="#D1C4B1" stroke-width="4" fill="#D1C4B1" opacity="0.5"></path>
<g id="Group-2" transform="translate(141.000000, 8.000000)">
<g id="Group">
<rect id="Rectangle-7" fill="#FFFFFF" x="0" y="0" width="32" height="110"></rect>
<path d="M0,0 L32,0 L32,110 L0,110 L0,0 Z M16.5,102.016129 C20.6421356,102.016129 24,99.0373784 24,95.3629032 C24,91.6884281 20.6421356,88.7096774 16.5,88.7096774 C12.3578644,88.7096774 9,91.6884281 9,95.3629032 C9,99.0373784 12.3578644,102.016129 16.5,102.016129 Z M4,4.43548387 L4,81.6129032 L28,81.6129032 L28,4.43548387 L4,4.43548387 Z" id="Combined-Shape" fill="#E8C48F"></path>
</g>
<text id="name" transform="translate(15.500000, 42.858871) rotate(-90.000000) translate(-15.500000, -42.858871) " font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#EE6B47">
<tspan x="-1.3" y="47.358871">name</tspan>
</text>
</g>
<g id="Group-2-Copy-2" transform="translate(179.000000, 8.000000)">
<g id="Group">
<rect id="Rectangle-7" fill="#FFFFFF" x="0" y="0" width="32" height="110"></rect>
<path d="M0,0 L32,0 L32,110 L0,110 L0,0 Z M16.5,102.016129 C20.6421356,102.016129 24,99.0373784 24,95.3629032 C24,91.6884281 20.6421356,88.7096774 16.5,88.7096774 C12.3578644,88.7096774 9,91.6884281 9,95.3629032 C9,99.0373784 12.3578644,102.016129 16.5,102.016129 Z M4,4.43548387 L4,81.6129032 L28,81.6129032 L28,4.43548387 L4,4.43548387 Z" id="Combined-Shape" fill="#E8C48F"></path>
</g>
<text id="isAdmin" transform="translate(14.500000, 41.653226) rotate(-90.000000) translate(-14.500000, -41.653226) " font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#EE6B47">
<tspan x="-14.9" y="46.1532258">isAdmin</tspan>
</text>
</g>
<rect id="Rectangle-4" stroke="#BCA68E" stroke-width="4" fill="#FFF9EB" x="109" y="115" width="135" height="50"></rect>
<rect id="Rectangle-8" stroke="#BCA68E" stroke-width="3" x="164.5" y="135.5" width="25" height="10"></rect>
<text id="user" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" fill="#EE6B47">
<tspan x="9" y="145">user</tspan>
</text>
<path id="Line-8" d="M75.5,142 L49,142 L49,139 L75.5,139 L75.5,131 L94.5,140.5 L75.5,150 L75.5,142 Z" fill="#EE6B47" fill-rule="nonzero"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 3.2 KiB

BIN
1-js/04-object-basics/01-object/object-user-delete@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 12 KiB

BIN
1-js/04-object-basics/01-object/object-user-empty.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 2.9 KiB

21
1-js/04-object-basics/01-object/object-user-empty.svg Normal file
View file

@ -0,0 +1,21 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="248px" height="92px" viewBox="0 0 248 92" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>object-user-empty.svg</title>
<desc>Created with sketchtool.</desc>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="object-user-empty.svg">
<rect fill="#FFFFFF" x="0" y="0" width="248" height="92"></rect>
<path d="M123.93675,12 L107.270083,32 L237.729917,32 L221.06325,12 L123.93675,12 Z" id="Rectangle-4-Copy" stroke="#D1C4B1" stroke-width="4" fill="#D1C4B1" opacity="0.5"></path>
<rect id="Rectangle-4" stroke="#BCA68E" stroke-width="4" fill="#FFF9EB" x="105" y="26" width="135" height="50"></rect>
<rect id="Rectangle-8" stroke="#BCA68E" stroke-width="3" x="160.5" y="46.5" width="25" height="10"></rect>
<text id="empty" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" fill="#9B9B9B">
<tspan x="151" y="22">empty</tspan>
</text>
<text id="user" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" fill="#EE6B47">
<tspan x="4" y="56">user</tspan>
</text>
<path id="Line-8" d="M70.5,53 L44,53 L44,50 L70.5,50 L70.5,42 L89.5,51.5 L70.5,61 L70.5,53 Z" fill="#EE6B47" fill-rule="nonzero"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
1-js/04-object-basics/01-object/object-user-empty@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 6.5 KiB

BIN
1-js/04-object-basics/01-object/object-user-isadmin.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 5.8 KiB

45
1-js/04-object-basics/01-object/object-user-isadmin.svg Normal file
View file

@ -0,0 +1,45 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="248px" height="173px" viewBox="0 0 248 173" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>object-user-isadmin.svg</title>
<desc>Created with sketchtool.</desc>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="object-user-isadmin.svg">
<rect fill="#FFFFFF" x="0" y="0" width="248" height="173"></rect>
<path d="M127.93675,101 L111.270083,121 L241.729917,121 L225.06325,101 L127.93675,101 Z" id="Rectangle-4-Copy" stroke="#D1C4B1" stroke-width="4" fill="#D1C4B1" opacity="0.5"></path>
<g id="Group-2" transform="translate(125.000000, 8.000000)">
<g id="Group">
<rect id="Rectangle-7" fill="#FFFFFF" x="0" y="0" width="32" height="110"></rect>
<path d="M0,0 L32,0 L32,110 L0,110 L0,0 Z M16.5,102.016129 C20.6421356,102.016129 24,99.0373784 24,95.3629032 C24,91.6884281 20.6421356,88.7096774 16.5,88.7096774 C12.3578644,88.7096774 9,91.6884281 9,95.3629032 C9,99.0373784 12.3578644,102.016129 16.5,102.016129 Z M4,4.43548387 L4,81.6129032 L28,81.6129032 L28,4.43548387 L4,4.43548387 Z" id="Combined-Shape" fill="#E8C48F"></path>
</g>
<text id="name" transform="translate(15.500000, 42.858871) rotate(-90.000000) translate(-15.500000, -42.858871) " font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#EE6B47">
<tspan x="-1.3" y="47.358871">name</tspan>
</text>
</g>
<g id="Group-2-Copy" transform="translate(162.000000, 8.000000)">
<g id="Group">
<rect id="Rectangle-7" fill="#FFFFFF" x="0" y="0" width="32" height="110"></rect>
<path d="M0,0 L32,0 L32,110 L0,110 L0,0 Z M16.5,102.016129 C20.6421356,102.016129 24,99.0373784 24,95.3629032 C24,91.6884281 20.6421356,88.7096774 16.5,88.7096774 C12.3578644,88.7096774 9,91.6884281 9,95.3629032 C9,99.0373784 12.3578644,102.016129 16.5,102.016129 Z M4,4.43548387 L4,81.6129032 L28,81.6129032 L28,4.43548387 L4,4.43548387 Z" id="Combined-Shape" fill="#E8C48F"></path>
</g>
<text id="age" transform="translate(14.500000, 41.653226) rotate(-90.000000) translate(-14.500000, -41.653226) " font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#EE6B47">
<tspan x="1.9" y="46.1532258">age</tspan>
</text>
</g>
<g id="Group-2-Copy-2" transform="translate(199.000000, 8.000000)">
<g id="Group">
<rect id="Rectangle-7" fill="#FFFFFF" x="0" y="0" width="32" height="110"></rect>
<path d="M0,0 L32,0 L32,110 L0,110 L0,0 Z M16.5,102.016129 C20.6421356,102.016129 24,99.0373784 24,95.3629032 C24,91.6884281 20.6421356,88.7096774 16.5,88.7096774 C12.3578644,88.7096774 9,91.6884281 9,95.3629032 C9,99.0373784 12.3578644,102.016129 16.5,102.016129 Z M4,4.43548387 L4,81.6129032 L28,81.6129032 L28,4.43548387 L4,4.43548387 Z" id="Combined-Shape" fill="#E8C48F"></path>
</g>
<text id="isAdmin" transform="translate(14.500000, 41.653226) rotate(-90.000000) translate(-14.500000, -41.653226) " font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#EE6B47">
<tspan x="-14.9" y="46.1532258">isAdmin</tspan>
</text>
</g>
<rect id="Rectangle-4" stroke="#BCA68E" stroke-width="4" fill="#FFF9EB" x="109" y="115" width="135" height="50"></rect>
<rect id="Rectangle-8" stroke="#BCA68E" stroke-width="3" x="164.5" y="135.5" width="25" height="10"></rect>
<text id="user" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" fill="#EE6B47">
<tspan x="12" y="145">user</tspan>
</text>
<path id="Line-8" d="M78.5,142 L52,142 L52,139 L78.5,139 L78.5,131 L97.5,140.5 L78.5,150 L78.5,142 Z" fill="#EE6B47" fill-rule="nonzero"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 4.1 KiB

BIN
1-js/04-object-basics/01-object/object-user-isadmin@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 13 KiB

BIN
1-js/04-object-basics/01-object/object-user-props.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 7.1 KiB

45
1-js/04-object-basics/01-object/object-user-props.svg Normal file
View file

@ -0,0 +1,45 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="248px" height="215px" viewBox="0 0 248 215" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>object-user-props.svg</title>
<desc>Created with sketchtool.</desc>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="object-user-props.svg">
<rect fill="#FFFFFF" x="0" y="0" width="248" height="215"></rect>
<path d="M127.93675,143 L111.270083,163 L241.729917,163 L225.06325,143 L127.93675,143 Z" id="Rectangle-4-Copy" stroke="#D1C4B1" stroke-width="4" fill="#D1C4B1" opacity="0.5"></path>
<g id="Group-2" transform="translate(124.000000, 3.000000)">
<g id="Group">
<rect id="Rectangle-7" fill="#FFFFFF" x="0" y="0" width="32" height="157"></rect>
<path d="M0,0 L32,0 L32,157 L0,157 L0,0 Z M16.5,145.604839 C20.6421356,145.604839 24,141.353349 24,136.108871 C24,130.864393 20.6421356,126.612903 16.5,126.612903 C12.3578644,126.612903 9,130.864393 9,136.108871 C9,141.353349 12.3578644,145.604839 16.5,145.604839 Z M4,6.33064516 L4,116.483871 L28,116.483871 L28,6.33064516 L4,6.33064516 Z" id="Combined-Shape" fill="#E8C48F"></path>
</g>
<text id="name" transform="translate(15.500000, 60.141129) rotate(-90.000000) translate(-15.500000, -60.141129) " font-family="PTMono-Bold, PT Mono" font-size="16" font-weight="bold" fill="#EE6B47">
<tspan x="-3.7" y="62.7459677">name</tspan>
</text>
</g>
<g id="Group-2-Copy" transform="translate(161.000000, 3.000000)">
<g id="Group">
<rect id="Rectangle-7" fill="#FFFFFF" x="0" y="0" width="32" height="157"></rect>
<path d="M0,0 L32,0 L32,157 L0,157 L0,0 Z M16.5,145.604839 C20.6421356,145.604839 24,141.353349 24,136.108871 C24,130.864393 20.6421356,126.612903 16.5,126.612903 C12.3578644,126.612903 9,130.864393 9,136.108871 C9,141.353349 12.3578644,145.604839 16.5,145.604839 Z M4,6.33064516 L4,116.483871 L28,116.483871 L28,6.33064516 L4,6.33064516 Z" id="Combined-Shape" fill="#E8C48F"></path>
</g>
<text id="age" transform="translate(15.500000, 60.141129) rotate(-90.000000) translate(-15.500000, -60.141129) " font-family="PTMono-Bold, PT Mono" font-size="16" font-weight="bold" fill="#EE6B47">
<tspan x="1.1" y="62.7459677">age</tspan>
</text>
</g>
<g id="Group-2-Copy-2" transform="translate(198.000000, 3.000000)">
<g id="Group">
<rect id="Rectangle-7" fill="#FFFFFF" x="0" y="0" width="32" height="157"></rect>
<path d="M0,0 L32,0 L32,157 L0,157 L0,0 Z M16.5,145.604839 C20.6421356,145.604839 24,141.353349 24,136.108871 C24,130.864393 20.6421356,126.612903 16.5,126.612903 C12.3578644,126.612903 9,130.864393 9,136.108871 C9,141.353349 12.3578644,145.604839 16.5,145.604839 Z M4,6.33064516 L4,116.483871 L28,116.483871 L28,6.33064516 L4,6.33064516 Z" id="Combined-Shape" fill="#E8C48F"></path>
</g>
<text id="likes-birds" transform="translate(17.500000, 60.774194) rotate(-90.000000) translate(-17.500000, -60.774194) " font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#EE6B47">
<tspan x="-28.7" y="63.2782258">likes birds</tspan>
</text>
</g>
<rect id="Rectangle-4" stroke="#BCA68E" stroke-width="4" fill="#FFF9EB" x="109" y="157" width="135" height="50"></rect>
<rect id="Rectangle-8" stroke="#BCA68E" stroke-width="3" x="164.5" y="177.5" width="25" height="10"></rect>
<text id="user" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" fill="#EE6B47">
<tspan x="5" y="187">user</tspan>
</text>
<path id="Line-8" d="M71.5,184 L45,184 L45,181 L71.5,181 L71.5,173 L90.5,182.5 L71.5,192 L71.5,184 Z" fill="#EE6B47" fill-rule="nonzero"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 4.1 KiB

BIN
1-js/04-object-basics/01-object/object-user-props@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 16 KiB

BIN
1-js/04-object-basics/01-object/object-user.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 4.6 KiB

36
1-js/04-object-basics/01-object/object-user.svg Normal file
View file

@ -0,0 +1,36 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="248px" height="173px" viewBox="0 0 248 173" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>object-user.svg</title>
<desc>Created with sketchtool.</desc>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="object-user.svg">
<rect fill="#FFFFFF" x="0" y="0" width="248" height="173"></rect>
<path d="M127.93675,101 L111.270083,121 L241.729917,121 L225.06325,101 L127.93675,101 Z" id="Rectangle-4-Copy" stroke="#D1C4B1" stroke-width="4" fill="#D1C4B1" opacity="0.5"></path>
<g id="Group-2" transform="translate(142.000000, 8.000000)">
<g id="Group">
<rect id="Rectangle-7" fill="#FFFFFF" x="0" y="0" width="32" height="110"></rect>
<path d="M0,0 L32,0 L32,110 L0,110 L0,0 Z M16.5,102.016129 C20.6421356,102.016129 24,99.0373784 24,95.3629032 C24,91.6884281 20.6421356,88.7096774 16.5,88.7096774 C12.3578644,88.7096774 9,91.6884281 9,95.3629032 C9,99.0373784 12.3578644,102.016129 16.5,102.016129 Z M4,4.43548387 L4,81.6129032 L28,81.6129032 L28,4.43548387 L4,4.43548387 Z" id="Combined-Shape" fill="#E8C48F"></path>
</g>
<text id="name" transform="translate(15.500000, 42.858871) rotate(-90.000000) translate(-15.500000, -42.858871) " font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#EE6B47">
<tspan x="-1.3" y="47.358871">name</tspan>
</text>
</g>
<g id="Group-2-Copy" transform="translate(179.000000, 8.000000)">
<g id="Group">
<rect id="Rectangle-7" fill="#FFFFFF" x="0" y="0" width="32" height="110"></rect>
<path d="M0,0 L32,0 L32,110 L0,110 L0,0 Z M16.5,102.016129 C20.6421356,102.016129 24,99.0373784 24,95.3629032 C24,91.6884281 20.6421356,88.7096774 16.5,88.7096774 C12.3578644,88.7096774 9,91.6884281 9,95.3629032 C9,99.0373784 12.3578644,102.016129 16.5,102.016129 Z M4,4.43548387 L4,81.6129032 L28,81.6129032 L28,4.43548387 L4,4.43548387 Z" id="Combined-Shape" fill="#E8C48F"></path>
</g>
<text id="age" transform="translate(14.500000, 41.653226) rotate(-90.000000) translate(-14.500000, -41.653226) " font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#EE6B47">
<tspan x="1.9" y="46.1532258">age</tspan>
</text>
</g>
<rect id="Rectangle-4" stroke="#BCA68E" stroke-width="4" fill="#FFF9EB" x="109" y="115" width="135" height="50"></rect>
<rect id="Rectangle-8" stroke="#BCA68E" stroke-width="3" x="164.5" y="135.5" width="25" height="10"></rect>
<text id="user" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" fill="#EE6B47">
<tspan x="11" y="145">user</tspan>
</text>
<path id="Line-8" d="M77.5,142 L51,142 L51,139 L77.5,139 L77.5,131 L96.5,140.5 L77.5,150 L77.5,142 Z" fill="#EE6B47" fill-rule="nonzero"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 3.2 KiB

BIN
1-js/04-object-basics/01-object/object-user@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 11 KiB

BIN
1-js/04-object-basics/01-object/object.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 3.6 KiB

41
1-js/04-object-basics/01-object/object.svg Normal file
View file

@ -0,0 +1,41 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="176px" height="183px" viewBox="0 0 176 183" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>object.svg</title>
<desc>Created with sketchtool.</desc>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="object.svg">
<rect fill="#FFFFFF" x="0" y="0" width="176" height="183"></rect>
<path d="M36.9367499,113 L20.2700832,133 L150.729917,133 L134.06325,113 L36.9367499,113 Z" id="Rectangle-4-Copy" stroke="#D1C4B1" stroke-width="4" fill="#D1C4B1" opacity="0.5"></path>
<g id="Group-2" transform="translate(33.000000, 6.000000)">
<g id="Group">
<rect id="Rectangle-7" fill="#FFFFFF" x="0" y="0" width="32" height="124"></rect>
<path d="M0,0 L32,0 L32,124 L0,124 L0,0 Z M16.5,115 C20.6421356,115 24,111.642136 24,107.5 C24,103.357864 20.6421356,100 16.5,100 C12.3578644,100 9,103.357864 9,107.5 C9,111.642136 12.3578644,115 16.5,115 Z M4,5 L4,92 L28,92 L28,5 L4,5 Z" id="Combined-Shape" fill="#E8C48F"></path>
</g>
<text id="key1" transform="translate(15.500000, 47.500000) rotate(-90.000000) translate(-15.500000, -47.500000) " font-family="PTMono-Bold, PT Mono" font-size="16" font-weight="bold" fill="#EE6B47">
<tspan x="-3.7" y="52.5">key1</tspan>
</text>
</g>
<g id="Group-2-Copy" transform="translate(70.000000, 6.000000)">
<g id="Group">
<rect id="Rectangle-7" fill="#FFFFFF" x="0" y="0" width="32" height="124"></rect>
<path d="M0,0 L32,0 L32,124 L0,124 L0,0 Z M16.5,115 C20.6421356,115 24,111.642136 24,107.5 C24,103.357864 20.6421356,100 16.5,100 C12.3578644,100 9,103.357864 9,107.5 C9,111.642136 12.3578644,115 16.5,115 Z M4,5 L4,92 L28,92 L28,5 L4,5 Z" id="Combined-Shape" fill="#E8C48F"></path>
</g>
<text id="key2" transform="translate(15.500000, 47.500000) rotate(-90.000000) translate(-15.500000, -47.500000) " font-family="PTMono-Bold, PT Mono" font-size="16" font-weight="bold" fill="#EE6B47">
<tspan x="-3.7" y="52.5">key2</tspan>
</text>
</g>
<g id="Group-2-Copy-2" transform="translate(107.000000, 6.000000)">
<g id="Group">
<rect id="Rectangle-7" fill="#FFFFFF" x="0" y="0" width="32" height="124"></rect>
<path d="M0,0 L32,0 L32,124 L0,124 L0,0 Z M16.5,115 C20.6421356,115 24,111.642136 24,107.5 C24,103.357864 20.6421356,100 16.5,100 C12.3578644,100 9,103.357864 9,107.5 C9,111.642136 12.3578644,115 16.5,115 Z M4,5 L4,92 L28,92 L28,5 L4,5 Z" id="Combined-Shape" fill="#E8C48F"></path>
</g>
<text id="key3" transform="translate(15.500000, 47.500000) rotate(-90.000000) translate(-15.500000, -47.500000) " font-family="PTMono-Bold, PT Mono" font-size="16" font-weight="bold" fill="#EE6B47">
<tspan x="-3.7" y="52.5">key3</tspan>
</text>
</g>
<rect id="Rectangle-4" stroke="#BCA68E" stroke-width="4" fill="#FFF9EB" x="18" y="127" width="135" height="50"></rect>
<rect id="Rectangle-8" stroke="#BCA68E" stroke-width="3" x="73.5" y="147.5" width="25" height="10"></rect>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 3.5 KiB

BIN
1-js/04-object-basics/01-object/object@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 8.4 KiB

BIN
1-js/04-object-basics/01-object/variable-contains-reference.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 9 KiB

36
1-js/04-object-basics/01-object/variable-contains-reference.svg Normal file
View file

@ -0,0 +1,36 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="370px" height="249px" viewBox="0 0 370 249" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>variable-contains-reference.svg</title>
<desc>Created with sketchtool.</desc>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="variable-contains-reference.svg">
<g id="noun_1211_cc" transform="translate(12.000000, 119.000000)" fill="#E8C48F">
<path d="M17,28.1960457 L129.557785,28.1960457 L129.557785,71.1456641 C129.557785,71.5185728 129.479295,72.0083855 129.279367,72.4404861 C129.07944,72.8725868 112.704625,108 112.704625,108 L112.704625,53.6396695 L129.559266,28.1960457 L148,0 L35.4407339,0 L17,28.1960457 L17,28.1960457 Z" id="Shape"></path>
<polyline id="Shape" points="17 57 17 29 2 57"></polyline>
<path d="M0,59 L0,113.729971 C0,117.150501 1.4836395,119 4.38712201,119 L104.473443,119 C107.59502,119 110,116.4521 110,115.524372 L110,59 L0,59 L0,59 Z" id="Shape"></path>
</g>
<text id="user" font-family="OpenSans-SemiBold, Open Sans" font-size="18" font-weight="500" fill="#FFFFFF">
<tspan x="47" y="215">user</tspan>
</text>
<rect id="Rectangle-4" fill="#FFFFFF" x="116" y="153" width="44" height="6"></rect>
<path d="M123.854043,154.321929 L137.633029,140.846349 C139.246288,139.571606 142.818195,136.418958 141.204936,135.144404 C139.591676,133.868906 138.540503,134.671996 136.929629,135.947493 L118.43143,154.32193 C116.818171,155.596673 116.818171,157.16666 118.43143,158.441214 C118.43143,158.441214 139.913731,178.508876 141.204935,178.508876 C144.209997,178.508876 143.882164,176.687821 142.268905,175.413266 L123.854043,157.587044 L158.842523,157.587044 L182.224064,157.587044 L201.028364,157.587044 C203.308965,157.587044 204.778514,157.865709 204.778514,156.062589 C204.778514,154.259469 203.308964,154.321929 201.028364,154.321929 L123.854043,154.321929 Z" id="Shape-3" fill="#EE6B47" transform="translate(161.000000, 156.504438) scale(-1, 1) translate(-161.000000, -156.504438) "></path>
<g id="Rectangle-3-+-Shape" transform="translate(58.000000, 135.000000)">
<rect id="Rectangle-3" fill="#FFFFFF" x="0" y="0" width="47" height="37"></rect>
<path d="M44,33.7718421 L4,33.7718421 L4,4 L44,4 L44,33.7718421 L44,33.7718421 Z M8.7332,31.0177632 L39.2664,31.0177632 L29.2192,20.8671053 L27.3168,22.7567105 C26.4932,23.5690789 25.314,24.0340789 24.0748,24.0340789 C24.068,24.0340789 24.0608,24.0328947 24.054,24.0328947 C22.81,24.0277632 21.6272,23.5528947 20.808,22.7286842 L18.874,20.7964474 L8.7332,31.0177632 L8.7332,31.0177632 Z M6.7908,8.72618421 L6.7908,29.0397368 L16.9128,18.8381579 L6.7908,8.72618421 L6.7908,8.72618421 Z M31.1856,18.9131579 L41.2092,29.0385526 L41.2092,8.95434211 L31.1856,18.9131579 L31.1856,18.9131579 Z M8.7396,6.75486842 L22.7968,20.7968421 C23.1012,21.1023684 23.5632,21.2776316 24.0664,21.2788158 L24.0748,21.2788158 C24.5708,21.2788158 25.0432,21.1059211 25.3392,20.8122368 L39.4888,6.75486842 L8.7396,6.75486842 L8.7396,6.75486842 Z" id="Shape" fill="#EE6B47"></path>
</g>
<path d="M241.93675,117 L225.270083,137 L355.729917,137 L339.06325,117 L241.93675,117 Z" id="Rectangle-4-Copy" stroke="#D1C4B1" stroke-width="4" fill="#D1C4B1" opacity="0.5"></path>
<g id="Group-2" transform="translate(271.000000, 10.000000)">
<g id="Group">
<rect id="Rectangle-7" fill="#FFFFFF" x="0" y="0" width="32" height="124"></rect>
<path d="M0,0 L32,0 L32,124 L0,124 L0,0 Z M16.5,115 C20.6421356,115 24,111.642136 24,107.5 C24,103.357864 20.6421356,100 16.5,100 C12.3578644,100 9,103.357864 9,107.5 C9,111.642136 12.3578644,115 16.5,115 Z M4,5 L4,92 L28,92 L28,5 L4,5 Z" id="Combined-Shape" fill="#E8C48F"></path>
</g>
<text id="name" transform="translate(15.500000, 47.500000) rotate(-90.000000) translate(-15.500000, -47.500000) " font-family="PTMono-Bold, PT Mono" font-size="16" font-weight="bold" fill="#EE6B47">
<tspan x="-3.7" y="52.5">name</tspan>
</text>
</g>
<rect id="Rectangle-4" stroke="#BCA68E" stroke-width="4" fill="#FFF9EB" x="223" y="131" width="135" height="50"></rect>
<rect id="Rectangle-8" stroke="#BCA68E" stroke-width="3" x="278.5" y="151.5" width="25" height="10"></rect>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 4.6 KiB

BIN
1-js/04-object-basics/01-object/variable-contains-reference@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 21 KiB

BIN
1-js/04-object-basics/01-object/variable-copy-reference.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 13 KiB

56
1-js/04-object-basics/01-object/variable-copy-reference.svg Normal file
View file

@ -0,0 +1,56 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="599px" height="260px" viewBox="0 0 599 260" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>variable-copy-reference.svg</title>
<desc>Created with sketchtool.</desc>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="variable-copy-reference.svg">
<g id="Group" transform="translate(11.000000, 125.000000)">
<g id="noun_1211_cc" fill="#E8C48F">
<path d="M17,28.1960457 L129.557785,28.1960457 L129.557785,71.1456641 C129.557785,71.5185728 129.479295,72.0083855 129.279367,72.4404861 C129.07944,72.8725868 112.704625,108 112.704625,108 L112.704625,53.6396695 L129.559266,28.1960457 L148,0 L35.4407339,0 L17,28.1960457 L17,28.1960457 Z" id="Shape"></path>
<polyline id="Shape" points="17 57 17 29 2 57"></polyline>
<path d="M0,59 L0,113.729971 C0,117.150501 1.4836395,119 4.38712201,119 L104.473443,119 C107.59502,119 110,116.4521 110,115.524372 L110,59 L0,59 L0,59 Z" id="Shape"></path>
</g>
<text id="user" font-family="OpenSans-SemiBold, Open Sans" font-size="18" font-weight="500" fill="#FFFFFF">
<tspan x="35" y="96">user</tspan>
</text>
<g id="Rectangle-4-+-Shape-3" transform="translate(104.000000, 15.000000)">
<rect id="Rectangle-4" fill="#FFFFFF" x="0" y="19" width="44" height="6"></rect>
<path d="M7.85404284,20.3219293 L21.6330289,6.84634915 C23.2462881,5.57160629 26.8181947,2.41895793 25.2049355,1.14440364 C23.5916764,-0.131093502 22.5405033,0.671996159 20.9296292,1.9474933 L2.43143016,20.3219299 C0.818170998,21.5966728 0.818171047,23.1666601 2.43143021,24.4412144 C2.43143021,24.4412144 23.9137313,44.5088763 25.2049351,44.5088763 C28.2099969,44.5088763 27.882164,42.6878208 26.2689048,41.4132665 L7.8540433,23.5870439 L42.8425234,23.5870439 L66.2240642,23.5870439 L85.0283644,23.5870439 C87.3089653,23.5870439 88.7785142,23.8657087 88.7785142,22.0625887 C88.7785142,20.2594687 87.3089645,20.3219293 85.0283637,20.3219293 L7.85404284,20.3219293 Z" id="Shape-3" fill="#EE6B47" transform="translate(45.000000, 22.504438) scale(-1, 1) translate(-45.000000, -22.504438) "></path>
</g>
<g id="Rectangle-3-+-Shape" transform="translate(46.000000, 16.000000)">
<rect id="Rectangle-3" fill="#FFFFFF" x="0" y="0" width="47" height="37"></rect>
<path d="M44,33.7718421 L4,33.7718421 L4,4 L44,4 L44,33.7718421 L44,33.7718421 Z M8.7332,31.0177632 L39.2664,31.0177632 L29.2192,20.8671053 L27.3168,22.7567105 C26.4932,23.5690789 25.314,24.0340789 24.0748,24.0340789 C24.068,24.0340789 24.0608,24.0328947 24.054,24.0328947 C22.81,24.0277632 21.6272,23.5528947 20.808,22.7286842 L18.874,20.7964474 L8.7332,31.0177632 L8.7332,31.0177632 Z M6.7908,8.72618421 L6.7908,29.0397368 L16.9128,18.8381579 L6.7908,8.72618421 L6.7908,8.72618421 Z M31.1856,18.9131579 L41.2092,29.0385526 L41.2092,8.95434211 L31.1856,18.9131579 L31.1856,18.9131579 Z M8.7396,6.75486842 L22.7968,20.7968421 C23.1012,21.1023684 23.5632,21.2776316 24.0664,21.2788158 L24.0748,21.2788158 C24.5708,21.2788158 25.0432,21.1059211 25.3392,20.8122368 L39.4888,6.75486842 L8.7396,6.75486842 L8.7396,6.75486842 Z" id="Shape" fill="#EE6B47"></path>
</g>
</g>
<g id="noun_1211_cc" transform="translate(418.000000, 125.000000)" fill="#E8C48F">
<path d="M17,28.1960457 L129.557785,28.1960457 L129.557785,71.1456641 C129.557785,71.5185728 129.479295,72.0083855 129.279367,72.4404861 C129.07944,72.8725868 112.704625,108 112.704625,108 L112.704625,53.6396695 L129.559266,28.1960457 L148,0 L35.4407339,0 L17,28.1960457 L17,28.1960457 Z" id="Shape"></path>
<polyline id="Shape" points="17 57 17 29 2 57"></polyline>
<path d="M0,59 L0,113.729971 C0,117.150501 1.4836395,119 4.38712201,119 L104.473443,119 C107.59502,119 110,116.4521 110,115.524372 L110,59 L0,59 L0,59 Z" id="Shape"></path>
</g>
<text id="admin" font-family="OpenSans-SemiBold, Open Sans" font-size="18" font-weight="500" fill="#FFFFFF">
<tspan x="446" y="221">admin</tspan>
</text>
<g id="Rectangle-4-+-Shape-3" transform="translate(406.500000, 162.500000) scale(-1, 1) translate(-406.500000, -162.500000) translate(362.000000, 140.000000)">
<rect id="Rectangle-4" fill="#FFFFFF" x="0" y="19" width="44" height="6"></rect>
<path d="M7.85404284,20.3219293 L21.6330289,6.84634915 C23.2462881,5.57160629 26.8181947,2.41895793 25.2049355,1.14440364 C23.5916764,-0.131093502 22.5405033,0.671996159 20.9296292,1.9474933 L2.43143016,20.3219299 C0.818170998,21.5966728 0.818171047,23.1666601 2.43143021,24.4412144 C2.43143021,24.4412144 23.9137313,44.5088763 25.2049351,44.5088763 C28.2099969,44.5088763 27.882164,42.6878208 26.2689048,41.4132665 L7.8540433,23.5870439 L42.8425234,23.5870439 L66.2240642,23.5870439 L85.0283644,23.5870439 C87.3089653,23.5870439 88.7785142,23.8657087 88.7785142,22.0625887 C88.7785142,20.2594687 87.3089645,20.3219293 85.0283637,20.3219293 L7.85404284,20.3219293 Z" id="Shape-3" fill="#EE6B47" transform="translate(45.000000, 22.504438) scale(-1, 1) translate(-45.000000, -22.504438) "></path>
</g>
<g id="Rectangle-3-+-Shape" transform="translate(464.000000, 141.000000)">
<rect id="Rectangle-3" fill="#FFFFFF" x="0" y="0" width="47" height="37"></rect>
<path d="M44,33.7718421 L4,33.7718421 L4,4 L44,4 L44,33.7718421 L44,33.7718421 Z M8.7332,31.0177632 L39.2664,31.0177632 L29.2192,20.8671053 L27.3168,22.7567105 C26.4932,23.5690789 25.314,24.0340789 24.0748,24.0340789 C24.068,24.0340789 24.0608,24.0328947 24.054,24.0328947 C22.81,24.0277632 21.6272,23.5528947 20.808,22.7286842 L18.874,20.7964474 L8.7332,31.0177632 L8.7332,31.0177632 Z M6.7908,8.72618421 L6.7908,29.0397368 L16.9128,18.8381579 L6.7908,8.72618421 L6.7908,8.72618421 Z M31.1856,18.9131579 L41.2092,29.0385526 L41.2092,8.95434211 L31.1856,18.9131579 L31.1856,18.9131579 Z M8.7396,6.75486842 L22.7968,20.7968421 C23.1012,21.1023684 23.5632,21.2776316 24.0664,21.2788158 L24.0748,21.2788158 C24.5708,21.2788158 25.0432,21.1059211 25.3392,20.8122368 L39.4888,6.75486842 L8.7396,6.75486842 L8.7396,6.75486842 Z" id="Shape" fill="#EE6B47"></path>
</g>
<path d="M235.93675,125 L219.270083,145 L349.729917,145 L333.06325,125 L235.93675,125 Z" id="Rectangle-4-Copy" stroke="#D1C4B1" stroke-width="4" fill="#D1C4B1" opacity="0.5"></path>
<g id="Group-2" transform="translate(265.000000, 18.000000)">
<g id="Group">
<rect id="Rectangle-7" fill="#FFFFFF" x="0" y="0" width="32" height="124"></rect>
<path d="M0,0 L32,0 L32,124 L0,124 L0,0 Z M16.5,115 C20.6421356,115 24,111.642136 24,107.5 C24,103.357864 20.6421356,100 16.5,100 C12.3578644,100 9,103.357864 9,107.5 C9,111.642136 12.3578644,115 16.5,115 Z M4,5 L4,92 L28,92 L28,5 L4,5 Z" id="Combined-Shape" fill="#E8C48F"></path>
</g>
<text id="name" transform="translate(15.500000, 47.500000) rotate(-90.000000) translate(-15.500000, -47.500000) " font-family="PTMono-Bold, PT Mono" font-size="16" font-weight="bold" fill="#EE6B47">
<tspan x="-3.7" y="52.5">name</tspan>
</text>
</g>
<rect id="Rectangle-4" stroke="#BCA68E" stroke-width="4" fill="#FFF9EB" x="217" y="139" width="135" height="50"></rect>
<rect id="Rectangle-8" stroke="#BCA68E" stroke-width="3" x="272.5" y="159.5" width="25" height="10"></rect>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 7.8 KiB

BIN
1-js/04-object-basics/01-object/variable-copy-reference@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 30 KiB

BIN
1-js/04-object-basics/01-object/variable-copy-value.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 15 KiB

40
1-js/04-object-basics/01-object/variable-copy-value.svg Normal file
View file

@ -0,0 +1,40 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="359px" height="143px" viewBox="0 0 359 143" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>variable-copy-value.svg</title>
<desc>Created with sketchtool.</desc>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="variable-copy-value.svg">
<g id="noun_1211_cc-+-Message" transform="translate(11.000000, 6.000000)">
<g id="noun_1211_cc">
<path d="M17,37.1960457 L129.557785,37.1960457 L129.557785,80.1456641 C129.557785,80.5185728 129.479295,81.0083855 129.279367,81.4404861 C129.07944,81.8725868 112.704625,117 112.704625,117 L112.704625,62.6396695 L129.559266,37.1960457 L148,9 L35.4407339,9 L17,37.1960457 L17,37.1960457 Z" id="Shape" fill="#E8C48F"></path>
<polyline id="Shape" fill="#E8C48F" points="17 66 17 38 2 66"></polyline>
<g id="Rectangle-5-+-&quot;World!&quot;" transform="translate(15.000000, 0.000000)">
<path d="M18.8613371,1.80856046 L1.99871056,17.5332141 L55.1386629,74.5188362 L72.0012894,58.7941826 L18.8613371,1.80856046 Z" id="Rectangle-5" stroke="#8A704D" stroke-width="2" fill="#FFF9EB"></path>
<text id="&quot;Hello!&quot;" transform="translate(38.099228, 39.181970) rotate(47.000000) translate(-38.099228, -39.181970) " font-family="OpenSans-SemiBold, Open Sans" font-size="14" font-weight="500" line-spacing="17" fill="#8A704D">
<tspan x="4.41856411" y="43.9983764">"Hello!"</tspan>
</text>
</g>
<path d="M0,68 L0,122.729971 C0,126.150501 1.4836395,128 4.38712201,128 L104.473443,128 C107.59502,128 110,125.4521 110,124.524372 L110,68 L0,68 L0,68 Z" id="Shape" fill="#E8C48F"></path>
</g>
<text id="message" font-family="OpenSans-SemiBold, Open Sans" font-size="18" font-weight="500" fill="#FFFFFF">
<tspan x="17" y="105">message</tspan>
</text>
</g>
<g id="Group" transform="translate(210.000000, 6.000000)">
<path d="M17,37.1960457 L130.417005,37.1960457 L130.417005,80.1456641 C130.417005,80.5185728 130.337916,81.0083855 130.136462,81.4404861 C129.935008,81.8725868 113.435195,117 113.435195,117 L113.435195,62.6396695 L130.418497,37.1960457 L149,9 L35.5815029,9 L17,37.1960457 L17,37.1960457 Z" id="Shape" fill="#E8C48F"></path>
<polyline id="Shape" fill="#E8C48F" points="18 66 18 38 2 66"></polyline>
<g id="Rectangle-5-+-&quot;World!&quot;" transform="translate(15.000000, 0.000000)">
<path d="M19.1172186,1.79919253 L2.01617912,17.5335434 L55.8827814,74.5282042 L72.9838209,58.7938532 L19.1172186,1.79919253 Z" id="Rectangle-5" stroke="#8A704D" stroke-width="2" fill="#FFF9EB"></path>
<text id="&quot;Hello!&quot;" transform="translate(38.155854, 37.706510) rotate(47.000000) translate(-38.155854, -37.706510) " font-family="OpenSans-SemiBold, Open Sans" font-size="14" font-weight="500" line-spacing="17" fill="#8A704D">
<tspan x="4.47519034" y="42.5229163">"Hello!"</tspan>
</text>
</g>
<path d="M0,68 L0,122.729971 C0,126.150501 1.49712713,128 4.42700494,128 L105.423201,128 C108.573157,128 111,125.4521 111,124.524372 L111,68 L0,68 L0,68 Z" id="Shape" fill="#E8C48F"></path>
<text id="phrase" font-family="OpenSans-SemiBold, Open Sans" font-size="18" font-weight="500" fill="#FFFFFF">
<tspan x="25" y="105">phrase</tspan>
</text>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 3.8 KiB

BIN
1-js/04-object-basics/01-object/variable-copy-value@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 35 KiB

26
1-js/04-object-basics/02-garbage-collection/article.md
View file

@ -38,7 +38,7 @@ let user = {
};
```
![](memory-user-john.png)
![](memory-user-john.svg)
Here the arrow depicts an object reference. The global variable `"user"` references the object `{name: "John"}` (we'll call it John for brevity). The `"name"` property of John stores a primitive, so it's painted inside the object.
@ -48,7 +48,7 @@ If the value of `user` is overwritten, the reference is lost:
user = null;
```
![](memory-user-john-lost.png)
![](memory-user-john-lost.svg)
Now John becomes unreachable. There's no way to access it, no references to it. Garbage collector will junk the data and free the memory.
@ -67,7 +67,7 @@ let admin = user;
*/!*
```
![](memory-user-john-admin.png)
![](memory-user-john-admin.svg)
Now if we do the same:
```js
@ -102,7 +102,7 @@ Function `marry` "marries" two objects by giving them references to each other a
The resulting memory structure:
![](family.png)
![](family.svg)
As of now, all objects are reachable.
@ -113,19 +113,19 @@ delete family.father;
delete family.mother.husband;
```
![](family-delete-refs.png)
![](family-delete-refs.svg)
It's not enough to delete only one of these two references, because all objects would still be reachable.
But if we delete both, then we can see that John has no incoming reference any more:
![](family-no-father.png)
![](family-no-father.svg)
Outgoing references do not matter. Only incoming ones can make an object reachable. So, John is now unreachable and will be removed from the memory with all its data that also became unaccessible.
After garbage collection:
![](family-no-father-2.png)
![](family-no-father-2.svg)
## Unreachable island
@ -139,7 +139,7 @@ family = null;
The in-memory picture becomes:
![](family-no-family.png)
![](family-no-family.svg)
This example demonstrates how important the concept of reachability is.
@ -161,25 +161,25 @@ The following "garbage collection" steps are regularly performed:
For instance, let our object structure look like this:
![](garbage-collection-1.png)
![](garbage-collection-1.svg)
We can clearly see an "unreachable island" to the right side. Now let's see how "mark-and-sweep" garbage collector deals with it.
The first step marks the roots:
![](garbage-collection-2.png)
![](garbage-collection-2.svg)
Then their references are marked:
![](garbage-collection-3.png)
![](garbage-collection-3.svg)
...And their references, while possible:
![](garbage-collection-4.png)
![](garbage-collection-4.svg)
Now the objects that could not be visited in the process are considered unreachable and will be removed:
![](garbage-collection-5.png)
![](garbage-collection-5.svg)
That's the concept of how garbage collection works.

BIN
1-js/04-object-basics/02-garbage-collection/family-delete-refs.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 15 KiB

56
1-js/04-object-basics/02-garbage-collection/family-delete-refs.svg Normal file
View file

@ -0,0 +1,56 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="337px" height="204px" viewBox="0 0 337 204" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>family-delete-refs.svg</title>
<desc>Created with sketchtool.</desc>
<g id="garbage-collection" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="family-delete-refs.svg">
<path id="Line" d="M147.5,189.5 L193.5,189.5 L193.5,191.5 L147.5,191.5 L147.5,197.5 L133.5,190.5 L147.5,183.5 L147.5,189.5 Z" fill="#9B9B9B" fill-rule="nonzero" opacity="0.6"></path>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="88" y="13" width="151" height="26"></rect>
<text id="&lt;global-variable&gt;" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="92" y="30">&lt;global variable&gt;</tspan>
</text>
<rect id="Rectangle-2" stroke="#BCA68E" stroke-width="2" fill="#FFF9EB" x="123" y="80" width="78" height="26"></rect>
<text id="Object" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="139" y="96">Object</tspan>
</text>
<rect id="Rectangle-3" stroke="#BCA68E" stroke-width="2" fill="#FFF9EB" x="5" y="148" width="118" height="48"></rect>
<text id="Object-2" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="39" y="165">Object</tspan>
</text>
<text id="wife" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="147" y="148">wife</tspan>
</text>
<text id="family" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="106" y="63">family</tspan>
</text>
<text id="name:-&quot;John&quot;" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal" fill="#8A704D">
<tspan x="19" y="185">name: "John"</tspan>
</text>
<rect id="Rectangle-4" stroke="#BCA68E" stroke-width="2" fill="#FFF9EB" x="214" y="148" width="118" height="48"></rect>
<text id="name:-&quot;Ann&quot;" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal" fill="#8A704D">
<tspan x="230" y="185">name: "Ann"</tspan>
</text>
<text id="mother" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="242" y="127">mother</tspan>
</text>
<text id="Object-3" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="244" y="165">Object</tspan>
</text>
<path id="Line" d="M162.5,61.5 L162.5,43.5 L164.5,43.5 L164.5,61.5 L170.5,61.5 L163.5,75.5 L156.5,61.5 L162.5,61.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line-2" d="M79.4216083,135.684192 L114.749841,111.10803 L115.89197,112.749841 L80.5637373,137.326002 L83.9901242,142.251434 L68.5,144.5 L75.9952214,130.758761 L79.4216083,135.684192 Z" fill="#9B9B9B" fill-rule="nonzero" opacity="0.6"></path>
<path id="Line" d="M180.5,157.5 L132.5,157.5 L132.5,155.5 L180.5,155.5 L180.5,149.5 L194.5,156.5 L180.5,163.5 L180.5,157.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line" d="M243.36482,137.447526 L207.11061,112.763808 L208.236192,111.11061 L244.490402,135.794327 L247.867147,130.834732 L255.5,144.5 L239.988074,142.407121 L243.36482,137.447526 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path d="M89.5,118.5 L100.5,132.5" id="Line-Copy" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" transform="translate(95.000000, 125.500000) scale(-1, 1) translate(-95.000000, -125.500000) "></path>
<path d="M89.5,118.5 L100.5,132.5" id="Line-Copy-2" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
<path d="M161.5,183.5 L172.5,197.5" id="Line-Copy-4" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" transform="translate(167.000000, 190.500000) scale(-1, 1) translate(-167.000000, -190.500000) "></path>
<path d="M161.5,183.5 L172.5,197.5" id="Line-Copy-3" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
<text id="father" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#9B9B9B">
<tspan x="35" y="127">father</tspan>
</text>
<text id="husband" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#9B9B9B">
<tspan x="136" y="181">husband</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 4.9 KiB

BIN
1-js/04-object-basics/02-garbage-collection/family-delete-refs@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 36 KiB

BIN
1-js/04-object-basics/02-garbage-collection/family-no-family.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 16 KiB

57
1-js/04-object-basics/02-garbage-collection/family-no-family.svg Normal file
View file

@ -0,0 +1,57 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="420px" height="279px" viewBox="0 0 420 279" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>family-no-family.svg</title>
<desc>Created with sketchtool.</desc>
<g id="garbage-collection" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="family-no-family.svg">
<path id="Line" d="M211.5,234.5 L257.5,234.5 L257.5,236.5 L211.5,236.5 L211.5,242.5 L197.5,235.5 L211.5,228.5 L211.5,234.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="153" y="25" width="153" height="48"></rect>
<text id="&lt;global&gt;" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="199" y="43">&lt;global&gt;</tspan>
</text>
<rect id="Rectangle-2" stroke="#BCA68E" stroke-width="2" fill="#FFF9EB" x="187" y="123" width="78" height="26"></rect>
<text id="Object" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="203" y="139">Object</tspan>
</text>
<rect id="Rectangle-3" stroke="#BCA68E" stroke-width="2" fill="#FFF9EB" x="69" y="193" width="118" height="48"></rect>
<text id="Object-2" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="103" y="210">Object</tspan>
</text>
<text id="father" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="99" y="170">father</tspan>
</text>
<text id="wife" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="211" y="193">wife</tspan>
</text>
<text id="name:-&quot;John&quot;" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal" fill="#8A704D">
<tspan x="83" y="230">name: "John"</tspan>
</text>
<rect id="Rectangle-4" stroke="#BCA68E" stroke-width="2" fill="#FFF9EB" x="278" y="193" width="118" height="48"></rect>
<text id="name:-&quot;Ann&quot;" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal" fill="#8A704D">
<tspan x="294" y="230">name: "Ann"</tspan>
</text>
<text id="mother" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="306" y="170">mother</tspan>
</text>
<text id="Object-3" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="308" y="210">Object</tspan>
</text>
<path id="Line-2" d="M143.421608,178.684192 L178.749841,154.10803 L179.89197,155.749841 L144.563737,180.326002 L147.990124,185.251434 L132.5,187.5 L139.995221,173.758761 L143.421608,178.684192 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line" d="M244.5,202.5 L196.5,202.5 L196.5,200.5 L244.5,200.5 L244.5,194.5 L258.5,201.5 L244.5,208.5 L244.5,202.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="husband" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="200" y="226">husband</tspan>
</text>
<path id="Line" d="M307.36482,180.447526 L271.11061,155.763808 L272.236192,154.11061 L308.490402,178.794327 L311.867147,173.834732 L319.5,187.5 L303.988074,185.407121 L307.36482,180.447526 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<rect id="Rectangle-5" stroke="#D0021B" stroke-width="2" x="48" y="112" width="364" height="150"></rect>
<text id="family:-null" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="183" y="66">family: null</tspan>
</text>
<g id="noun_48910_cc" transform="translate(8.000000, 110.000000)">
<path d="M17.5030263,1.75054945 L12.4969737,1.75054945 C12.3098684,1.75054945 12.1571053,1.90364835 12.1571053,2.09156044 L12.1571053,3.21745055 L17.8432895,3.21745055 L17.8432895,2.09156044 C17.8432895,1.90364835 17.6905263,1.75054945 17.5030263,1.75054945 L17.5030263,1.75054945 Z" id="Shape"></path>
<path d="M28.3638158,3.21745055 L19.5896053,3.21745055 L19.5896053,2.09156044 C19.5896053,0.937978022 18.6540789,4.4408921e-16 17.5030263,4.4408921e-16 L12.4969737,4.4408921e-16 C11.3463158,4.4408921e-16 10.4103947,0.937978022 10.4103947,2.09156044 L10.4103947,3.21745055 L1.63657895,3.21745055 C0.9375,3.21745055 0.370657895,3.78514286 0.370657895,4.48575824 L0.370657895,4.57516484 C0.370657895,5.27578022 0.9375,5.84347253 1.63657895,5.84347253 L28.3638158,5.84347253 C29.0628947,5.84347253 29.6297368,5.27578022 29.6297368,4.57516484 L29.6297368,4.48575824 C29.6297368,3.78514286 29.0625,3.21745055 28.3638158,3.21745055 L28.3638158,3.21745055 Z M17.8432895,3.21745055 L12.1571053,3.21745055 L12.1571053,2.09156044 C12.1571053,1.90364835 12.3098684,1.75054945 12.4969737,1.75054945 L17.5034211,1.75054945 C17.6909211,1.75054945 17.8432895,1.90364835 17.8432895,2.09156044 L17.8432895,3.21745055 L17.8432895,3.21745055 Z" id="Shape" fill="#D0021B"></path>
<path d="M26.0542105,6.28101099 L3.7275,6.28101099 C2.42960526,6.28101099 1.37723684,6.0567033 1.37723684,7.35784615 L3.13973684,33.195956 C3.13973684,34.4959121 4.1925,35.6047912 5.49039474,35.6047912 L24.2921053,35.6047912 C25.59,35.6047912 26.6423684,34.4959121 26.6423684,33.195956 L28.4048684,7.35784615 C28.4044737,6.0567033 27.3521053,6.28101099 26.0542105,6.28101099 L26.0542105,6.28101099 Z M9.63710526,32.1927033 C9.26013158,32.2053626 8.94552632,31.932 8.93289474,31.5807033 L8.23894737,11.664 C8.22671053,11.3127033 8.52236842,11.0171868 8.89815789,11.0041319 C9.27513158,10.9910769 9.58973684,11.2652308 9.60236842,11.6165275 L10.2963158,31.5332308 C10.3085526,31.8841319 10.0132895,32.180044 9.63710526,32.1927033 L9.63710526,32.1927033 Z M15.6809211,31.5632967 C15.6809211,31.9145934 15.3753947,32.1998242 14.9988158,32.1998242 C14.6222368,32.1998242 14.3167105,31.9141978 14.3167105,31.5632967 L14.3167105,11.6343297 C14.3167105,11.2826374 14.6222368,10.9978022 14.9988158,10.9978022 C15.3753947,10.9978022 15.6809211,11.2826374 15.6809211,11.6343297 L15.6809211,31.5632967 L15.6809211,31.5632967 Z M21.0651316,31.5810989 C21.0528947,31.9323956 20.7378947,32.2057582 20.3609211,32.1930989 C19.9847368,32.1804396 19.6894737,31.8845275 19.7017105,31.5332308 L20.3956579,11.6165275 C20.4078947,11.2652308 20.7225,10.9910769 21.0994737,11.0041319 C21.4756579,11.0175824 21.7713158,11.3127033 21.7590789,11.664 L21.0651316,31.5810989 L21.0651316,31.5810989 Z" id="Shape" fill="#D0021B"></path>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 7 KiB

BIN
1-js/04-object-basics/02-garbage-collection/family-no-family@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 38 KiB

BIN
1-js/04-object-basics/02-garbage-collection/family-no-father-2.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 7.6 KiB

33
1-js/04-object-basics/02-garbage-collection/family-no-father-2.svg Normal file
View file

@ -0,0 +1,33 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="144px" height="225px" viewBox="0 0 144 225" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>family-no-father-2.svg</title>
<desc>Created with sketchtool.</desc>
<g id="garbage-collection" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="family-no-father-2.svg">
<rect id="Rectangle-2" stroke="#BCA68E" stroke-width="2" fill="#FFF9EB" x="34" y="91" width="78" height="26"></rect>
<text id="Object" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="50" y="107">Object</tspan>
</text>
<text id="family" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="15" y="67">family</tspan>
</text>
<rect id="Rectangle-4" stroke="#BCA68E" stroke-width="2" fill="#FFF9EB" x="16" y="166" width="118" height="48"></rect>
<text id="name:-&quot;Ann&quot;" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal" fill="#8A704D">
<tspan x="34" y="203">name: "Ann"</tspan>
</text>
<text id="mother" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="16" y="142">mother</tspan>
</text>
<text id="Object-3" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="48" y="183">Object</tspan>
</text>
<path id="Line" d="M73.5,65.5 L73.5,47.5 L75.5,47.5 L75.5,65.5 L81.5,65.5 L74.5,79.5 L67.5,65.5 L73.5,65.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line" d="M72.5,141.5 L72.5,122.5 L74.5,122.5 L74.5,141.5 L80.5,141.5 L73.5,155.5 L66.5,141.5 L72.5,141.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="27" y="16" width="93" height="26"></rect>
<text id="&lt;global&gt;" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="43" y="33">&lt;global&gt;</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
1-js/04-object-basics/02-garbage-collection/family-no-father-2@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 18 KiB

BIN
1-js/04-object-basics/02-garbage-collection/family-no-father.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 13 KiB

50
1-js/04-object-basics/02-garbage-collection/family-no-father.svg Normal file
View file

@ -0,0 +1,50 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="399px" height="225px" viewBox="0 0 399 225" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>family-no-father.svg</title>
<desc>Created with sketchtool.</desc>
<g id="garbage-collection" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="family-no-father.svg">
<rect id="Rectangle-2" stroke="#BCA68E" stroke-width="2" fill="#FFF9EB" x="187" y="78" width="78" height="26"></rect>
<text id="Object" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="203" y="94">Object</tspan>
</text>
<rect id="Rectangle-3" stroke="#BCA68E" stroke-width="2" fill="#FFF9EB" x="69" y="146" width="118" height="48"></rect>
<text id="Object-2" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="103" y="163">Object</tspan>
</text>
<text id="wife" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="211" y="146">wife</tspan>
</text>
<text id="family" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="171" y="61">family</tspan>
</text>
<text id="name:-&quot;John&quot;" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal" fill="#8A704D">
<tspan x="83" y="183">name: "John"</tspan>
</text>
<rect id="Rectangle-4" stroke="#BCA68E" stroke-width="2" fill="#FFF9EB" x="278" y="146" width="118" height="48"></rect>
<text id="name:-&quot;Ann&quot;" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal" fill="#8A704D">
<tspan x="299" y="183">name: "Ann"</tspan>
</text>
<text id="mother" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="306" y="125">mother</tspan>
</text>
<text id="Object-3" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="308" y="163">Object</tspan>
</text>
<path id="Line" d="M226.5,59.5 L226.5,41.5 L228.5,41.5 L228.5,59.5 L234.5,59.5 L227.5,73.5 L220.5,59.5 L226.5,59.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line" d="M244.5,155.5 L196.5,155.5 L196.5,153.5 L244.5,153.5 L244.5,147.5 L258.5,154.5 L244.5,161.5 L244.5,155.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line" d="M307.36482,135.447526 L271.11061,110.763808 L272.236192,109.11061 L308.490402,133.794327 L311.867147,128.834732 L319.5,142.5 L303.988074,140.407121 L307.36482,135.447526 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<rect id="Rectangle-5" stroke="#D0021B" stroke-width="2" x="48" y="117" width="217" height="99"></rect>
<g id="noun_48910_cc" transform="translate(7.000000, 114.000000)">
<path d="M17.5030263,1.75054945 L12.4969737,1.75054945 C12.3098684,1.75054945 12.1571053,1.90364835 12.1571053,2.09156044 L12.1571053,3.21745055 L17.8432895,3.21745055 L17.8432895,2.09156044 C17.8432895,1.90364835 17.6905263,1.75054945 17.5030263,1.75054945 L17.5030263,1.75054945 Z" id="Shape"></path>
<path d="M28.3638158,3.21745055 L19.5896053,3.21745055 L19.5896053,2.09156044 C19.5896053,0.937978022 18.6540789,-4.4408921e-16 17.5030263,-4.4408921e-16 L12.4969737,-4.4408921e-16 C11.3463158,-4.4408921e-16 10.4103947,0.937978022 10.4103947,2.09156044 L10.4103947,3.21745055 L1.63657895,3.21745055 C0.9375,3.21745055 0.370657895,3.78514286 0.370657895,4.48575824 L0.370657895,4.57516484 C0.370657895,5.27578022 0.9375,5.84347253 1.63657895,5.84347253 L28.3638158,5.84347253 C29.0628947,5.84347253 29.6297368,5.27578022 29.6297368,4.57516484 L29.6297368,4.48575824 C29.6297368,3.78514286 29.0625,3.21745055 28.3638158,3.21745055 L28.3638158,3.21745055 Z M17.8432895,3.21745055 L12.1571053,3.21745055 L12.1571053,2.09156044 C12.1571053,1.90364835 12.3098684,1.75054945 12.4969737,1.75054945 L17.5034211,1.75054945 C17.6909211,1.75054945 17.8432895,1.90364835 17.8432895,2.09156044 L17.8432895,3.21745055 L17.8432895,3.21745055 Z" id="Shape" fill="#D0021B"></path>
<path d="M26.0542105,6.28101099 L3.7275,6.28101099 C2.42960526,6.28101099 1.37723684,6.0567033 1.37723684,7.35784615 L3.13973684,33.195956 C3.13973684,34.4959121 4.1925,35.6047912 5.49039474,35.6047912 L24.2921053,35.6047912 C25.59,35.6047912 26.6423684,34.4959121 26.6423684,33.195956 L28.4048684,7.35784615 C28.4044737,6.0567033 27.3521053,6.28101099 26.0542105,6.28101099 L26.0542105,6.28101099 Z M9.63710526,32.1927033 C9.26013158,32.2053626 8.94552632,31.932 8.93289474,31.5807033 L8.23894737,11.664 C8.22671053,11.3127033 8.52236842,11.0171868 8.89815789,11.0041319 C9.27513158,10.9910769 9.58973684,11.2652308 9.60236842,11.6165275 L10.2963158,31.5332308 C10.3085526,31.8841319 10.0132895,32.180044 9.63710526,32.1927033 L9.63710526,32.1927033 Z M15.6809211,31.5632967 C15.6809211,31.9145934 15.3753947,32.1998242 14.9988158,32.1998242 C14.6222368,32.1998242 14.3167105,31.9141978 14.3167105,31.5632967 L14.3167105,11.6343297 C14.3167105,11.2826374 14.6222368,10.9978022 14.9988158,10.9978022 C15.3753947,10.9978022 15.6809211,11.2826374 15.6809211,11.6343297 L15.6809211,31.5632967 L15.6809211,31.5632967 Z M21.0651316,31.5810989 C21.0528947,31.9323956 20.7378947,32.2057582 20.3609211,32.1930989 C19.9847368,32.1804396 19.6894737,31.8845275 19.7017105,31.5332308 L20.3956579,11.6165275 C20.4078947,11.2652308 20.7225,10.9910769 21.0994737,11.0041319 C21.4756579,11.0175824 21.7713158,11.3127033 21.7590789,11.664 L21.0651316,31.5810989 L21.0651316,31.5810989 Z" id="Shape" fill="#D0021B"></path>
</g>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="181" y="13" width="93" height="26"></rect>
<text id="&lt;global&gt;" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="197" y="30">&lt;global&gt;</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 6.3 KiB

BIN
1-js/04-object-basics/02-garbage-collection/family-no-father@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 31 KiB

BIN
1-js/04-object-basics/02-garbage-collection/family.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 14 KiB

52
1-js/04-object-basics/02-garbage-collection/family.svg Normal file
View file

@ -0,0 +1,52 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="337px" height="204px" viewBox="0 0 337 204" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>family.svg</title>
<desc>Created with sketchtool.</desc>
<g id="garbage-collection" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="family.svg">
<path id="Line" d="M147.5,189.5 L193.5,189.5 L193.5,191.5 L147.5,191.5 L147.5,197.5 L133.5,190.5 L147.5,183.5 L147.5,189.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<rect id="Rectangle-2" stroke="#BCA68E" stroke-width="2" fill="#FFF9EB" x="123" y="80" width="78" height="26"></rect>
<text id="Object" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="139" y="96">Object</tspan>
</text>
<rect id="Rectangle-3" stroke="#BCA68E" stroke-width="2" fill="#FFF9EB" x="5" y="148" width="118" height="48"></rect>
<text id="Object-2" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="39" y="165">Object</tspan>
</text>
<text id="father" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="35" y="127">father</tspan>
</text>
<text id="wife" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="147" y="148">wife</tspan>
</text>
<text id="family" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="107" y="63">family</tspan>
</text>
<text id="name:-&quot;John&quot;" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal" fill="#8A704D">
<tspan x="19" y="185">name: "John"</tspan>
</text>
<rect id="Rectangle-4" stroke="#BCA68E" stroke-width="2" fill="#FFF9EB" x="214" y="148" width="118" height="48"></rect>
<text id="name:-&quot;Ann&quot;" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal" fill="#8A704D">
<tspan x="230" y="185">name: "Ann"</tspan>
</text>
<text id="mother" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="242" y="127">mother</tspan>
</text>
<text id="Object-3" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="244" y="165">Object</tspan>
</text>
<path id="Line" d="M162.5,61.5 L162.5,43.5 L164.5,43.5 L164.5,61.5 L170.5,61.5 L163.5,75.5 L156.5,61.5 L162.5,61.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line-2" d="M79.4216083,135.684192 L114.749841,111.10803 L115.89197,112.749841 L80.5637373,137.326002 L83.9901242,142.251434 L68.5,144.5 L75.9952214,130.758761 L79.4216083,135.684192 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line" d="M180.5,157.5 L132.5,157.5 L132.5,155.5 L180.5,155.5 L180.5,149.5 L194.5,156.5 L180.5,163.5 L180.5,157.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="husband" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="136" y="181">husband</tspan>
</text>
<path id="Line" d="M243.36482,137.447526 L207.11061,112.763808 L208.236192,111.11061 L244.490402,135.794327 L247.867147,130.834732 L255.5,144.5 L239.988074,142.407121 L243.36482,137.447526 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="88" y="13" width="151" height="26"></rect>
<text id="&lt;global-variable&gt;" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="92" y="30">&lt;global variable&gt;</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 4.1 KiB

BIN
1-js/04-object-basics/02-garbage-collection/family@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 33 KiB

BIN
1-js/04-object-basics/02-garbage-collection/garbage-collection-1.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 11 KiB

162
1-js/04-object-basics/02-garbage-collection/garbage-collection-1.svg Normal file
View file

@ -0,0 +1,162 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="463px" height="204px" viewBox="0 0 463 204" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>garbage-collection-1.svg</title>
<desc>Created with sketchtool.</desc>
<defs>
<rect id="path-1" x="0" y="0" width="80" height="28"></rect>
<rect id="path-3" x="0" y="0" width="40" height="20"></rect>
<rect id="path-5" x="0" y="0" width="40" height="20"></rect>
<rect id="path-7" x="0" y="0" width="40" height="20"></rect>
<rect id="path-9" x="0" y="0" width="40" height="20"></rect>
<rect id="path-11" x="0" y="0" width="40" height="20"></rect>
<rect id="path-13" x="0" y="0" width="40" height="20"></rect>
<rect id="path-15" x="0" y="0" width="40" height="20"></rect>
<rect id="path-17" x="0" y="0" width="40" height="20"></rect>
<rect id="path-19" x="0" y="0" width="40" height="20"></rect>
<rect id="path-21" x="0" y="0" width="40" height="20"></rect>
<rect id="path-23" x="0" y="0" width="40" height="20"></rect>
</defs>
<g id="garbage-collection" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="garbage-collection-1.svg">
<g id="Rectangle-1-Clipped" transform="translate(106.000000, 8.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<g id="path-1"></g>
<g id="Rectangle-1" mask="url(#mask-2)" fill="#FFF9EB" stroke="#E8C48E" stroke-width="4">
<rect id="path-1" x="0" y="0" width="80" height="28"></rect>
</g>
</g>
<text id="&lt;global&gt;" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal">
<tspan x="115" y="26">&lt;global&gt;</tspan>
</text>
<g id="Rectangle-2-Clipped" transform="translate(360.000000, 99.000000)">
<mask id="mask-4" fill="white">
<use xlink:href="#path-3"></use>
</mask>
<g id="path-3"></g>
<g id="Rectangle-2" mask="url(#mask-4)" fill="#FFF9EB" fill-opacity="0.8" stroke="#BCA68E" stroke-width="4">
<rect id="path-3" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-2-Clipped" transform="translate(267.000000, 99.000000)">
<mask id="mask-6" fill="white">
<use xlink:href="#path-5"></use>
</mask>
<g id="path-5"></g>
<g id="Rectangle-2-Copy-2" mask="url(#mask-6)" fill="#FFF9EB" fill-opacity="0.8" stroke="#BCA68E" stroke-width="4">
<rect id="path-5" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-2-Clipped" transform="translate(126.000000, 79.000000)">
<mask id="mask-8" fill="white">
<use xlink:href="#path-7"></use>
</mask>
<g id="path-7"></g>
<g id="Rectangle-2-Copy-2" mask="url(#mask-8)" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4">
<rect id="path-7" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-Clipped" transform="translate(313.000000, 53.000000)">
<mask id="mask-10" fill="white">
<use xlink:href="#path-9"></use>
</mask>
<g id="path-9"></g>
<g id="Rectangle-2-Copy" mask="url(#mask-10)" fill="#FFF9EB" fill-opacity="0.8" stroke="#BCA68E" stroke-width="4">
<rect id="path-9" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-3-Clipped" transform="translate(176.000000, 129.000000)">
<mask id="mask-12" fill="white">
<use xlink:href="#path-11"></use>
</mask>
<g id="path-11"></g>
<g id="Rectangle-2-Copy-3" mask="url(#mask-12)" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4">
<rect id="path-11" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-8-Clipped" transform="translate(196.000000, 69.000000)">
<mask id="mask-14" fill="white">
<use xlink:href="#path-13"></use>
</mask>
<g id="path-13"></g>
<g id="Rectangle-2-Copy-8" mask="url(#mask-14)" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4">
<rect id="path-13" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-4-Clipped" transform="translate(128.000000, 139.000000)">
<mask id="mask-16" fill="white">
<use xlink:href="#path-15"></use>
</mask>
<g id="path-15"></g>
<g id="Rectangle-2-Copy-4" mask="url(#mask-16)" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4">
<rect id="path-15" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-5-Clipped" transform="translate(76.000000, 131.000000)">
<mask id="mask-18" fill="white">
<use xlink:href="#path-17"></use>
</mask>
<g id="path-17"></g>
<g id="Rectangle-2-Copy-5" mask="url(#mask-18)" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4">
<rect id="path-17" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-6-Clipped" transform="translate(76.000000, 71.000000)">
<mask id="mask-20" fill="white">
<use xlink:href="#path-19"></use>
</mask>
<g id="path-19"></g>
<g id="Rectangle-2-Copy-6" mask="url(#mask-20)" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4">
<rect id="path-19" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-7-Clipped" transform="translate(27.000000, 57.000000)">
<mask id="mask-22" fill="white">
<use xlink:href="#path-21"></use>
</mask>
<g id="path-21"></g>
<g id="Rectangle-2-Copy-7" mask="url(#mask-22)" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4">
<rect id="path-21" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<path d="M148.5,40.5 L148.5,71.5" id="Line" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="148.5 71.5 151.5 60.7 145.5 60.7"></polygon>
<path d="M148.5,105.5 L148.5,129.5" id="Line-Copy" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-Copy-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="148.5 129.5 151.5 118.7 145.5 118.7"></polygon>
<path d="M319.5,77.5 L300.5,93.5" id="Line-2" stroke="#EE6B47" stroke-width="2" fill-opacity="0.8" fill="#EE6B47"></path>
<polygon id="Line-2-decoration-1" stroke="#EE6B47" stroke-width="2" fill-opacity="0.8" fill="#EE6B47" points="300.5 93.5 310.693448 88.8380675 306.828634 84.2486004"></polygon>
<path d="M127.5,47.5 L108.5,63.5" id="Line-2" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-2-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="108.5 63.5 118.693448 58.8380675 114.828634 54.2486004"></polygon>
<path d="M97.5,42.5 L74.5,51.5" id="Line-2-Copy-2" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-2-Copy-2-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="74.5 51.5 85.6506201 50.3582154 83.464224 44.7707587"></polygon>
<path d="M133.5,107.5 L114.5,123.5" id="Line-2-Copy" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-2-Copy-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="114.5 123.5 124.693448 118.838068 120.828634 114.2486"></polygon>
<path d="M313.070628,109.5 L352.425466,109.5" id="Line" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="352.425466 109.5 341.625466 106.5 341.625466 112.5"></polygon>
<path d="M170.5,107.5 L188.5,122.5" id="Line" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="188.5 122.5 182.123763 113.281345 178.282657 117.890672"></polygon>
<path d="M202.5,154.5 L220.5,169.5" id="Line-Copy-6" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-Copy-6-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="220.5 169.5 214.123763 160.281345 210.282657 164.890672"></polygon>
<path d="M170.5,87.5 L190.5,80.5" id="Line-Copy-5" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-Copy-5-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="190.5 80.5 179.315278 81.2362095 181.297381 86.8993597"></polygon>
<path d="M209.5,120.5 L223.5,98.5" id="Line-Copy-4" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-Copy-4-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="223.5 98.5 215.17076 106.000918 220.232729 109.222171"></polygon>
<path d="M46.5,82.5 L78.5,122.5" id="Line-Copy-3" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-Copy-3-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="78.5 122.5 74.0958999 112.192532 69.4106871 115.940702"></polygon>
<g id="Rectangle-2-Copy-9-Clipped" transform="translate(219.000000, 177.000000)">
<mask id="mask-24" fill="white">
<use xlink:href="#path-23"></use>
</mask>
<g id="path-25"></g>
<g id="Rectangle-2-Copy-9" mask="url(#mask-24)" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4">
<rect id="path-25" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<path d="M187.5,41.5 L208.5,62.5" id="Line-Copy-2" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-Copy-2-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="208.5 62.5 202.984567 52.7419264 198.741926 56.9845671"></polygon>
<path id="Line-Copy" d="M367.026599,89.8074683 L370.905564,94.6561738 L369.343826,95.9055639 L365.464862,91.0568584 L360.779649,94.8050287 L357.5,79.5 L371.711812,86.059298 L367.026599,89.8074683 Z" fill="#EE6B47" fill-rule="nonzero"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
1-js/04-object-basics/02-garbage-collection/garbage-collection-1@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 24 KiB

BIN
1-js/04-object-basics/02-garbage-collection/garbage-collection-2.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 11 KiB

178
1-js/04-object-basics/02-garbage-collection/garbage-collection-2.svg Normal file
View file

@ -0,0 +1,178 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="463px" height="204px" viewBox="0 0 463 204" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>garbage-collection-2.svg</title>
<desc>Created with sketchtool.</desc>
<defs>
<rect id="path-1" x="0" y="0" width="80" height="28"></rect>
<rect id="path-3" x="0" y="0" width="40" height="20"></rect>
<rect id="path-5" x="0" y="0" width="40" height="20"></rect>
<rect id="path-7" x="0" y="0" width="40" height="20"></rect>
<rect id="path-9" x="0" y="0" width="40" height="20"></rect>
<rect id="path-11" x="0" y="0" width="40" height="20"></rect>
<rect id="path-13" x="0" y="0" width="40" height="20"></rect>
<rect id="path-15" x="0" y="0" width="40" height="20"></rect>
<rect id="path-17" x="0" y="0" width="40" height="20"></rect>
<rect id="path-19" x="0" y="0" width="40" height="20"></rect>
<rect id="path-21" x="0" y="0" width="40" height="20"></rect>
<rect id="path-23" x="0" y="0" width="40" height="20"></rect>
</defs>
<g id="garbage-collection" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="garbage-collection-2.svg">
<g id="Rectangle-1-Clipped" transform="translate(106.000000, 8.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<g id="path-1"></g>
<g id="Rectangle-1" mask="url(#mask-2)" fill="#FFF9EB" stroke="#E8C48E" stroke-width="4">
<rect id="path-1" x="0" y="0" width="80" height="28"></rect>
</g>
</g>
<text id="&lt;global&gt;" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal">
<tspan x="115" y="26">&lt;global&gt;</tspan>
</text>
<g id="Rectangle-2-Clipped" transform="translate(360.000000, 99.000000)">
<mask id="mask-4" fill="white">
<use xlink:href="#path-3"></use>
</mask>
<g id="path-3"></g>
<g id="Rectangle-2" mask="url(#mask-4)" fill="#FFF9EB" fill-opacity="0.8" stroke="#BCA68E" stroke-width="4">
<rect id="path-3" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-2-Clipped" transform="translate(267.000000, 99.000000)">
<mask id="mask-6" fill="white">
<use xlink:href="#path-5"></use>
</mask>
<g id="path-5"></g>
<g id="Rectangle-2-Copy-2" mask="url(#mask-6)" fill="#FFF9EB" fill-opacity="0.8" stroke="#BCA68E" stroke-width="4">
<rect id="path-5" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-2-Clipped" transform="translate(126.000000, 79.000000)">
<mask id="mask-8" fill="white">
<use xlink:href="#path-7"></use>
</mask>
<g id="path-7"></g>
<g id="Rectangle-2-Copy-2" mask="url(#mask-8)" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4">
<rect id="path-7" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-Clipped" transform="translate(313.000000, 53.000000)">
<mask id="mask-10" fill="white">
<use xlink:href="#path-9"></use>
</mask>
<g id="path-9"></g>
<g id="Rectangle-2-Copy" mask="url(#mask-10)" fill="#FFF9EB" fill-opacity="0.8" stroke="#BCA68E" stroke-width="4">
<rect id="path-9" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-3-Clipped" transform="translate(176.000000, 129.000000)">
<mask id="mask-12" fill="white">
<use xlink:href="#path-11"></use>
</mask>
<g id="path-11"></g>
<g id="Rectangle-2-Copy-3" mask="url(#mask-12)" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4">
<rect id="path-11" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-8-Clipped" transform="translate(196.000000, 69.000000)">
<mask id="mask-14" fill="white">
<use xlink:href="#path-13"></use>
</mask>
<g id="path-13"></g>
<g id="Rectangle-2-Copy-8" mask="url(#mask-14)" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4">
<rect id="path-13" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-4-Clipped" transform="translate(128.000000, 139.000000)">
<mask id="mask-16" fill="white">
<use xlink:href="#path-15"></use>
</mask>
<g id="path-15"></g>
<g id="Rectangle-2-Copy-4" mask="url(#mask-16)" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4">
<rect id="path-15" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-5-Clipped" transform="translate(76.000000, 131.000000)">
<mask id="mask-18" fill="white">
<use xlink:href="#path-17"></use>
</mask>
<g id="path-17"></g>
<g id="Rectangle-2-Copy-5" mask="url(#mask-18)" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4">
<rect id="path-17" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-6-Clipped" transform="translate(76.000000, 71.000000)">
<mask id="mask-20" fill="white">
<use xlink:href="#path-19"></use>
</mask>
<g id="path-19"></g>
<g id="Rectangle-2-Copy-6" mask="url(#mask-20)" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4">
<rect id="path-19" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-7-Clipped" transform="translate(27.000000, 57.000000)">
<mask id="mask-22" fill="white">
<use xlink:href="#path-21"></use>
</mask>
<g id="path-21"></g>
<g id="Rectangle-2-Copy-7" mask="url(#mask-22)" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4">
<rect id="path-21" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<path d="M148.5,40.5 L148.5,71.5" id="Line" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="148.5 71.5 151.5 60.7 145.5 60.7"></polygon>
<path d="M148.5,105.5 L148.5,129.5" id="Line-Copy" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-Copy-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="148.5 129.5 151.5 118.7 145.5 118.7"></polygon>
<path d="M319.5,77.5 L300.5,93.5" id="Line-2" stroke="#EE6B47" stroke-width="2" fill-opacity="0.8" fill="#EE6B47"></path>
<polygon id="Line-2-decoration-1" stroke="#EE6B47" stroke-width="2" fill-opacity="0.8" fill="#EE6B47" points="300.5 93.5 310.693448 88.8380675 306.828634 84.2486004"></polygon>
<path d="M127.5,47.5 L108.5,63.5" id="Line-2" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-2-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="108.5 63.5 118.693448 58.8380675 114.828634 54.2486004"></polygon>
<path d="M97.5,42.5 L74.5,51.5" id="Line-2-Copy-2" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-2-Copy-2-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="74.5 51.5 85.6506201 50.3582154 83.464224 44.7707587"></polygon>
<path d="M133.5,107.5 L114.5,123.5" id="Line-2-Copy" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-2-Copy-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="114.5 123.5 124.693448 118.838068 120.828634 114.2486"></polygon>
<path d="M313.070628,109.5 L352.425466,109.5" id="Line" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="352.425466 109.5 341.625466 106.5 341.625466 112.5"></polygon>
<path d="M170.5,107.5 L188.5,122.5" id="Line" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="188.5 122.5 182.123763 113.281345 178.282657 117.890672"></polygon>
<path d="M202.5,154.5 L220.5,169.5" id="Line-Copy-6" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-Copy-6-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="220.5 169.5 214.123763 160.281345 210.282657 164.890672"></polygon>
<path d="M170.5,87.5 L190.5,80.5" id="Line-Copy-5" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-Copy-5-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="190.5 80.5 179.315278 81.2362095 181.297381 86.8993597"></polygon>
<path d="M209.5,120.5 L223.5,98.5" id="Line-Copy-4" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-Copy-4-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="223.5 98.5 215.17076 106.000918 220.232729 109.222171"></polygon>
<path d="M46.5,82.5 L78.5,122.5" id="Line-Copy-3" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-Copy-3-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="78.5 122.5 74.0958999 112.192532 69.4106871 115.940702"></polygon>
<g id="Group" transform="translate(83.500000, 78.500000) rotate(270.000000) translate(-83.500000, -78.500000) translate(79.000000, 74.000000)" fill="#417505">
<polyline id="Fill-72" points="5.5 5.51119582 4.63438472 4.50011212 5.5 3.48925265 5.5 1 2.50506442 4.4969728 2.5 4.4969728 2.50253221 4.50011212 2.5 4.50325143 2.50506442 4.50325143 5.5 8 5.5 5.51119582"></polyline>
<path d="M4.5,1.09755648 C2.62387766,1.09755648 1.09755648,2.62406215 1.09755648,4.5 C1.09755648,6.37612234 2.62387766,7.90244352 4.5,7.90244352 C6.37612234,7.90244352 7.90244352,6.37612234 7.90244352,4.5 C7.90244352,2.62406215 6.37612234,1.09755648 4.5,1.09755648 L4.5,1.09755648 L4.5,1.09755648 Z M4.5,9 C2.01855192,9 5.68434189e-14,6.98144808 5.68434189e-14,4.5 C5.68434189e-14,2.01873642 2.01855192,0 4.5,0 C6.98126358,0 9,2.01873642 9,4.5 C9,6.98144808 6.98126358,9 4.5,9 L4.5,9 L4.5,9 Z" id="Fill-73"></path>
</g>
<g id="Group-Copy" transform="translate(34.500000, 64.500000) rotate(270.000000) translate(-34.500000, -64.500000) translate(30.000000, 60.000000)" fill="#417505">
<polyline id="Fill-72" points="5.5 5.51119582 4.63438472 4.50011212 5.5 3.48925265 5.5 1 2.50506442 4.4969728 2.5 4.4969728 2.50253221 4.50011212 2.5 4.50325143 2.50506442 4.50325143 5.5 8 5.5 5.51119582"></polyline>
<path d="M4.5,1.09755648 C2.62387766,1.09755648 1.09755648,2.62406215 1.09755648,4.5 C1.09755648,6.37612234 2.62387766,7.90244352 4.5,7.90244352 C6.37612234,7.90244352 7.90244352,6.37612234 7.90244352,4.5 C7.90244352,2.62406215 6.37612234,1.09755648 4.5,1.09755648 L4.5,1.09755648 L4.5,1.09755648 Z M4.5,9 C2.01855192,9 0,6.98144808 0,4.5 C0,2.01873642 2.01855192,-8.8817842e-16 4.5,-8.8817842e-16 C6.98126358,-8.8817842e-16 9,2.01873642 9,4.5 C9,6.98144808 6.98126358,9 4.5,9 L4.5,9 L4.5,9 Z" id="Fill-73"></path>
</g>
<g id="Group-Copy-4" transform="translate(133.500000, 86.500000) rotate(270.000000) translate(-133.500000, -86.500000) translate(129.000000, 82.000000)" fill="#417505">
<polyline id="Fill-72" points="5.5 5.51119582 4.63438472 4.50011212 5.5 3.48925265 5.5 1 2.50506442 4.4969728 2.5 4.4969728 2.50253221 4.50011212 2.5 4.50325143 2.50506442 4.50325143 5.5 8 5.5 5.51119582"></polyline>
<path d="M4.5,1.09755648 C2.62387766,1.09755648 1.09755648,2.62406215 1.09755648,4.5 C1.09755648,6.37612234 2.62387766,7.90244352 4.5,7.90244352 C6.37612234,7.90244352 7.90244352,6.37612234 7.90244352,4.5 C7.90244352,2.62406215 6.37612234,1.09755648 4.5,1.09755648 L4.5,1.09755648 L4.5,1.09755648 Z M4.5,9 C2.01855192,9 5.68434189e-14,6.98144808 5.68434189e-14,4.5 C5.68434189e-14,2.01873642 2.01855192,0 4.5,0 C6.98126358,0 9,2.01873642 9,4.5 C9,6.98144808 6.98126358,9 4.5,9 L4.5,9 L4.5,9 Z" id="Fill-73"></path>
</g>
<g id="Rectangle-2-Copy-9-Clipped" transform="translate(219.000000, 177.000000)">
<mask id="mask-24" fill="white">
<use xlink:href="#path-23"></use>
</mask>
<g id="path-25"></g>
<g id="Rectangle-2-Copy-9" mask="url(#mask-24)" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4">
<rect id="path-25" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Group-Copy-6" transform="translate(203.500000, 76.500000) rotate(270.000000) translate(-203.500000, -76.500000) translate(199.000000, 72.000000)" fill="#417505">
<polyline id="Fill-72" points="5.5 5.51119582 4.63438472 4.50011212 5.5 3.48925265 5.5 1 2.50506442 4.4969728 2.5 4.4969728 2.50253221 4.50011212 2.5 4.50325143 2.50506442 4.50325143 5.5 8 5.5 5.51119582"></polyline>
<path d="M4.5,1.09755648 C2.62387766,1.09755648 1.09755648,2.62406215 1.09755648,4.5 C1.09755648,6.37612234 2.62387766,7.90244352 4.5,7.90244352 C6.37612234,7.90244352 7.90244352,6.37612234 7.90244352,4.5 C7.90244352,2.62406215 6.37612234,1.09755648 4.5,1.09755648 L4.5,1.09755648 L4.5,1.09755648 Z M4.5,9 C2.01855192,9 0,6.98144808 0,4.5 C0,2.01873642 2.01855192,0 4.5,0 C6.98126358,0 9,2.01873642 9,4.5 C9,6.98144808 6.98126358,9 4.5,9 L4.5,9 L4.5,9 Z" id="Fill-73"></path>
</g>
<path d="M187.5,41.5 L208.5,62.5" id="Line-Copy-2" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-Copy-2-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="208.5 62.5 202.984567 52.7419264 198.741926 56.9845671"></polygon>
<path id="Line-Copy" d="M367.026599,89.8074683 L370.905564,94.6561738 L369.343826,95.9055639 L365.464862,91.0568584 L360.779649,94.8050287 L357.5,79.5 L371.711812,86.059298 L367.026599,89.8074683 Z" fill="#EE6B47" fill-rule="nonzero"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
1-js/04-object-basics/02-garbage-collection/garbage-collection-2@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 26 KiB

BIN
1-js/04-object-basics/02-garbage-collection/garbage-collection-3.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 12 KiB

190
1-js/04-object-basics/02-garbage-collection/garbage-collection-3.svg Normal file
View file

@ -0,0 +1,190 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="463px" height="204px" viewBox="0 0 463 204" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>garbage-collection-3.svg</title>
<desc>Created with sketchtool.</desc>
<defs>
<rect id="path-1" x="0" y="0" width="80" height="28"></rect>
<rect id="path-3" x="0" y="0" width="40" height="20"></rect>
<rect id="path-5" x="0" y="0" width="40" height="20"></rect>
<rect id="path-7" x="0" y="0" width="40" height="20"></rect>
<rect id="path-9" x="0" y="0" width="40" height="20"></rect>
<rect id="path-11" x="0" y="0" width="40" height="20"></rect>
<rect id="path-13" x="0" y="0" width="40" height="20"></rect>
<rect id="path-15" x="0" y="0" width="40" height="20"></rect>
<rect id="path-17" x="0" y="0" width="40" height="20"></rect>
<rect id="path-19" x="0" y="0" width="40" height="20"></rect>
<rect id="path-21" x="0" y="0" width="40" height="20"></rect>
<rect id="path-23" x="0" y="0" width="40" height="20"></rect>
</defs>
<g id="garbage-collection" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="garbage-collection-3.svg">
<g id="Rectangle-1-Clipped" transform="translate(106.000000, 8.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<g id="path-1"></g>
<g id="Rectangle-1" mask="url(#mask-2)" fill="#FFF9EB" stroke="#E8C48E" stroke-width="4">
<rect id="path-1" x="0" y="0" width="80" height="28"></rect>
</g>
</g>
<text id="&lt;global&gt;" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal">
<tspan x="115" y="26">&lt;global&gt;</tspan>
</text>
<g id="Rectangle-2-Clipped" transform="translate(360.000000, 99.000000)">
<mask id="mask-4" fill="white">
<use xlink:href="#path-3"></use>
</mask>
<g id="path-3"></g>
<g id="Rectangle-2" mask="url(#mask-4)" fill="#FFF9EB" fill-opacity="0.8" stroke="#BCA68E" stroke-width="4">
<rect id="path-3" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-2-Clipped" transform="translate(267.000000, 99.000000)">
<mask id="mask-6" fill="white">
<use xlink:href="#path-5"></use>
</mask>
<g id="path-5"></g>
<g id="Rectangle-2-Copy-2" mask="url(#mask-6)" fill="#FFF9EB" fill-opacity="0.8" stroke="#BCA68E" stroke-width="4">
<rect id="path-5" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-2-Clipped" transform="translate(126.000000, 79.000000)">
<mask id="mask-8" fill="white">
<use xlink:href="#path-7"></use>
</mask>
<g id="path-7"></g>
<g id="Rectangle-2-Copy-2" mask="url(#mask-8)" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4">
<rect id="path-7" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-Clipped" transform="translate(313.000000, 53.000000)">
<mask id="mask-10" fill="white">
<use xlink:href="#path-9"></use>
</mask>
<g id="path-9"></g>
<g id="Rectangle-2-Copy" mask="url(#mask-10)" fill="#FFF9EB" fill-opacity="0.8" stroke="#BCA68E" stroke-width="4">
<rect id="path-9" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-3-Clipped" transform="translate(176.000000, 129.000000)">
<mask id="mask-12" fill="white">
<use xlink:href="#path-11"></use>
</mask>
<g id="path-11"></g>
<g id="Rectangle-2-Copy-3" mask="url(#mask-12)" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4">
<rect id="path-11" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-8-Clipped" transform="translate(196.000000, 69.000000)">
<mask id="mask-14" fill="white">
<use xlink:href="#path-13"></use>
</mask>
<g id="path-13"></g>
<g id="Rectangle-2-Copy-8" mask="url(#mask-14)" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4">
<rect id="path-13" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-4-Clipped" transform="translate(128.000000, 139.000000)">
<mask id="mask-16" fill="white">
<use xlink:href="#path-15"></use>
</mask>
<g id="path-15"></g>
<g id="Rectangle-2-Copy-4" mask="url(#mask-16)" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4">
<rect id="path-15" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-5-Clipped" transform="translate(76.000000, 131.000000)">
<mask id="mask-18" fill="white">
<use xlink:href="#path-17"></use>
</mask>
<g id="path-17"></g>
<g id="Rectangle-2-Copy-5" mask="url(#mask-18)" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4">
<rect id="path-17" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-6-Clipped" transform="translate(76.000000, 71.000000)">
<mask id="mask-20" fill="white">
<use xlink:href="#path-19"></use>
</mask>
<g id="path-19"></g>
<g id="Rectangle-2-Copy-6" mask="url(#mask-20)" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4">
<rect id="path-19" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-7-Clipped" transform="translate(27.000000, 57.000000)">
<mask id="mask-22" fill="white">
<use xlink:href="#path-21"></use>
</mask>
<g id="path-21"></g>
<g id="Rectangle-2-Copy-7" mask="url(#mask-22)" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4">
<rect id="path-21" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<path d="M148.5,40.5 L148.5,71.5" id="Line" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="148.5 71.5 151.5 60.7 145.5 60.7"></polygon>
<path d="M148.5,105.5 L148.5,129.5" id="Line-Copy" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-Copy-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="148.5 129.5 151.5 118.7 145.5 118.7"></polygon>
<path d="M319.5,77.5 L300.5,93.5" id="Line-2" stroke="#EE6B47" stroke-width="2" fill-opacity="0.8" fill="#EE6B47"></path>
<polygon id="Line-2-decoration-1" stroke="#EE6B47" stroke-width="2" fill-opacity="0.8" fill="#EE6B47" points="300.5 93.5 310.693448 88.8380675 306.828634 84.2486004"></polygon>
<path d="M127.5,47.5 L108.5,63.5" id="Line-2" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-2-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="108.5 63.5 118.693448 58.8380675 114.828634 54.2486004"></polygon>
<path d="M97.5,42.5 L74.5,51.5" id="Line-2-Copy-2" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-2-Copy-2-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="74.5 51.5 85.6506201 50.3582154 83.464224 44.7707587"></polygon>
<path d="M133.5,107.5 L114.5,123.5" id="Line-2-Copy" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-2-Copy-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="114.5 123.5 124.693448 118.838068 120.828634 114.2486"></polygon>
<path d="M313.070628,109.5 L352.425466,109.5" id="Line" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="352.425466 109.5 341.625466 106.5 341.625466 112.5"></polygon>
<path d="M170.5,107.5 L188.5,122.5" id="Line" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="188.5 122.5 182.123763 113.281345 178.282657 117.890672"></polygon>
<path d="M202.5,154.5 L220.5,169.5" id="Line-Copy-6" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-Copy-6-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="220.5 169.5 214.123763 160.281345 210.282657 164.890672"></polygon>
<path d="M170.5,87.5 L190.5,80.5" id="Line-Copy-5" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-Copy-5-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="190.5 80.5 179.315278 81.2362095 181.297381 86.8993597"></polygon>
<path d="M209.5,120.5 L223.5,98.5" id="Line-Copy-4" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-Copy-4-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="223.5 98.5 215.17076 106.000918 220.232729 109.222171"></polygon>
<path d="M46.5,82.5 L78.5,122.5" id="Line-Copy-3" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-Copy-3-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="78.5 122.5 74.0958999 112.192532 69.4106871 115.940702"></polygon>
<g id="Group" transform="translate(83.500000, 78.500000) rotate(270.000000) translate(-83.500000, -78.500000) translate(79.000000, 74.000000)" fill="#417505">
<polyline id="Fill-72" points="5.5 5.51119582 4.63438472 4.50011212 5.5 3.48925265 5.5 1 2.50506442 4.4969728 2.5 4.4969728 2.50253221 4.50011212 2.5 4.50325143 2.50506442 4.50325143 5.5 8 5.5 5.51119582"></polyline>
<path d="M4.5,1.09755648 C2.62387766,1.09755648 1.09755648,2.62406215 1.09755648,4.5 C1.09755648,6.37612234 2.62387766,7.90244352 4.5,7.90244352 C6.37612234,7.90244352 7.90244352,6.37612234 7.90244352,4.5 C7.90244352,2.62406215 6.37612234,1.09755648 4.5,1.09755648 L4.5,1.09755648 L4.5,1.09755648 Z M4.5,9 C2.01855192,9 5.68434189e-14,6.98144808 5.68434189e-14,4.5 C5.68434189e-14,2.01873642 2.01855192,0 4.5,0 C6.98126358,0 9,2.01873642 9,4.5 C9,6.98144808 6.98126358,9 4.5,9 L4.5,9 L4.5,9 Z" id="Fill-73"></path>
</g>
<g id="Group-Copy" transform="translate(34.500000, 64.500000) rotate(270.000000) translate(-34.500000, -64.500000) translate(30.000000, 60.000000)" fill="#417505">
<polyline id="Fill-72" points="5.5 5.51119582 4.63438472 4.50011212 5.5 3.48925265 5.5 1 2.50506442 4.4969728 2.5 4.4969728 2.50253221 4.50011212 2.5 4.50325143 2.50506442 4.50325143 5.5 8 5.5 5.51119582"></polyline>
<path d="M4.5,1.09755648 C2.62387766,1.09755648 1.09755648,2.62406215 1.09755648,4.5 C1.09755648,6.37612234 2.62387766,7.90244352 4.5,7.90244352 C6.37612234,7.90244352 7.90244352,6.37612234 7.90244352,4.5 C7.90244352,2.62406215 6.37612234,1.09755648 4.5,1.09755648 L4.5,1.09755648 L4.5,1.09755648 Z M4.5,9 C2.01855192,9 0,6.98144808 0,4.5 C0,2.01873642 2.01855192,-8.8817842e-16 4.5,-8.8817842e-16 C6.98126358,-8.8817842e-16 9,2.01873642 9,4.5 C9,6.98144808 6.98126358,9 4.5,9 L4.5,9 L4.5,9 Z" id="Fill-73"></path>
</g>
<g id="Group-Copy-2" transform="translate(83.500000, 139.500000) rotate(270.000000) translate(-83.500000, -139.500000) translate(79.000000, 135.000000)" fill="#417505">
<polyline id="Fill-72" points="5.5 5.51119582 4.63438472 4.50011212 5.5 3.48925265 5.5 1 2.50506442 4.4969728 2.5 4.4969728 2.50253221 4.50011212 2.5 4.50325143 2.50506442 4.50325143 5.5 8 5.5 5.51119582"></polyline>
<path d="M4.5,1.09755648 C2.62387766,1.09755648 1.09755648,2.62406215 1.09755648,4.5 C1.09755648,6.37612234 2.62387766,7.90244352 4.5,7.90244352 C6.37612234,7.90244352 7.90244352,6.37612234 7.90244352,4.5 C7.90244352,2.62406215 6.37612234,1.09755648 4.5,1.09755648 L4.5,1.09755648 L4.5,1.09755648 Z M4.5,9 C2.01855192,9 0,6.98144808 0,4.5 C0,2.01873642 2.01855192,0 4.5,0 C6.98126358,0 9,2.01873642 9,4.5 C9,6.98144808 6.98126358,9 4.5,9 L4.5,9 L4.5,9 Z" id="Fill-73"></path>
</g>
<g id="Group-Copy-3" transform="translate(135.500000, 146.500000) rotate(270.000000) translate(-135.500000, -146.500000) translate(131.000000, 142.000000)" fill="#417505">
<polyline id="Fill-72" points="5.5 5.51119582 4.63438472 4.50011212 5.5 3.48925265 5.5 1 2.50506442 4.4969728 2.5 4.4969728 2.50253221 4.50011212 2.5 4.50325143 2.50506442 4.50325143 5.5 8 5.5 5.51119582"></polyline>
<path d="M4.5,1.09755648 C2.62387766,1.09755648 1.09755648,2.62406215 1.09755648,4.5 C1.09755648,6.37612234 2.62387766,7.90244352 4.5,7.90244352 C6.37612234,7.90244352 7.90244352,6.37612234 7.90244352,4.5 C7.90244352,2.62406215 6.37612234,1.09755648 4.5,1.09755648 L4.5,1.09755648 L4.5,1.09755648 Z M4.5,9 C2.01855192,9 0,6.98144808 0,4.5 C0,2.01873642 2.01855192,0 4.5,0 C6.98126358,0 9,2.01873642 9,4.5 C9,6.98144808 6.98126358,9 4.5,9 L4.5,9 L4.5,9 Z" id="Fill-73"></path>
</g>
<g id="Group-Copy-4" transform="translate(133.500000, 86.500000) rotate(270.000000) translate(-133.500000, -86.500000) translate(129.000000, 82.000000)" fill="#417505">
<polyline id="Fill-72" points="5.5 5.51119582 4.63438472 4.50011212 5.5 3.48925265 5.5 1 2.50506442 4.4969728 2.5 4.4969728 2.50253221 4.50011212 2.5 4.50325143 2.50506442 4.50325143 5.5 8 5.5 5.51119582"></polyline>
<path d="M4.5,1.09755648 C2.62387766,1.09755648 1.09755648,2.62406215 1.09755648,4.5 C1.09755648,6.37612234 2.62387766,7.90244352 4.5,7.90244352 C6.37612234,7.90244352 7.90244352,6.37612234 7.90244352,4.5 C7.90244352,2.62406215 6.37612234,1.09755648 4.5,1.09755648 L4.5,1.09755648 L4.5,1.09755648 Z M4.5,9 C2.01855192,9 5.68434189e-14,6.98144808 5.68434189e-14,4.5 C5.68434189e-14,2.01873642 2.01855192,0 4.5,0 C6.98126358,0 9,2.01873642 9,4.5 C9,6.98144808 6.98126358,9 4.5,9 L4.5,9 L4.5,9 Z" id="Fill-73"></path>
</g>
<g id="Group-Copy-5" transform="translate(183.500000, 136.500000) rotate(270.000000) translate(-183.500000, -136.500000) translate(179.000000, 132.000000)" fill="#417505">
<polyline id="Fill-72" points="5.5 5.51119582 4.63438472 4.50011212 5.5 3.48925265 5.5 1 2.50506442 4.4969728 2.5 4.4969728 2.50253221 4.50011212 2.5 4.50325143 2.50506442 4.50325143 5.5 8 5.5 5.51119582"></polyline>
<path d="M4.5,1.09755648 C2.62387766,1.09755648 1.09755648,2.62406215 1.09755648,4.5 C1.09755648,6.37612234 2.62387766,7.90244352 4.5,7.90244352 C6.37612234,7.90244352 7.90244352,6.37612234 7.90244352,4.5 C7.90244352,2.62406215 6.37612234,1.09755648 4.5,1.09755648 L4.5,1.09755648 L4.5,1.09755648 Z M4.5,9 C2.01855192,9 -1.26217745e-29,6.98144808 -1.26217745e-29,4.5 C-1.26217745e-29,2.01873642 2.01855192,0 4.5,0 C6.98126358,0 9,2.01873642 9,4.5 C9,6.98144808 6.98126358,9 4.5,9 L4.5,9 L4.5,9 Z" id="Fill-73"></path>
</g>
<g id="Rectangle-2-Copy-9-Clipped" transform="translate(219.000000, 177.000000)">
<mask id="mask-24" fill="white">
<use xlink:href="#path-23"></use>
</mask>
<g id="path-25"></g>
<g id="Rectangle-2-Copy-9" mask="url(#mask-24)" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4">
<rect id="path-25" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Group-Copy-6" transform="translate(203.500000, 76.500000) rotate(270.000000) translate(-203.500000, -76.500000) translate(199.000000, 72.000000)" fill="#417505">
<polyline id="Fill-72" points="5.5 5.51119582 4.63438472 4.50011212 5.5 3.48925265 5.5 1 2.50506442 4.4969728 2.5 4.4969728 2.50253221 4.50011212 2.5 4.50325143 2.50506442 4.50325143 5.5 8 5.5 5.51119582"></polyline>
<path d="M4.5,1.09755648 C2.62387766,1.09755648 1.09755648,2.62406215 1.09755648,4.5 C1.09755648,6.37612234 2.62387766,7.90244352 4.5,7.90244352 C6.37612234,7.90244352 7.90244352,6.37612234 7.90244352,4.5 C7.90244352,2.62406215 6.37612234,1.09755648 4.5,1.09755648 L4.5,1.09755648 L4.5,1.09755648 Z M4.5,9 C2.01855192,9 0,6.98144808 0,4.5 C0,2.01873642 2.01855192,0 4.5,0 C6.98126358,0 9,2.01873642 9,4.5 C9,6.98144808 6.98126358,9 4.5,9 L4.5,9 L4.5,9 Z" id="Fill-73"></path>
</g>
<path d="M187.5,41.5 L208.5,62.5" id="Line-Copy-2" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-Copy-2-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="208.5 62.5 202.984567 52.7419264 198.741926 56.9845671"></polygon>
<path id="Line-Copy" d="M367.026599,89.8074683 L370.905564,94.6561738 L369.343826,95.9055639 L365.464862,91.0568584 L360.779649,94.8050287 L357.5,79.5 L371.711812,86.059298 L367.026599,89.8074683 Z" fill="#EE6B47" fill-rule="nonzero"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
1-js/04-object-basics/02-garbage-collection/garbage-collection-3@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 28 KiB

BIN
1-js/04-object-basics/02-garbage-collection/garbage-collection-4.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 12 KiB

194
1-js/04-object-basics/02-garbage-collection/garbage-collection-4.svg Normal file
View file

@ -0,0 +1,194 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="463px" height="204px" viewBox="0 0 463 204" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>garbage-collection-4.svg</title>
<desc>Created with sketchtool.</desc>
<defs>
<rect id="path-1" x="0" y="0" width="80" height="28"></rect>
<rect id="path-3" x="0" y="0" width="40" height="20"></rect>
<rect id="path-5" x="0" y="0" width="40" height="20"></rect>
<rect id="path-7" x="0" y="0" width="40" height="20"></rect>
<rect id="path-9" x="0" y="0" width="40" height="20"></rect>
<rect id="path-11" x="0" y="0" width="40" height="20"></rect>
<rect id="path-13" x="0" y="0" width="40" height="20"></rect>
<rect id="path-15" x="0" y="0" width="40" height="20"></rect>
<rect id="path-17" x="0" y="0" width="40" height="20"></rect>
<rect id="path-19" x="0" y="0" width="40" height="20"></rect>
<rect id="path-21" x="0" y="0" width="40" height="20"></rect>
<rect id="path-23" x="0" y="0" width="40" height="20"></rect>
</defs>
<g id="garbage-collection" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="garbage-collection-4.svg">
<g id="Rectangle-1-Clipped" transform="translate(106.000000, 8.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<g id="path-1"></g>
<g id="Rectangle-1" mask="url(#mask-2)" fill="#FFF9EB" stroke="#E8C48E" stroke-width="4">
<rect id="path-1" x="0" y="0" width="80" height="28"></rect>
</g>
</g>
<text id="&lt;global&gt;" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal">
<tspan x="115" y="26">&lt;global&gt;</tspan>
</text>
<g id="Rectangle-2-Clipped" transform="translate(360.000000, 99.000000)">
<mask id="mask-4" fill="white">
<use xlink:href="#path-3"></use>
</mask>
<g id="path-3"></g>
<g id="Rectangle-2" mask="url(#mask-4)" fill="#FFF9EB" fill-opacity="0.8" stroke="#BCA68E" stroke-width="4">
<rect id="path-3" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-2-Clipped" transform="translate(267.000000, 99.000000)">
<mask id="mask-6" fill="white">
<use xlink:href="#path-5"></use>
</mask>
<g id="path-5"></g>
<g id="Rectangle-2-Copy-2" mask="url(#mask-6)" fill="#FFF9EB" fill-opacity="0.8" stroke="#BCA68E" stroke-width="4">
<rect id="path-5" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-2-Clipped" transform="translate(126.000000, 79.000000)">
<mask id="mask-8" fill="white">
<use xlink:href="#path-7"></use>
</mask>
<g id="path-7"></g>
<g id="Rectangle-2-Copy-2" mask="url(#mask-8)" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4">
<rect id="path-7" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-Clipped" transform="translate(313.000000, 53.000000)">
<mask id="mask-10" fill="white">
<use xlink:href="#path-9"></use>
</mask>
<g id="path-9"></g>
<g id="Rectangle-2-Copy" mask="url(#mask-10)" fill="#FFF9EB" fill-opacity="0.8" stroke="#BCA68E" stroke-width="4">
<rect id="path-9" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-3-Clipped" transform="translate(176.000000, 129.000000)">
<mask id="mask-12" fill="white">
<use xlink:href="#path-11"></use>
</mask>
<g id="path-11"></g>
<g id="Rectangle-2-Copy-3" mask="url(#mask-12)" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4">
<rect id="path-11" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-8-Clipped" transform="translate(196.000000, 69.000000)">
<mask id="mask-14" fill="white">
<use xlink:href="#path-13"></use>
</mask>
<g id="path-13"></g>
<g id="Rectangle-2-Copy-8" mask="url(#mask-14)" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4">
<rect id="path-13" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-4-Clipped" transform="translate(128.000000, 139.000000)">
<mask id="mask-16" fill="white">
<use xlink:href="#path-15"></use>
</mask>
<g id="path-15"></g>
<g id="Rectangle-2-Copy-4" mask="url(#mask-16)" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4">
<rect id="path-15" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-5-Clipped" transform="translate(76.000000, 131.000000)">
<mask id="mask-18" fill="white">
<use xlink:href="#path-17"></use>
</mask>
<g id="path-17"></g>
<g id="Rectangle-2-Copy-5" mask="url(#mask-18)" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4">
<rect id="path-17" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-6-Clipped" transform="translate(76.000000, 71.000000)">
<mask id="mask-20" fill="white">
<use xlink:href="#path-19"></use>
</mask>
<g id="path-19"></g>
<g id="Rectangle-2-Copy-6" mask="url(#mask-20)" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4">
<rect id="path-19" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-7-Clipped" transform="translate(27.000000, 57.000000)">
<mask id="mask-22" fill="white">
<use xlink:href="#path-21"></use>
</mask>
<g id="path-21"></g>
<g id="Rectangle-2-Copy-7" mask="url(#mask-22)" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4">
<rect id="path-21" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<path d="M148.5,40.5 L148.5,71.5" id="Line" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="148.5 71.5 151.5 60.7 145.5 60.7"></polygon>
<path d="M148.5,105.5 L148.5,129.5" id="Line-Copy" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-Copy-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="148.5 129.5 151.5 118.7 145.5 118.7"></polygon>
<path d="M319.5,77.5 L300.5,93.5" id="Line-2" stroke="#EE6B47" stroke-width="2" fill-opacity="0.8" fill="#EE6B47"></path>
<polygon id="Line-2-decoration-1" stroke="#EE6B47" stroke-width="2" fill-opacity="0.8" fill="#EE6B47" points="300.5 93.5 310.693448 88.8380675 306.828634 84.2486004"></polygon>
<path d="M127.5,47.5 L108.5,63.5" id="Line-2" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-2-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="108.5 63.5 118.693448 58.8380675 114.828634 54.2486004"></polygon>
<path d="M97.5,42.5 L74.5,51.5" id="Line-2-Copy-2" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-2-Copy-2-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="74.5 51.5 85.6506201 50.3582154 83.464224 44.7707587"></polygon>
<path d="M133.5,107.5 L114.5,123.5" id="Line-2-Copy" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-2-Copy-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="114.5 123.5 124.693448 118.838068 120.828634 114.2486"></polygon>
<path d="M313.070628,109.5 L352.425466,109.5" id="Line" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="352.425466 109.5 341.625466 106.5 341.625466 112.5"></polygon>
<path d="M170.5,107.5 L188.5,122.5" id="Line" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="188.5 122.5 182.123763 113.281345 178.282657 117.890672"></polygon>
<path d="M202.5,154.5 L220.5,169.5" id="Line-Copy-6" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-Copy-6-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="220.5 169.5 214.123763 160.281345 210.282657 164.890672"></polygon>
<path d="M170.5,87.5 L190.5,80.5" id="Line-Copy-5" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-Copy-5-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="190.5 80.5 179.315278 81.2362095 181.297381 86.8993597"></polygon>
<path d="M209.5,120.5 L223.5,98.5" id="Line-Copy-4" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-Copy-4-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="223.5 98.5 215.17076 106.000918 220.232729 109.222171"></polygon>
<path d="M46.5,82.5 L78.5,122.5" id="Line-Copy-3" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-Copy-3-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="78.5 122.5 74.0958999 112.192532 69.4106871 115.940702"></polygon>
<g id="Group" transform="translate(83.500000, 78.500000) rotate(270.000000) translate(-83.500000, -78.500000) translate(79.000000, 74.000000)" fill="#417505">
<polyline id="Fill-72" points="5.5 5.51119582 4.63438472 4.50011212 5.5 3.48925265 5.5 1 2.50506442 4.4969728 2.5 4.4969728 2.50253221 4.50011212 2.5 4.50325143 2.50506442 4.50325143 5.5 8 5.5 5.51119582"></polyline>
<path d="M4.5,1.09755648 C2.62387766,1.09755648 1.09755648,2.62406215 1.09755648,4.5 C1.09755648,6.37612234 2.62387766,7.90244352 4.5,7.90244352 C6.37612234,7.90244352 7.90244352,6.37612234 7.90244352,4.5 C7.90244352,2.62406215 6.37612234,1.09755648 4.5,1.09755648 L4.5,1.09755648 L4.5,1.09755648 Z M4.5,9 C2.01855192,9 5.68434189e-14,6.98144808 5.68434189e-14,4.5 C5.68434189e-14,2.01873642 2.01855192,0 4.5,0 C6.98126358,0 9,2.01873642 9,4.5 C9,6.98144808 6.98126358,9 4.5,9 L4.5,9 L4.5,9 Z" id="Fill-73"></path>
</g>
<g id="Group-Copy" transform="translate(34.500000, 64.500000) rotate(270.000000) translate(-34.500000, -64.500000) translate(30.000000, 60.000000)" fill="#417505">
<polyline id="Fill-72" points="5.5 5.51119582 4.63438472 4.50011212 5.5 3.48925265 5.5 1 2.50506442 4.4969728 2.5 4.4969728 2.50253221 4.50011212 2.5 4.50325143 2.50506442 4.50325143 5.5 8 5.5 5.51119582"></polyline>
<path d="M4.5,1.09755648 C2.62387766,1.09755648 1.09755648,2.62406215 1.09755648,4.5 C1.09755648,6.37612234 2.62387766,7.90244352 4.5,7.90244352 C6.37612234,7.90244352 7.90244352,6.37612234 7.90244352,4.5 C7.90244352,2.62406215 6.37612234,1.09755648 4.5,1.09755648 L4.5,1.09755648 L4.5,1.09755648 Z M4.5,9 C2.01855192,9 0,6.98144808 0,4.5 C0,2.01873642 2.01855192,-8.8817842e-16 4.5,-8.8817842e-16 C6.98126358,-8.8817842e-16 9,2.01873642 9,4.5 C9,6.98144808 6.98126358,9 4.5,9 L4.5,9 L4.5,9 Z" id="Fill-73"></path>
</g>
<g id="Group-Copy-2" transform="translate(83.500000, 139.500000) rotate(270.000000) translate(-83.500000, -139.500000) translate(79.000000, 135.000000)" fill="#417505">
<polyline id="Fill-72" points="5.5 5.51119582 4.63438472 4.50011212 5.5 3.48925265 5.5 1 2.50506442 4.4969728 2.5 4.4969728 2.50253221 4.50011212 2.5 4.50325143 2.50506442 4.50325143 5.5 8 5.5 5.51119582"></polyline>
<path d="M4.5,1.09755648 C2.62387766,1.09755648 1.09755648,2.62406215 1.09755648,4.5 C1.09755648,6.37612234 2.62387766,7.90244352 4.5,7.90244352 C6.37612234,7.90244352 7.90244352,6.37612234 7.90244352,4.5 C7.90244352,2.62406215 6.37612234,1.09755648 4.5,1.09755648 L4.5,1.09755648 L4.5,1.09755648 Z M4.5,9 C2.01855192,9 0,6.98144808 0,4.5 C0,2.01873642 2.01855192,0 4.5,0 C6.98126358,0 9,2.01873642 9,4.5 C9,6.98144808 6.98126358,9 4.5,9 L4.5,9 L4.5,9 Z" id="Fill-73"></path>
</g>
<g id="Group-Copy-3" transform="translate(135.500000, 146.500000) rotate(270.000000) translate(-135.500000, -146.500000) translate(131.000000, 142.000000)" fill="#417505">
<polyline id="Fill-72" points="5.5 5.51119582 4.63438472 4.50011212 5.5 3.48925265 5.5 1 2.50506442 4.4969728 2.5 4.4969728 2.50253221 4.50011212 2.5 4.50325143 2.50506442 4.50325143 5.5 8 5.5 5.51119582"></polyline>
<path d="M4.5,1.09755648 C2.62387766,1.09755648 1.09755648,2.62406215 1.09755648,4.5 C1.09755648,6.37612234 2.62387766,7.90244352 4.5,7.90244352 C6.37612234,7.90244352 7.90244352,6.37612234 7.90244352,4.5 C7.90244352,2.62406215 6.37612234,1.09755648 4.5,1.09755648 L4.5,1.09755648 L4.5,1.09755648 Z M4.5,9 C2.01855192,9 0,6.98144808 0,4.5 C0,2.01873642 2.01855192,0 4.5,0 C6.98126358,0 9,2.01873642 9,4.5 C9,6.98144808 6.98126358,9 4.5,9 L4.5,9 L4.5,9 Z" id="Fill-73"></path>
</g>
<g id="Group-Copy-4" transform="translate(133.500000, 86.500000) rotate(270.000000) translate(-133.500000, -86.500000) translate(129.000000, 82.000000)" fill="#417505">
<polyline id="Fill-72" points="5.5 5.51119582 4.63438472 4.50011212 5.5 3.48925265 5.5 1 2.50506442 4.4969728 2.5 4.4969728 2.50253221 4.50011212 2.5 4.50325143 2.50506442 4.50325143 5.5 8 5.5 5.51119582"></polyline>
<path d="M4.5,1.09755648 C2.62387766,1.09755648 1.09755648,2.62406215 1.09755648,4.5 C1.09755648,6.37612234 2.62387766,7.90244352 4.5,7.90244352 C6.37612234,7.90244352 7.90244352,6.37612234 7.90244352,4.5 C7.90244352,2.62406215 6.37612234,1.09755648 4.5,1.09755648 L4.5,1.09755648 L4.5,1.09755648 Z M4.5,9 C2.01855192,9 5.68434189e-14,6.98144808 5.68434189e-14,4.5 C5.68434189e-14,2.01873642 2.01855192,0 4.5,0 C6.98126358,0 9,2.01873642 9,4.5 C9,6.98144808 6.98126358,9 4.5,9 L4.5,9 L4.5,9 Z" id="Fill-73"></path>
</g>
<g id="Group-Copy-5" transform="translate(183.500000, 136.500000) rotate(270.000000) translate(-183.500000, -136.500000) translate(179.000000, 132.000000)" fill="#417505">
<polyline id="Fill-72" points="5.5 5.51119582 4.63438472 4.50011212 5.5 3.48925265 5.5 1 2.50506442 4.4969728 2.5 4.4969728 2.50253221 4.50011212 2.5 4.50325143 2.50506442 4.50325143 5.5 8 5.5 5.51119582"></polyline>
<path d="M4.5,1.09755648 C2.62387766,1.09755648 1.09755648,2.62406215 1.09755648,4.5 C1.09755648,6.37612234 2.62387766,7.90244352 4.5,7.90244352 C6.37612234,7.90244352 7.90244352,6.37612234 7.90244352,4.5 C7.90244352,2.62406215 6.37612234,1.09755648 4.5,1.09755648 L4.5,1.09755648 L4.5,1.09755648 Z M4.5,9 C2.01855192,9 -1.26217745e-29,6.98144808 -1.26217745e-29,4.5 C-1.26217745e-29,2.01873642 2.01855192,0 4.5,0 C6.98126358,0 9,2.01873642 9,4.5 C9,6.98144808 6.98126358,9 4.5,9 L4.5,9 L4.5,9 Z" id="Fill-73"></path>
</g>
<g id="Rectangle-2-Copy-9-Clipped" transform="translate(219.000000, 177.000000)">
<mask id="mask-24" fill="white">
<use xlink:href="#path-23"></use>
</mask>
<g id="path-25"></g>
<g id="Rectangle-2-Copy-9" mask="url(#mask-24)" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4">
<rect id="path-25" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Group-Copy-7" transform="translate(226.500000, 184.500000) rotate(270.000000) translate(-226.500000, -184.500000) translate(222.000000, 180.000000)" fill="#417505">
<polyline id="Fill-72" points="5.5 5.51119582 4.63438472 4.50011212 5.5 3.48925265 5.5 1 2.50506442 4.4969728 2.5 4.4969728 2.50253221 4.50011212 2.5 4.50325143 2.50506442 4.50325143 5.5 8 5.5 5.51119582"></polyline>
<path d="M4.5,1.09755648 C2.62387766,1.09755648 1.09755648,2.62406215 1.09755648,4.5 C1.09755648,6.37612234 2.62387766,7.90244352 4.5,7.90244352 C6.37612234,7.90244352 7.90244352,6.37612234 7.90244352,4.5 C7.90244352,2.62406215 6.37612234,1.09755648 4.5,1.09755648 L4.5,1.09755648 L4.5,1.09755648 Z M4.5,9 C2.01855192,9 -1.26217745e-29,6.98144808 -1.26217745e-29,4.5 C-1.26217745e-29,2.01873642 2.01855192,0 4.5,0 C6.98126358,0 9,2.01873642 9,4.5 C9,6.98144808 6.98126358,9 4.5,9 L4.5,9 L4.5,9 Z" id="Fill-73"></path>
</g>
<g id="Group-Copy-6" transform="translate(203.500000, 76.500000) rotate(270.000000) translate(-203.500000, -76.500000) translate(199.000000, 72.000000)" fill="#417505">
<polyline id="Fill-72" points="5.5 5.51119582 4.63438472 4.50011212 5.5 3.48925265 5.5 1 2.50506442 4.4969728 2.5 4.4969728 2.50253221 4.50011212 2.5 4.50325143 2.50506442 4.50325143 5.5 8 5.5 5.51119582"></polyline>
<path d="M4.5,1.09755648 C2.62387766,1.09755648 1.09755648,2.62406215 1.09755648,4.5 C1.09755648,6.37612234 2.62387766,7.90244352 4.5,7.90244352 C6.37612234,7.90244352 7.90244352,6.37612234 7.90244352,4.5 C7.90244352,2.62406215 6.37612234,1.09755648 4.5,1.09755648 L4.5,1.09755648 L4.5,1.09755648 Z M4.5,9 C2.01855192,9 0,6.98144808 0,4.5 C0,2.01873642 2.01855192,0 4.5,0 C6.98126358,0 9,2.01873642 9,4.5 C9,6.98144808 6.98126358,9 4.5,9 L4.5,9 L4.5,9 Z" id="Fill-73"></path>
</g>
<path d="M187.5,41.5 L208.5,62.5" id="Line-Copy-2" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-Copy-2-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="208.5 62.5 202.984567 52.7419264 198.741926 56.9845671"></polygon>
<path id="Line-Copy" d="M367.026599,89.8074683 L370.905564,94.6561738 L369.343826,95.9055639 L365.464862,91.0568584 L360.779649,94.8050287 L357.5,79.5 L371.711812,86.059298 L367.026599,89.8074683 Z" fill="#EE6B47" fill-rule="nonzero"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
1-js/04-object-basics/02-garbage-collection/garbage-collection-4@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 29 KiB

BIN
1-js/04-object-basics/02-garbage-collection/garbage-collection-5.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 15 KiB

212
1-js/04-object-basics/02-garbage-collection/garbage-collection-5.svg Normal file
View file

@ -0,0 +1,212 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="463px" height="204px" viewBox="0 0 463 204" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>garbage-collection-5.svg</title>
<desc>Created with sketchtool.</desc>
<defs>
<rect id="path-1" x="0" y="0" width="146" height="88"></rect>
<rect id="path-3" x="0" y="0" width="80" height="28"></rect>
<rect id="path-5" x="0" y="0" width="40" height="20"></rect>
<rect id="path-7" x="0" y="0" width="40" height="20"></rect>
<rect id="path-9" x="0" y="0" width="40" height="20"></rect>
<rect id="path-11" x="0" y="0" width="40" height="20"></rect>
<rect id="path-13" x="0" y="0" width="40" height="20"></rect>
<rect id="path-15" x="0" y="0" width="40" height="20"></rect>
<rect id="path-17" x="0" y="0" width="40" height="20"></rect>
<rect id="path-19" x="0" y="0" width="40" height="20"></rect>
<rect id="path-21" x="0" y="0" width="40" height="20"></rect>
<rect id="path-23" x="0" y="0" width="40" height="20"></rect>
<rect id="path-25" x="0" y="0" width="40" height="20"></rect>
</defs>
<g id="garbage-collection" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="garbage-collection-5.svg">
<g id="Rectangle-5-Clipped" transform="translate(260.000000, 46.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<g id="path-23"></g>
<g id="Rectangle-5" mask="url(#mask-2)" stroke="#D0011B" stroke-width="4">
<rect id="path-23" x="0" y="0" width="146" height="88"></rect>
</g>
</g>
<g id="Rectangle-1-Clipped" transform="translate(106.000000, 8.000000)">
<mask id="mask-4" fill="white">
<use xlink:href="#path-3"></use>
</mask>
<g id="path-1"></g>
<g id="Rectangle-1" mask="url(#mask-4)" fill="#FFF9EB" stroke="#E8C48E" stroke-width="4">
<rect id="path-1" x="0" y="0" width="80" height="28"></rect>
</g>
</g>
<text id="&lt;global&gt;" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal">
<tspan x="115" y="26">&lt;global&gt;</tspan>
</text>
<g id="Rectangle-2-Clipped" transform="translate(360.000000, 99.000000)">
<mask id="mask-6" fill="white">
<use xlink:href="#path-5"></use>
</mask>
<g id="path-3"></g>
<g id="Rectangle-2" mask="url(#mask-6)" fill="#FFF9EB" fill-opacity="0.8" stroke="#BCA68E" stroke-width="4">
<rect id="path-3" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-2-Clipped" transform="translate(267.000000, 99.000000)">
<mask id="mask-8" fill="white">
<use xlink:href="#path-7"></use>
</mask>
<g id="path-5"></g>
<g id="Rectangle-2-Copy-2" mask="url(#mask-8)" fill="#FFF9EB" fill-opacity="0.8" stroke="#BCA68E" stroke-width="4">
<rect id="path-5" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-2-Clipped" transform="translate(126.000000, 79.000000)">
<mask id="mask-10" fill="white">
<use xlink:href="#path-9"></use>
</mask>
<g id="path-7"></g>
<g id="Rectangle-2-Copy-2" mask="url(#mask-10)" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4">
<rect id="path-7" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-Clipped" transform="translate(313.000000, 53.000000)">
<mask id="mask-12" fill="white">
<use xlink:href="#path-11"></use>
</mask>
<g id="path-9"></g>
<g id="Rectangle-2-Copy" mask="url(#mask-12)" fill="#FFF9EB" fill-opacity="0.8" stroke="#BCA68E" stroke-width="4">
<rect id="path-9" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-3-Clipped" transform="translate(176.000000, 129.000000)">
<mask id="mask-14" fill="white">
<use xlink:href="#path-13"></use>
</mask>
<g id="path-11"></g>
<g id="Rectangle-2-Copy-3" mask="url(#mask-14)" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4">
<rect id="path-11" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-8-Clipped" transform="translate(196.000000, 69.000000)">
<mask id="mask-16" fill="white">
<use xlink:href="#path-15"></use>
</mask>
<g id="path-13"></g>
<g id="Rectangle-2-Copy-8" mask="url(#mask-16)" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4">
<rect id="path-13" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-4-Clipped" transform="translate(128.000000, 139.000000)">
<mask id="mask-18" fill="white">
<use xlink:href="#path-17"></use>
</mask>
<g id="path-15"></g>
<g id="Rectangle-2-Copy-4" mask="url(#mask-18)" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4">
<rect id="path-15" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-5-Clipped" transform="translate(76.000000, 131.000000)">
<mask id="mask-20" fill="white">
<use xlink:href="#path-19"></use>
</mask>
<g id="path-17"></g>
<g id="Rectangle-2-Copy-5" mask="url(#mask-20)" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4">
<rect id="path-17" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-6-Clipped" transform="translate(76.000000, 71.000000)">
<mask id="mask-22" fill="white">
<use xlink:href="#path-21"></use>
</mask>
<g id="path-19"></g>
<g id="Rectangle-2-Copy-6" mask="url(#mask-22)" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4">
<rect id="path-19" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Rectangle-2-Copy-7-Clipped" transform="translate(27.000000, 57.000000)">
<mask id="mask-24" fill="white">
<use xlink:href="#path-23"></use>
</mask>
<g id="path-21"></g>
<g id="Rectangle-2-Copy-7" mask="url(#mask-24)" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4">
<rect id="path-21" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<path d="M148.5,40.5 L148.5,71.5" id="Line" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="148.5 71.5 151.5 60.7 145.5 60.7"></polygon>
<path d="M148.5,105.5 L148.5,129.5" id="Line-Copy" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-Copy-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="148.5 129.5 151.5 118.7 145.5 118.7"></polygon>
<path d="M319.5,77.5 L300.5,93.5" id="Line-2" stroke="#EE6B47" stroke-width="2" fill-opacity="0.8" fill="#EE6B47"></path>
<polygon id="Line-2-decoration-1" stroke="#EE6B47" stroke-width="2" fill-opacity="0.8" fill="#EE6B47" points="300.5 93.5 310.693448 88.8380675 306.828634 84.2486004"></polygon>
<path d="M127.5,47.5 L108.5,63.5" id="Line-2" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-2-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="108.5 63.5 118.693448 58.8380675 114.828634 54.2486004"></polygon>
<path d="M97.5,42.5 L74.5,51.5" id="Line-2-Copy-2" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-2-Copy-2-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="74.5 51.5 85.6506201 50.3582154 83.464224 44.7707587"></polygon>
<path d="M133.5,107.5 L114.5,123.5" id="Line-2-Copy" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-2-Copy-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="114.5 123.5 124.693448 118.838068 120.828634 114.2486"></polygon>
<path d="M313.070628,109.5 L352.425466,109.5" id="Line" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="352.425466 109.5 341.625466 106.5 341.625466 112.5"></polygon>
<path d="M170.5,107.5 L188.5,122.5" id="Line" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="188.5 122.5 182.123763 113.281345 178.282657 117.890672"></polygon>
<path d="M202.5,154.5 L220.5,169.5" id="Line-Copy-6" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-Copy-6-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="220.5 169.5 214.123763 160.281345 210.282657 164.890672"></polygon>
<path d="M170.5,87.5 L190.5,80.5" id="Line-Copy-5" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-Copy-5-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="190.5 80.5 179.315278 81.2362095 181.297381 86.8993597"></polygon>
<path d="M209.5,120.5 L223.5,98.5" id="Line-Copy-4" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-Copy-4-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="223.5 98.5 215.17076 106.000918 220.232729 109.222171"></polygon>
<path d="M46.5,82.5 L78.5,122.5" id="Line-Copy-3" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-Copy-3-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="78.5 122.5 74.0958999 112.192532 69.4106871 115.940702"></polygon>
<g id="noun_48910_cc" transform="translate(261.000000, 5.000000)">
<path d="M17.5030263,1.75054945 L12.4969737,1.75054945 C12.3098684,1.75054945 12.1571053,1.90364835 12.1571053,2.09156044 L12.1571053,3.21745055 L17.8432895,3.21745055 L17.8432895,2.09156044 C17.8432895,1.90364835 17.6905263,1.75054945 17.5030263,1.75054945 L17.5030263,1.75054945 L17.5030263,1.75054945 Z" id="Shape"></path>
<path d="M28.3638158,3.21745055 L19.5896053,3.21745055 L19.5896053,2.09156044 C19.5896053,0.937978022 18.6540789,0 17.5030263,0 L12.4969737,0 C11.3463158,0 10.4103947,0.937978022 10.4103947,2.09156044 L10.4103947,3.21745055 L1.63657895,3.21745055 C0.9375,3.21745055 0.370657895,3.78514286 0.370657895,4.48575824 L0.370657895,4.57516484 C0.370657895,5.27578022 0.9375,5.84347253 1.63657895,5.84347253 L28.3638158,5.84347253 C29.0628947,5.84347253 29.6297368,5.27578022 29.6297368,4.57516484 L29.6297368,4.48575824 C29.6297368,3.78514286 29.0625,3.21745055 28.3638158,3.21745055 L28.3638158,3.21745055 L28.3638158,3.21745055 Z M17.8432895,3.21745055 L12.1571053,3.21745055 L12.1571053,2.09156044 C12.1571053,1.90364835 12.3098684,1.75054945 12.4969737,1.75054945 L17.5034211,1.75054945 C17.6909211,1.75054945 17.8432895,1.90364835 17.8432895,2.09156044 L17.8432895,3.21745055 L17.8432895,3.21745055 L17.8432895,3.21745055 Z" id="Shape" fill="#D0021B"></path>
<path d="M26.0542105,6.28101099 L3.7275,6.28101099 C2.42960526,6.28101099 1.37723684,6.0567033 1.37723684,7.35784615 L3.13973684,33.195956 C3.13973684,34.4959121 4.1925,35.6047912 5.49039474,35.6047912 L24.2921053,35.6047912 C25.59,35.6047912 26.6423684,34.4959121 26.6423684,33.195956 L28.4048684,7.35784615 C28.4044737,6.0567033 27.3521053,6.28101099 26.0542105,6.28101099 L26.0542105,6.28101099 L26.0542105,6.28101099 Z M9.63710526,32.1927033 C9.26013158,32.2053626 8.94552632,31.932 8.93289474,31.5807033 L8.23894737,11.664 C8.22671053,11.3127033 8.52236842,11.0171868 8.89815789,11.0041319 C9.27513158,10.9910769 9.58973684,11.2652308 9.60236842,11.6165275 L10.2963158,31.5332308 C10.3085526,31.8841319 10.0132895,32.180044 9.63710526,32.1927033 L9.63710526,32.1927033 L9.63710526,32.1927033 Z M15.6809211,31.5632967 C15.6809211,31.9145934 15.3753947,32.1998242 14.9988158,32.1998242 C14.6222368,32.1998242 14.3167105,31.9141978 14.3167105,31.5632967 L14.3167105,11.6343297 C14.3167105,11.2826374 14.6222368,10.9978022 14.9988158,10.9978022 C15.3753947,10.9978022 15.6809211,11.2826374 15.6809211,11.6343297 L15.6809211,31.5632967 L15.6809211,31.5632967 L15.6809211,31.5632967 Z M21.0651316,31.5810989 C21.0528947,31.9323956 20.7378947,32.2057582 20.3609211,32.1930989 C19.9847368,32.1804396 19.6894737,31.8845275 19.7017105,31.5332308 L20.3956579,11.6165275 C20.4078947,11.2652308 20.7225,10.9910769 21.0994737,11.0041319 C21.4756579,11.0175824 21.7713158,11.3127033 21.7590789,11.664 L21.0651316,31.5810989 L21.0651316,31.5810989 L21.0651316,31.5810989 Z" id="Shape" fill="#D0021B"></path>
</g>
<text id="unreachables" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal">
<tspan x="296" y="29">unreachables</tspan>
</text>
<g id="Group" transform="translate(83.500000, 78.500000) rotate(270.000000) translate(-83.500000, -78.500000) translate(79.000000, 74.000000)" fill="#417505">
<polyline id="Fill-72" points="5.5 5.51119582 4.63438472 4.50011212 5.5 3.48925265 5.5 1 2.50506442 4.4969728 2.5 4.4969728 2.50253221 4.50011212 2.5 4.50325143 2.50506442 4.50325143 5.5 8 5.5 5.51119582"></polyline>
<path d="M4.5,1.09755648 C2.62387766,1.09755648 1.09755648,2.62406215 1.09755648,4.5 C1.09755648,6.37612234 2.62387766,7.90244352 4.5,7.90244352 C6.37612234,7.90244352 7.90244352,6.37612234 7.90244352,4.5 C7.90244352,2.62406215 6.37612234,1.09755648 4.5,1.09755648 L4.5,1.09755648 L4.5,1.09755648 Z M4.5,9 C2.01855192,9 5.68434189e-14,6.98144808 5.68434189e-14,4.5 C5.68434189e-14,2.01873642 2.01855192,0 4.5,0 C6.98126358,0 9,2.01873642 9,4.5 C9,6.98144808 6.98126358,9 4.5,9 L4.5,9 L4.5,9 Z" id="Fill-73"></path>
</g>
<g id="Group-Copy" transform="translate(34.500000, 64.500000) rotate(270.000000) translate(-34.500000, -64.500000) translate(30.000000, 60.000000)" fill="#417505">
<polyline id="Fill-72" points="5.5 5.51119582 4.63438472 4.50011212 5.5 3.48925265 5.5 1 2.50506442 4.4969728 2.5 4.4969728 2.50253221 4.50011212 2.5 4.50325143 2.50506442 4.50325143 5.5 8 5.5 5.51119582"></polyline>
<path d="M4.5,1.09755648 C2.62387766,1.09755648 1.09755648,2.62406215 1.09755648,4.5 C1.09755648,6.37612234 2.62387766,7.90244352 4.5,7.90244352 C6.37612234,7.90244352 7.90244352,6.37612234 7.90244352,4.5 C7.90244352,2.62406215 6.37612234,1.09755648 4.5,1.09755648 L4.5,1.09755648 L4.5,1.09755648 Z M4.5,9 C2.01855192,9 0,6.98144808 0,4.5 C0,2.01873642 2.01855192,-8.8817842e-16 4.5,-8.8817842e-16 C6.98126358,-8.8817842e-16 9,2.01873642 9,4.5 C9,6.98144808 6.98126358,9 4.5,9 L4.5,9 L4.5,9 Z" id="Fill-73"></path>
</g>
<g id="Group-Copy-2" transform="translate(83.500000, 139.500000) rotate(270.000000) translate(-83.500000, -139.500000) translate(79.000000, 135.000000)" fill="#417505">
<polyline id="Fill-72" points="5.5 5.51119582 4.63438472 4.50011212 5.5 3.48925265 5.5 1 2.50506442 4.4969728 2.5 4.4969728 2.50253221 4.50011212 2.5 4.50325143 2.50506442 4.50325143 5.5 8 5.5 5.51119582"></polyline>
<path d="M4.5,1.09755648 C2.62387766,1.09755648 1.09755648,2.62406215 1.09755648,4.5 C1.09755648,6.37612234 2.62387766,7.90244352 4.5,7.90244352 C6.37612234,7.90244352 7.90244352,6.37612234 7.90244352,4.5 C7.90244352,2.62406215 6.37612234,1.09755648 4.5,1.09755648 L4.5,1.09755648 L4.5,1.09755648 Z M4.5,9 C2.01855192,9 0,6.98144808 0,4.5 C0,2.01873642 2.01855192,0 4.5,0 C6.98126358,0 9,2.01873642 9,4.5 C9,6.98144808 6.98126358,9 4.5,9 L4.5,9 L4.5,9 Z" id="Fill-73"></path>
</g>
<g id="Group-Copy-3" transform="translate(135.500000, 146.500000) rotate(270.000000) translate(-135.500000, -146.500000) translate(131.000000, 142.000000)" fill="#417505">
<polyline id="Fill-72" points="5.5 5.51119582 4.63438472 4.50011212 5.5 3.48925265 5.5 1 2.50506442 4.4969728 2.5 4.4969728 2.50253221 4.50011212 2.5 4.50325143 2.50506442 4.50325143 5.5 8 5.5 5.51119582"></polyline>
<path d="M4.5,1.09755648 C2.62387766,1.09755648 1.09755648,2.62406215 1.09755648,4.5 C1.09755648,6.37612234 2.62387766,7.90244352 4.5,7.90244352 C6.37612234,7.90244352 7.90244352,6.37612234 7.90244352,4.5 C7.90244352,2.62406215 6.37612234,1.09755648 4.5,1.09755648 L4.5,1.09755648 L4.5,1.09755648 Z M4.5,9 C2.01855192,9 0,6.98144808 0,4.5 C0,2.01873642 2.01855192,0 4.5,0 C6.98126358,0 9,2.01873642 9,4.5 C9,6.98144808 6.98126358,9 4.5,9 L4.5,9 L4.5,9 Z" id="Fill-73"></path>
</g>
<g id="Group-Copy-4" transform="translate(133.500000, 86.500000) rotate(270.000000) translate(-133.500000, -86.500000) translate(129.000000, 82.000000)" fill="#417505">
<polyline id="Fill-72" points="5.5 5.51119582 4.63438472 4.50011212 5.5 3.48925265 5.5 1 2.50506442 4.4969728 2.5 4.4969728 2.50253221 4.50011212 2.5 4.50325143 2.50506442 4.50325143 5.5 8 5.5 5.51119582"></polyline>
<path d="M4.5,1.09755648 C2.62387766,1.09755648 1.09755648,2.62406215 1.09755648,4.5 C1.09755648,6.37612234 2.62387766,7.90244352 4.5,7.90244352 C6.37612234,7.90244352 7.90244352,6.37612234 7.90244352,4.5 C7.90244352,2.62406215 6.37612234,1.09755648 4.5,1.09755648 L4.5,1.09755648 L4.5,1.09755648 Z M4.5,9 C2.01855192,9 5.68434189e-14,6.98144808 5.68434189e-14,4.5 C5.68434189e-14,2.01873642 2.01855192,0 4.5,0 C6.98126358,0 9,2.01873642 9,4.5 C9,6.98144808 6.98126358,9 4.5,9 L4.5,9 L4.5,9 Z" id="Fill-73"></path>
</g>
<g id="Group-Copy-5" transform="translate(183.500000, 136.500000) rotate(270.000000) translate(-183.500000, -136.500000) translate(179.000000, 132.000000)" fill="#417505">
<polyline id="Fill-72" points="5.5 5.51119582 4.63438472 4.50011212 5.5 3.48925265 5.5 1 2.50506442 4.4969728 2.5 4.4969728 2.50253221 4.50011212 2.5 4.50325143 2.50506442 4.50325143 5.5 8 5.5 5.51119582"></polyline>
<path d="M4.5,1.09755648 C2.62387766,1.09755648 1.09755648,2.62406215 1.09755648,4.5 C1.09755648,6.37612234 2.62387766,7.90244352 4.5,7.90244352 C6.37612234,7.90244352 7.90244352,6.37612234 7.90244352,4.5 C7.90244352,2.62406215 6.37612234,1.09755648 4.5,1.09755648 L4.5,1.09755648 L4.5,1.09755648 Z M4.5,9 C2.01855192,9 -1.26217745e-29,6.98144808 -1.26217745e-29,4.5 C-1.26217745e-29,2.01873642 2.01855192,0 4.5,0 C6.98126358,0 9,2.01873642 9,4.5 C9,6.98144808 6.98126358,9 4.5,9 L4.5,9 L4.5,9 Z" id="Fill-73"></path>
</g>
<g id="Rectangle-2-Copy-9-Clipped" transform="translate(219.000000, 177.000000)">
<mask id="mask-26" fill="white">
<use xlink:href="#path-25"></use>
</mask>
<g id="path-25"></g>
<g id="Rectangle-2-Copy-9" mask="url(#mask-26)" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4">
<rect id="path-25" x="0" y="0" width="40" height="20"></rect>
</g>
</g>
<g id="Group-Copy-7" transform="translate(226.500000, 184.500000) rotate(270.000000) translate(-226.500000, -184.500000) translate(222.000000, 180.000000)" fill="#417505">
<polyline id="Fill-72" points="5.5 5.51119582 4.63438472 4.50011212 5.5 3.48925265 5.5 1 2.50506442 4.4969728 2.5 4.4969728 2.50253221 4.50011212 2.5 4.50325143 2.50506442 4.50325143 5.5 8 5.5 5.51119582"></polyline>
<path d="M4.5,1.09755648 C2.62387766,1.09755648 1.09755648,2.62406215 1.09755648,4.5 C1.09755648,6.37612234 2.62387766,7.90244352 4.5,7.90244352 C6.37612234,7.90244352 7.90244352,6.37612234 7.90244352,4.5 C7.90244352,2.62406215 6.37612234,1.09755648 4.5,1.09755648 L4.5,1.09755648 L4.5,1.09755648 Z M4.5,9 C2.01855192,9 -1.26217745e-29,6.98144808 -1.26217745e-29,4.5 C-1.26217745e-29,2.01873642 2.01855192,0 4.5,0 C6.98126358,0 9,2.01873642 9,4.5 C9,6.98144808 6.98126358,9 4.5,9 L4.5,9 L4.5,9 Z" id="Fill-73"></path>
</g>
<g id="Group-Copy-6" transform="translate(203.500000, 76.500000) rotate(270.000000) translate(-203.500000, -76.500000) translate(199.000000, 72.000000)" fill="#417505">
<polyline id="Fill-72" points="5.5 5.51119582 4.63438472 4.50011212 5.5 3.48925265 5.5 1 2.50506442 4.4969728 2.5 4.4969728 2.50253221 4.50011212 2.5 4.50325143 2.50506442 4.50325143 5.5 8 5.5 5.51119582"></polyline>
<path d="M4.5,1.09755648 C2.62387766,1.09755648 1.09755648,2.62406215 1.09755648,4.5 C1.09755648,6.37612234 2.62387766,7.90244352 4.5,7.90244352 C6.37612234,7.90244352 7.90244352,6.37612234 7.90244352,4.5 C7.90244352,2.62406215 6.37612234,1.09755648 4.5,1.09755648 L4.5,1.09755648 L4.5,1.09755648 Z M4.5,9 C2.01855192,9 0,6.98144808 0,4.5 C0,2.01873642 2.01855192,0 4.5,0 C6.98126358,0 9,2.01873642 9,4.5 C9,6.98144808 6.98126358,9 4.5,9 L4.5,9 L4.5,9 Z" id="Fill-73"></path>
</g>
<path d="M187.5,41.5 L208.5,62.5" id="Line-Copy-2" stroke="#EE6B47" stroke-width="2" fill="#EE6B47"></path>
<polygon id="Line-Copy-2-decoration-1" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" points="208.5 62.5 202.984567 52.7419264 198.741926 56.9845671"></polygon>
<path id="Line" d="M367.026599,89.8074683 L370.905564,94.6561738 L369.343826,95.9055639 L365.464862,91.0568584 L360.779649,94.8050287 L357.5,79.5 L371.711812,86.059298 L367.026599,89.8074683 Z" fill="#EE6B47" fill-rule="nonzero"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 22 KiB

BIN
1-js/04-object-basics/02-garbage-collection/garbage-collection-5@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 35 KiB

BIN
1-js/04-object-basics/02-garbage-collection/memory-user-john-admin.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 5.6 KiB

29
1-js/04-object-basics/02-garbage-collection/memory-user-john-admin.svg Normal file
View file

@ -0,0 +1,29 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="144px" height="159px" viewBox="0 0 144 159" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>memory-user-john-admin.svg</title>
<desc>Created with sketchtool.</desc>
<g id="garbage-collection" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="memory-user-john-admin.svg">
<text id="user" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="12" y="67">user</tspan>
</text>
<rect id="Rectangle-4" stroke="#BCA68E" stroke-width="2" fill="#FFF9EB" x="16" y="93" width="118" height="48"></rect>
<text id="name:-&quot;John&quot;" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal" fill="#8A704D">
<tspan x="30" y="130">name: "John"</tspan>
</text>
<text id="Object" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="44" y="110">Object</tspan>
</text>
<path id="Line" d="M53.5,65.5 L53.5,47.5 L55.5,47.5 L55.5,65.5 L61.5,65.5 L54.5,79.5 L47.5,65.5 L53.5,65.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="admin" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="92" y="67">admin</tspan>
</text>
<path id="Line-Copy" d="M81.5,65.5 L81.5,47.5 L83.5,47.5 L83.5,65.5 L89.5,65.5 L82.5,79.5 L75.5,65.5 L81.5,65.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="27" y="16" width="93" height="26"></rect>
<text id="&lt;global&gt;" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="43" y="33">&lt;global&gt;</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
1-js/04-object-basics/02-garbage-collection/memory-user-john-admin@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 13 KiB

BIN
1-js/04-object-basics/02-garbage-collection/memory-user-john-lost.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 6.5 KiB

30
1-js/04-object-basics/02-garbage-collection/memory-user-john-lost.svg Normal file
View file

@ -0,0 +1,30 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="225px" height="159px" viewBox="0 0 225 159" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>memory-user-john-lost.svg</title>
<desc>Created with sketchtool.</desc>
<g id="garbage-collection" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="memory-user-john-lost.svg">
<rect id="Rectangle-4" stroke="#BCA68E" stroke-width="2" fill="#FFF9EB" x="61" y="89" width="118" height="48"></rect>
<text id="name:-&quot;John&quot;" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal" fill="#8A704D">
<tspan x="83" y="126">name: "John"</tspan>
</text>
<text id="Object-3" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="97" y="106">Object</tspan>
</text>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="65" y="4" width="104" height="42"></rect>
<text id="user:-null" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="79" y="40">user: null</tspan>
</text>
<text id="&lt;global&gt;" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="86" y="23">&lt;global&gt;</tspan>
</text>
<rect id="Rectangle-5" stroke="#D0021B" stroke-width="2" x="47" y="69" width="154" height="86"></rect>
<g id="noun_48910_cc" transform="translate(8.000000, 65.000000)">
<path d="M17.5030263,1.75054945 L12.4969737,1.75054945 C12.3098684,1.75054945 12.1571053,1.90364835 12.1571053,2.09156044 L12.1571053,3.21745055 L17.8432895,3.21745055 L17.8432895,2.09156044 C17.8432895,1.90364835 17.6905263,1.75054945 17.5030263,1.75054945 L17.5030263,1.75054945 Z" id="Shape"></path>
<path d="M28.3638158,3.21745055 L19.5896053,3.21745055 L19.5896053,2.09156044 C19.5896053,0.937978022 18.6540789,4.4408921e-16 17.5030263,4.4408921e-16 L12.4969737,4.4408921e-16 C11.3463158,4.4408921e-16 10.4103947,0.937978022 10.4103947,2.09156044 L10.4103947,3.21745055 L1.63657895,3.21745055 C0.9375,3.21745055 0.370657895,3.78514286 0.370657895,4.48575824 L0.370657895,4.57516484 C0.370657895,5.27578022 0.9375,5.84347253 1.63657895,5.84347253 L28.3638158,5.84347253 C29.0628947,5.84347253 29.6297368,5.27578022 29.6297368,4.57516484 L29.6297368,4.48575824 C29.6297368,3.78514286 29.0625,3.21745055 28.3638158,3.21745055 L28.3638158,3.21745055 Z M17.8432895,3.21745055 L12.1571053,3.21745055 L12.1571053,2.09156044 C12.1571053,1.90364835 12.3098684,1.75054945 12.4969737,1.75054945 L17.5034211,1.75054945 C17.6909211,1.75054945 17.8432895,1.90364835 17.8432895,2.09156044 L17.8432895,3.21745055 L17.8432895,3.21745055 Z" id="Shape" fill="#D0021B"></path>
<path d="M26.0542105,6.28101099 L3.7275,6.28101099 C2.42960526,6.28101099 1.37723684,6.0567033 1.37723684,7.35784615 L3.13973684,33.195956 C3.13973684,34.4959121 4.1925,35.6047912 5.49039474,35.6047912 L24.2921053,35.6047912 C25.59,35.6047912 26.6423684,34.4959121 26.6423684,33.195956 L28.4048684,7.35784615 C28.4044737,6.0567033 27.3521053,6.28101099 26.0542105,6.28101099 L26.0542105,6.28101099 Z M9.63710526,32.1927033 C9.26013158,32.2053626 8.94552632,31.932 8.93289474,31.5807033 L8.23894737,11.664 C8.22671053,11.3127033 8.52236842,11.0171868 8.89815789,11.0041319 C9.27513158,10.9910769 9.58973684,11.2652308 9.60236842,11.6165275 L10.2963158,31.5332308 C10.3085526,31.8841319 10.0132895,32.180044 9.63710526,32.1927033 L9.63710526,32.1927033 Z M15.6809211,31.5632967 C15.6809211,31.9145934 15.3753947,32.1998242 14.9988158,32.1998242 C14.6222368,32.1998242 14.3167105,31.9141978 14.3167105,31.5632967 L14.3167105,11.6343297 C14.3167105,11.2826374 14.6222368,10.9978022 14.9988158,10.9978022 C15.3753947,10.9978022 15.6809211,11.2826374 15.6809211,11.6343297 L15.6809211,31.5632967 L15.6809211,31.5632967 Z M21.0651316,31.5810989 C21.0528947,31.9323956 20.7378947,32.2057582 20.3609211,32.1930989 C19.9847368,32.1804396 19.6894737,31.8845275 19.7017105,31.5332308 L20.3956579,11.6165275 C20.4078947,11.2652308 20.7225,10.9910769 21.0994737,11.0041319 C21.4756579,11.0175824 21.7713158,11.3127033 21.7590789,11.664 L21.0651316,31.5810989 L21.0651316,31.5810989 Z" id="Shape" fill="#D0021B"></path>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 4.5 KiB

BIN
1-js/04-object-basics/02-garbage-collection/memory-user-john-lost@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 16 KiB

BIN
1-js/04-object-basics/02-garbage-collection/memory-user-john.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 4.9 KiB

25
1-js/04-object-basics/02-garbage-collection/memory-user-john.svg Normal file
View file

@ -0,0 +1,25 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="144px" height="150px" viewBox="0 0 144 150" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>memory-user-john.svg</title>
<desc>Created with sketchtool.</desc>
<g id="garbage-collection" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="memory-user-john.svg">
<text id="user" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="31" y="69">user</tspan>
</text>
<rect id="Rectangle-4" stroke="#BCA68E" stroke-width="2" fill="#FFF9EB" x="16" y="95" width="118" height="48"></rect>
<text id="name:-&quot;John&quot;" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal" fill="#8A704D">
<tspan x="32" y="132">name: "John"</tspan>
</text>
<text id="Object-3" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="46" y="112">Object</tspan>
</text>
<path id="Line" d="M73.5,67.5 L73.5,49.5 L75.5,49.5 L75.5,67.5 L81.5,67.5 L74.5,81.5 L67.5,67.5 L73.5,67.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="27" y="12" width="93" height="26"></rect>
<text id="&lt;global&gt;" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="43" y="29">&lt;global&gt;</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
1-js/04-object-basics/02-garbage-collection/memory-user-john@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 11 KiB