refactor objects, add optional chaining
This commit is contained in:
Ilya Kantor
parent
09a964e969
commit
b057341f6c
35 changed files with 579 additions and 435 deletions
212
1-js/04-object-basics/03-garbage-collection/article.md
Normal file
212
1-js/04-object-basics/03-garbage-collection/article.md
Normal file
|
|
@ -0,0 +1,212 @@
|
|||
# Garbage collection
|
||||
|
||||
Memory management in JavaScript is performed automatically and invisibly to us. We create primitives, objects, functions... All that takes memory.
|
||||
|
||||
What happens when something is not needed any more? How does the JavaScript engine discover it and clean it up?
|
||||
|
||||
## Reachability
|
||||
|
||||
The main concept of memory management in JavaScript is *reachability*.
|
||||
|
||||
Simply put, "reachable" values are those that are accessible or usable somehow. They are guaranteed to be stored in memory.
|
||||
|
||||
1. There's a base set of inherently reachable values, that cannot be deleted for obvious reasons.
|
||||
|
||||
For instance:
|
||||
|
||||
- Local variables and parameters of the current function.
|
||||
- Variables and parameters for other functions on the current chain of nested calls.
|
||||
- Global variables.
|
||||
- (there are some other, internal ones as well)
|
||||
|
||||
These values are called *roots*.
|
||||
|
||||
2. Any other value is considered reachable if it's reachable from a root by a reference or by a chain of references.
|
||||
|
||||
For instance, if there's an object in a local variable, and that object has a property referencing another object, that object is considered reachable. And those that it references are also reachable. Detailed examples to follow.
|
||||
|
||||
There's a background process in the JavaScript engine that is called [garbage collector](https://en.wikipedia.org/wiki/Garbage_collection_(computer_science)). It monitors all objects and removes those that have become unreachable.
|
||||
|
||||
## A simple example
|
||||
|
||||
Here's the simplest example:
|
||||
|
||||
```js
|
||||
// user has a reference to the object
|
||||
let user = {
|
||||
name: "John"
|
||||
};
|
||||
```
|
||||
|
||||
|
||||
|
||||
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.
|
||||
|
||||
If the value of `user` is overwritten, the reference is lost:
|
||||
|
||||
```js
|
||||
user = null;
|
||||
```
|
||||
|
||||
|
||||
|
||||
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.
|
||||
|
||||
## Two references
|
||||
|
||||
Now let's imagine we copied the reference from `user` to `admin`:
|
||||
|
||||
```js
|
||||
// user has a reference to the object
|
||||
let user = {
|
||||
name: "John"
|
||||
};
|
||||
|
||||
*!*
|
||||
let admin = user;
|
||||
*/!*
|
||||
```
|
||||
|
||||
|
||||
|
||||
Now if we do the same:
|
||||
```js
|
||||
user = null;
|
||||
```
|
||||
|
||||
...Then the object is still reachable via `admin` global variable, so it's in memory. If we overwrite `admin` too, then it can be removed.
|
||||
|
||||
## Interlinked objects
|
||||
|
||||
Now a more complex example. The family:
|
||||
|
||||
```js
|
||||
function marry(man, woman) {
|
||||
woman.husband = man;
|
||||
man.wife = woman;
|
||||
|
||||
return {
|
||||
father: man,
|
||||
mother: woman
|
||||
}
|
||||
}
|
||||
|
||||
let family = marry({
|
||||
name: "John"
|
||||
}, {
|
||||
name: "Ann"
|
||||
});
|
||||
```
|
||||
|
||||
Function `marry` "marries" two objects by giving them references to each other and returns a new object that contains them both.
|
||||
|
||||
The resulting memory structure:
|
||||
|
||||
|
||||
|
||||
As of now, all objects are reachable.
|
||||
|
||||
Now let's remove two references:
|
||||
|
||||
```js
|
||||
delete family.father;
|
||||
delete family.mother.husband;
|
||||
```
|
||||
|
||||
|
||||
|
||||
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:
|
||||
|
||||
|
||||
|
||||
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:
|
||||
|
||||
|
||||
|
||||
## Unreachable island
|
||||
|
||||
It is possible that the whole island of interlinked objects becomes unreachable and is removed from the memory.
|
||||
|
||||
The source object is the same as above. Then:
|
||||
|
||||
```js
|
||||
family = null;
|
||||
```
|
||||
|
||||
The in-memory picture becomes:
|
||||
|
||||
|
||||
|
||||
This example demonstrates how important the concept of reachability is.
|
||||
|
||||
It's obvious that John and Ann are still linked, both have incoming references. But that's not enough.
|
||||
|
||||
The former `"family"` object has been unlinked from the root, there's no reference to it any more, so the whole island becomes unreachable and will be removed.
|
||||
|
||||
## Internal algorithms
|
||||
|
||||
The basic garbage collection algorithm is called "mark-and-sweep".
|
||||
|
||||
The following "garbage collection" steps are regularly performed:
|
||||
|
||||
- The garbage collector takes roots and "marks" (remembers) them.
|
||||
- Then it visits and "marks" all references from them.
|
||||
- Then it visits marked objects and marks *their* references. All visited objects are remembered, so as not to visit the same object twice in the future.
|
||||
- ...And so on until every reachable (from the roots) references are visited.
|
||||
- All objects except marked ones are removed.
|
||||
|
||||
For instance, let our object structure look like this:
|
||||
|
||||
|
||||
|
||||
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:
|
||||
|
||||
|
||||
|
||||
Then their references are marked:
|
||||
|
||||
|
||||
|
||||
...And their references, while possible:
|
||||
|
||||
|
||||
|
||||
Now the objects that could not be visited in the process are considered unreachable and will be removed:
|
||||
|
||||
|
||||
|
||||
We can also imagine the process as spilling a huge bucket of paint from the roots, that flows through all references and marks all reachable objects. The unmarked ones are then removed.
|
||||
|
||||
That's the concept of how garbage collection works. JavaScript engines apply many optimizations to make it run faster and not affect the execution.
|
||||
|
||||
Some of the optimizations:
|
||||
|
||||
- **Generational collection** -- objects are split into two sets: "new ones" and "old ones". Many objects appear, do their job and die fast, they can be cleaned up aggressively. Those that survive for long enough, become "old" and are examined less often.
|
||||
- **Incremental collection** -- if there are many objects, and we try to walk and mark the whole object set at once, it may take some time and introduce visible delays in the execution. So the engine tries to split the garbage collection into pieces. Then the pieces are executed one by one, separately. That requires some extra bookkeeping between them to track changes, but we have many tiny delays instead of a big one.
|
||||
- **Idle-time collection** -- the garbage collector tries to run only while the CPU is idle, to reduce the possible effect on the execution.
|
||||
|
||||
There exist other optimizations and flavours of garbage collection algorithms. As much as I'd like to describe them here, I have to hold off, because different engines implement different tweaks and techniques. And, what's even more important, things change as engines develop, so studying deeper "in advance", without a real need is probably not worth that. Unless, of course, it is a matter of pure interest, then there will be some links for you below.
|
||||
|
||||
## Summary
|
||||
|
||||
The main things to know:
|
||||
|
||||
- Garbage collection is performed automatically. We cannot force or prevent it.
|
||||
- Objects are retained in memory while they are reachable.
|
||||
- Being referenced is not the same as being reachable (from a root): a pack of interlinked objects can become unreachable as a whole.
|
||||
|
||||
Modern engines implement advanced algorithms of garbage collection.
|
||||
|
||||
A general book "The Garbage Collection Handbook: The Art of Automatic Memory Management" (R. Jones et al) covers some of them.
|
||||
|
||||
If you are familiar with low-level programming, the more detailed information about V8 garbage collector is in the article [A tour of V8: Garbage Collection](http://jayconrod.com/posts/55/a-tour-of-v8-garbage-collection).
|
||||
|
||||
[V8 blog](https://v8.dev/) also publishes articles about changes in memory management from time to time. Naturally, to learn the garbage collection, you'd better prepare by learning about V8 internals in general and read the blog of [Vyacheslav Egorov](http://mrale.ph) who worked as one of V8 engineers. I'm saying: "V8", because it is best covered with articles in the internet. For other engines, many approaches are similar, but garbage collection differs in many aspects.
|
||||
|
||||
In-depth knowledge of engines is good when you need low-level optimizations. It would be wise to plan that as the next step after you're familiar with the language.
|
||||
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="337" height="204" viewBox="0 0 337 204"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:'PT Mono';font-weight:700;font-style:normal;src:local('PT MonoBold'),url(/font/PTMonoBold.woff2) format('woff2'),url(/font/PTMonoBold.woff) format('woff'),url(/font/PTMonoBold.ttf) format('truetype')}</style></defs><g id="garbage-collection" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="family-delete-refs.svg"><path id="Line" fill="#9B9B9B" fill-rule="nonzero" d="M147.5 183.5v6h46v2h-46v6l-14-7 14-7z" opacity=".6"/><path id="Rectangle-1" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M88 13h151v26H88z"/><text id="<global-variable>" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="92" y="30"><global variable></tspan></text><path id="Rectangle-2" fill="#FFF9EB" stroke="#BCA68E" stroke-width="2" d="M123 80h78v26h-78z"/><text id="Object" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="139" y="96">Object</tspan></text><path id="Rectangle-3" fill="#FFF9EB" stroke="#BCA68E" stroke-width="2" d="M5 148h118v48H5z"/><text id="Object-2" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="39" y="165">Object</tspan></text><text id="wife" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="147" y="148">wife</tspan></text><text id="family" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="106" y="63">family</tspan></text><text id="name:-"John"" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"><tspan x="19" y="185">name: "John"</tspan></text><path id="Rectangle-4" fill="#FFF9EB" stroke="#BCA68E" stroke-width="2" d="M214 148h118v48H214z"/><text id="name:-"Ann"" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"><tspan x="230" y="185">name: "Ann"</tspan></text><text id="mother" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="242" y="127">mother</tspan></text><text id="Object-3" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="244" y="165">Object</tspan></text><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M164.5 43.5v18h6l-7 14-7-14h6v-18h2z"/><path id="Line-2" fill="#9B9B9B" fill-rule="nonzero" d="M114.75 111.108l1.142 1.642-.82.57-34.508 24.005 3.426 4.926L68.5 144.5l7.495-13.741 3.426 4.924 34.508-24.004.82-.571z" opacity=".6"/><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M180.5 149.5l14 7-14 7v-6h-48v-2h48v-6zM208.236 111.11l.827.563 35.427 24.121 3.377-4.96L255.5 144.5l-15.512-2.093 3.377-4.96-35.428-24.12-.826-.563 1.125-1.653z"/><path id="Line-Copy" stroke="#EE6B47" stroke-linecap="square" stroke-width="2" d="M100.5 118.5l-11 14"/><path id="Line-Copy-2" stroke="#EE6B47" stroke-linecap="square" stroke-width="2" d="M89.5 118.5l11 14"/><path id="Line-Copy-4" stroke="#EE6B47" stroke-linecap="square" stroke-width="2" d="M172.5 183.5l-11 14"/><path id="Line-Copy-3" stroke="#EE6B47" stroke-linecap="square" stroke-width="2" d="M161.5 183.5l11 14"/><text id="father" fill="#9B9B9B" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="35" y="127">father</tspan></text><text id="husband" fill="#9B9B9B" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="136" y="181">husband</tspan></text></g></g></svg>
|
||||
|
After Width: | Height: | Size: 3.7 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="420" height="279" viewBox="0 0 420 279"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:'PT Mono';font-weight:700;font-style:normal;src:local('PT MonoBold'),url(/font/PTMonoBold.woff2) format('woff2'),url(/font/PTMonoBold.woff) format('woff'),url(/font/PTMonoBold.ttf) format('truetype')}</style></defs><g id="garbage-collection" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="family-no-family.svg"><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M211.5 228.5v6h46v2h-46v6l-14-7 14-7z"/><path id="Rectangle-1" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M153 25h153v48H153z"/><text id="<global>" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="199" y="43"><global></tspan></text><path id="Rectangle-2" fill="#FFF9EB" stroke="#BCA68E" stroke-width="2" d="M187 123h78v26h-78z"/><text id="Object" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="203" y="139">Object</tspan></text><path id="Rectangle-3" fill="#FFF9EB" stroke="#BCA68E" stroke-width="2" d="M69 193h118v48H69z"/><text id="Object-2" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="103" y="210">Object</tspan></text><text id="father" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="99" y="170">father</tspan></text><text id="wife" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="211" y="193">wife</tspan></text><text id="name:-"John"" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"><tspan x="83" y="230">name: "John"</tspan></text><path id="Rectangle-4" fill="#FFF9EB" stroke="#BCA68E" stroke-width="2" d="M278 193h118v48H278z"/><text id="name:-"Ann"" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"><tspan x="294" y="230">name: "Ann"</tspan></text><text id="mother" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="306" y="170">mother</tspan></text><text id="Object-3" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="308" y="210">Object</tspan></text><path id="Line-2" fill="#EE6B47" fill-rule="nonzero" d="M178.75 154.108l1.142 1.642-.82.57-34.508 24.005 3.426 4.926-15.49 2.249 7.495-13.741 3.426 4.924 34.508-24.004.82-.571z"/><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M244.5 194.5l14 7-14 7v-6h-48v-2h48v-6z"/><text id="husband" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="200" y="226">husband</tspan></text><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M272.236 154.11l.827.563 35.427 24.121 3.377-4.96L319.5 187.5l-15.512-2.093 3.377-4.96-35.428-24.12-.826-.563 1.125-1.653z"/><path id="Rectangle-5" stroke="#D0021B" stroke-width="2" d="M48 112h364v150H48z"/><text id="family:-null" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="183" y="66">family: null</tspan></text><g id="noun_48910_cc" transform="translate(8 110)"><path id="Shape" d="M17.503 1.75h-5.006a.341.341 0 00-.34.342v1.125h5.686V2.092a.341.341 0 00-.34-.341z"/><path id="Shape" fill="#D0021B" d="M28.364 3.217H19.59V2.092A2.09 2.09 0 0017.503 0h-5.006c-1.15 0-2.087.938-2.087 2.092v1.125H1.637c-.7 0-1.266.568-1.266 1.269v.09c0 .7.567 1.267 1.266 1.267h26.727c.699 0 1.266-.567 1.266-1.268v-.09c0-.7-.567-1.268-1.266-1.268zm-10.52 0h-5.687V2.092c0-.188.153-.341.34-.341h5.006a.34.34 0 01.34.34v1.126zM26.054 6.281H3.728c-1.298 0-2.35-.224-2.35 1.077L3.14 33.196c0 1.3 1.052 2.409 2.35 2.409h18.802c1.298 0 2.35-1.11 2.35-2.409l1.763-25.838c0-1.301-1.053-1.077-2.35-1.077zM9.637 32.193c-.377.012-.691-.261-.704-.612l-.694-19.917c-.012-.351.283-.647.66-.66.376-.013.69.261.703.613l.694 19.916c.013.351-.283.647-.659.66zm6.044-.63c0 .352-.306.637-.682.637-.377 0-.682-.286-.682-.637V11.634c0-.351.305-.636.682-.636.376 0 .682.285.682.636v19.93zm5.384.018c-.012.351-.327.625-.704.612-.376-.013-.672-.308-.66-.66l.695-19.916c.012-.352.326-.626.703-.613.377.014.672.309.66.66l-.694 19.917z"/></g></g></g></svg>
|
||||
|
After Width: | Height: | Size: 4.4 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="144" height="225" viewBox="0 0 144 225"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:'PT Mono';font-weight:700;font-style:normal;src:local('PT MonoBold'),url(/font/PTMonoBold.woff2) format('woff2'),url(/font/PTMonoBold.woff) format('woff'),url(/font/PTMonoBold.ttf) format('truetype')}</style></defs><g id="garbage-collection" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="family-no-father-2.svg"><path id="Rectangle-2" fill="#FFF9EB" stroke="#BCA68E" stroke-width="2" d="M34 91h78v26H34z"/><text id="Object" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="50" y="107">Object</tspan></text><text id="family" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="15" y="67">family</tspan></text><path id="Rectangle-4" fill="#FFF9EB" stroke="#BCA68E" stroke-width="2" d="M16 166h118v48H16z"/><text id="name:-"Ann"" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"><tspan x="34" y="203">name: "Ann"</tspan></text><text id="mother" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="16" y="142">mother</tspan></text><text id="Object-3" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="48" y="183">Object</tspan></text><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M75.5 47.5v18h6l-7 14-7-14h6v-18h2zM74.5 122.5v19h6l-7 14-7-14h6v-19h2z"/><path id="Rectangle-1" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M27 16h93v26H27z"/><text id="<global>" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="43" y="33"><global></tspan></text></g></g></svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="399" height="225" viewBox="0 0 399 225"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:'PT Mono';font-weight:700;font-style:normal;src:local('PT MonoBold'),url(/font/PTMonoBold.woff2) format('woff2'),url(/font/PTMonoBold.woff) format('woff'),url(/font/PTMonoBold.ttf) format('truetype')}</style></defs><g id="garbage-collection" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="family-no-father.svg"><path id="Rectangle-2" fill="#FFF9EB" stroke="#BCA68E" stroke-width="2" d="M187 78h78v26h-78z"/><text id="Object" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="203" y="94">Object</tspan></text><path id="Rectangle-3" fill="#FFF9EB" stroke="#BCA68E" stroke-width="2" d="M69 146h118v48H69z"/><text id="Object-2" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="103" y="163">Object</tspan></text><text id="wife" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="211" y="146">wife</tspan></text><text id="family" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="171" y="61">family</tspan></text><text id="name:-"John"" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"><tspan x="83" y="183">name: "John"</tspan></text><path id="Rectangle-4" fill="#FFF9EB" stroke="#BCA68E" stroke-width="2" d="M278 146h118v48H278z"/><text id="name:-"Ann"" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"><tspan x="299" y="183">name: "Ann"</tspan></text><text id="mother" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="306" y="125">mother</tspan></text><text id="Object-3" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="308" y="163">Object</tspan></text><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M228.5 41.5v18h6l-7 14-7-14h6v-18h2zM244.5 147.5l14 7-14 7v-6h-48v-2h48v-6zM272.236 109.11l.827.563 35.427 24.121 3.377-4.96L319.5 142.5l-15.512-2.093 3.377-4.96-35.428-24.12-.826-.563 1.125-1.653z"/><path id="Rectangle-5" stroke="#D0021B" stroke-width="2" d="M48 117h217v99H48z"/><g id="noun_48910_cc" transform="translate(7 114)"><path id="Shape" d="M17.503 1.75h-5.006a.341.341 0 00-.34.342v1.125h5.686V2.092a.341.341 0 00-.34-.341z"/><path id="Shape" fill="#D0021B" d="M28.364 3.217H19.59V2.092A2.09 2.09 0 0017.503 0h-5.006c-1.15 0-2.087.938-2.087 2.092v1.125H1.637c-.7 0-1.266.568-1.266 1.269v.09c0 .7.567 1.267 1.266 1.267h26.727c.699 0 1.266-.567 1.266-1.268v-.09c0-.7-.567-1.268-1.266-1.268zm-10.52 0h-5.687V2.092c0-.188.153-.341.34-.341h5.006a.34.34 0 01.34.34v1.126zM26.054 6.281H3.728c-1.298 0-2.35-.224-2.35 1.077L3.14 33.196c0 1.3 1.052 2.409 2.35 2.409h18.802c1.298 0 2.35-1.11 2.35-2.409l1.763-25.838c0-1.301-1.053-1.077-2.35-1.077zM9.637 32.193c-.377.012-.691-.261-.704-.612l-.694-19.917c-.012-.351.283-.647.66-.66.376-.013.69.261.703.613l.694 19.916c.013.351-.283.647-.659.66zm6.044-.63c0 .352-.306.637-.682.637-.377 0-.682-.286-.682-.637V11.634c0-.351.305-.636.682-.636.376 0 .682.285.682.636v19.93zm5.384.018c-.012.351-.327.625-.704.612-.376-.013-.672-.308-.66-.66l.695-19.916c.012-.352.326-.626.703-.613.377.014.672.309.66.66l-.694 19.917z"/></g><path id="Rectangle-1" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M181 13h93v26h-93z"/><text id="<global>" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="197" y="30"><global></tspan></text></g></g></svg>
|
||||
|
After Width: | Height: | Size: 3.8 KiB |
1
1-js/04-object-basics/03-garbage-collection/family.svg
Normal file
1
1-js/04-object-basics/03-garbage-collection/family.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="337" height="204" viewBox="0 0 337 204"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:'PT Mono';font-weight:700;font-style:normal;src:local('PT MonoBold'),url(/font/PTMonoBold.woff2) format('woff2'),url(/font/PTMonoBold.woff) format('woff'),url(/font/PTMonoBold.ttf) format('truetype')}</style></defs><g id="garbage-collection" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="family.svg"><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M147.5 183.5v6h46v2h-46v6l-14-7 14-7z"/><path id="Rectangle-2" fill="#FFF9EB" stroke="#BCA68E" stroke-width="2" d="M123 80h78v26h-78z"/><text id="Object" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="139" y="96">Object</tspan></text><path id="Rectangle-3" fill="#FFF9EB" stroke="#BCA68E" stroke-width="2" d="M5 148h118v48H5z"/><text id="Object-2" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="39" y="165">Object</tspan></text><text id="father" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="35" y="127">father</tspan></text><text id="wife" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="147" y="148">wife</tspan></text><text id="family" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="107" y="63">family</tspan></text><text id="name:-"John"" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"><tspan x="19" y="185">name: "John"</tspan></text><path id="Rectangle-4" fill="#FFF9EB" stroke="#BCA68E" stroke-width="2" d="M214 148h118v48H214z"/><text id="name:-"Ann"" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"><tspan x="230" y="185">name: "Ann"</tspan></text><text id="mother" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="242" y="127">mother</tspan></text><text id="Object-3" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="244" y="165">Object</tspan></text><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M164.5 43.5v18h6l-7 14-7-14h6v-18h2z"/><path id="Line-2" fill="#EE6B47" fill-rule="nonzero" d="M114.75 111.108l1.142 1.642-.82.57-34.508 24.005 3.426 4.926L68.5 144.5l7.495-13.741 3.426 4.924 34.508-24.004.82-.571z"/><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M180.5 149.5l14 7-14 7v-6h-48v-2h48v-6z"/><text id="husband" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="136" y="181">husband</tspan></text><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M208.236 111.11l.827.563 35.427 24.121 3.377-4.96L255.5 144.5l-15.512-2.093 3.377-4.96-35.428-24.12-.826-.563 1.125-1.653z"/><path id="Rectangle-1" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M88 13h151v26H88z"/><text id="<global-variable>" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="92" y="30"><global variable></tspan></text></g></g></svg>
|
||||
|
After Width: | Height: | Size: 3.3 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 7.4 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 9 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 10 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 10 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 12 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="144" height="159" viewBox="0 0 144 159"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:'PT Mono';font-weight:700;font-style:normal;src:local('PT MonoBold'),url(/font/PTMonoBold.woff2) format('woff2'),url(/font/PTMonoBold.woff) format('woff'),url(/font/PTMonoBold.ttf) format('truetype')}</style></defs><g id="garbage-collection" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="memory-user-john-admin.svg"><text id="user" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="12" y="67">user</tspan></text><path id="Rectangle-4" fill="#FFF9EB" stroke="#BCA68E" stroke-width="2" d="M16 93h118v48H16z"/><text id="name:-"John"" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"><tspan x="30" y="130">name: "John"</tspan></text><text id="Object" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="44" y="110">Object</tspan></text><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M55.5 47.5v18h6l-7 14-7-14h6v-18h2z"/><text id="admin" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="92" y="67">admin</tspan></text><path id="Line-Copy" fill="#EE6B47" fill-rule="nonzero" d="M83.5 47.5v18h6l-7 14-7-14h6v-18h2z"/><path id="Rectangle-1" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M27 16h93v26H27z"/><text id="<global>" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="43" y="33"><global></tspan></text></g></g></svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="225" height="159" viewBox="0 0 225 159"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:'PT Mono';font-weight:700;font-style:normal;src:local('PT MonoBold'),url(/font/PTMonoBold.woff2) format('woff2'),url(/font/PTMonoBold.woff) format('woff'),url(/font/PTMonoBold.ttf) format('truetype')}</style></defs><g id="garbage-collection" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="memory-user-john-lost.svg"><path id="Rectangle-4" fill="#FFF9EB" stroke="#BCA68E" stroke-width="2" d="M61 89h118v48H61z"/><text id="name:-"John"" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"><tspan x="83" y="126">name: "John"</tspan></text><text id="Object-3" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="97" y="106">Object</tspan></text><path id="Rectangle-1" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M65 4h104v42H65z"/><text id="user:-null" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="79" y="40">user: null</tspan></text><text id="<global>" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="86" y="23"><global></tspan></text><path id="Rectangle-5" stroke="#D0021B" stroke-width="2" d="M47 69h154v86H47z"/><g id="noun_48910_cc" transform="translate(8 65)"><path id="Shape" d="M17.503 1.75h-5.006a.341.341 0 00-.34.342v1.125h5.686V2.092a.341.341 0 00-.34-.341z"/><path id="Shape" fill="#D0021B" d="M28.364 3.217H19.59V2.092A2.09 2.09 0 0017.503 0h-5.006c-1.15 0-2.087.938-2.087 2.092v1.125H1.637c-.7 0-1.266.568-1.266 1.269v.09c0 .7.567 1.267 1.266 1.267h26.727c.699 0 1.266-.567 1.266-1.268v-.09c0-.7-.567-1.268-1.266-1.268zm-10.52 0h-5.687V2.092c0-.188.153-.341.34-.341h5.006a.34.34 0 01.34.34v1.126zM26.054 6.281H3.728c-1.298 0-2.35-.224-2.35 1.077L3.14 33.196c0 1.3 1.052 2.409 2.35 2.409h18.802c1.298 0 2.35-1.11 2.35-2.409l1.763-25.838c0-1.301-1.053-1.077-2.35-1.077zM9.637 32.193c-.377.012-.691-.261-.704-.612l-.694-19.917c-.012-.351.283-.647.66-.66.376-.013.69.261.703.613l.694 19.916c.013.351-.283.647-.659.66zm6.044-.63c0 .352-.306.637-.682.637-.377 0-.682-.286-.682-.637V11.634c0-.351.305-.636.682-.636.376 0 .682.285.682.636v19.93zm5.384.018c-.012.351-.327.625-.704.612-.376-.013-.672-.308-.66-.66l.695-19.916c.012-.352.326-.626.703-.613.377.014.672.309.66.66l-.694 19.917z"/></g></g></g></svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="144" height="150" viewBox="0 0 144 150"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:'PT Mono';font-weight:700;font-style:normal;src:local('PT MonoBold'),url(/font/PTMonoBold.woff2) format('woff2'),url(/font/PTMonoBold.woff) format('woff'),url(/font/PTMonoBold.ttf) format('truetype')}</style></defs><g id="garbage-collection" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="memory-user-john.svg"><text id="user" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="31" y="69">user</tspan></text><path id="Rectangle-4" fill="#FFF9EB" stroke="#BCA68E" stroke-width="2" d="M16 95h118v48H16z"/><text id="name:-"John"" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"><tspan x="32" y="132">name: "John"</tspan></text><text id="Object-3" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="46" y="112">Object</tspan></text><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M75.5 49.5v18h6l-7 14-7-14h6v-18h2z"/><path id="Rectangle-1" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M27 12h93v26H27z"/><text id="<global>" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="43" y="29"><global></tspan></text></g></g></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
Loading…
Add table
Add a link
Reference in a new issue