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

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