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

2
1-js/09-classes/01-class/article.md
View file

@ -93,7 +93,7 @@ Afterwards, for `new User` objects, when we call a method, it's taken from the p
We can illustrate the result of `class User` declaration as:
![](class-user.png)
![](class-user.svg)
Here's the code to introspect it:

BIN
1-js/09-classes/01-class/class-user.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 12 KiB

29
1-js/09-classes/01-class/class-user.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 46 KiB

BIN
1-js/09-classes/01-class/class-user@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 27 KiB

BIN
1-js/09-classes/02-class-inheritance/3-class-extend-object/rabbit-extends-object.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 24 KiB

67
1-js/09-classes/02-class-inheritance/3-class-extend-object/rabbit-extends-object.svg Normal file
View file

@ -0,0 +1,67 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="458px" height="344px" viewBox="0 0 458 344" 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>rabbit-extends-object.svg</title>
<desc>Created with sketchtool.</desc>
<g id="inheritance" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="rabbit-extends-object.svg">
<path d="M228,61 L228,129 L406,129 L406,61 L228,61 Z" id="Rectangle-1" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB"></path>
<text id="call:-function-bind:" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="238" y="80">call: function</tspan>
<tspan x="238" y="95">bind: function</tspan>
<tspan x="238" y="110">...</tspan>
</text>
<rect id="Rectangle-1-Copy" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="228" y="303" width="178" height="28"></rect>
<text id="Function.prototype" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="227" y="53">Function.prototype</tspan>
</text>
<path d="M228,202 L228,230 L406,230 L406,202 L228,202 Z" id="Rectangle-1-Copy-4" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB"></path>
<text id="constructor" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="238" y="220">constructor</tspan>
</text>
<text id="Object" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="227" y="194">Object</tspan>
</text>
<text id="Rabbit" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="233" y="292">Rabbit</tspan>
</text>
<path id="Line" d="M317.5,157.5 L317.5,185.5 L315.5,185.5 L315.5,157.5 L309.5,157.5 L316.5,143.5 L323.5,157.5 L317.5,157.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="[[Prototype]]" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="326" y="167">[[Prototype]]</tspan>
</text>
<path id="Line-Copy-3" d="M317.5,261.5 L317.5,289.5 L315.5,289.5 L315.5,261.5 L309.5,261.5 L316.5,247.5 L323.5,261.5 L317.5,261.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="[[Prototype]]-Copy" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="326" y="271">[[Prototype]]</tspan>
</text>
<text id="constructor-copy" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="236" y="321">constructor</tspan>
</text>
<rect id="Rectangle-1-Copy-3" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="8" y="61" width="178" height="68"></rect>
<text id="call:-function-bind:-copy" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="18" y="80">call: function</tspan>
<tspan x="18" y="95">bind: function</tspan>
<tspan x="18" y="110">...</tspan>
</text>
<rect id="Rectangle-1-Copy-2" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="8" y="201" width="178" height="28"></rect>
<text id="Function.prototype-Copy" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="7" y="53">Function.prototype</tspan>
</text>
<text id="Rabbit-Copy" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="13" y="190">Rabbit</tspan>
</text>
<path id="Line-Copy-4" d="M97.5,159.5 L97.5,187.5 L95.5,187.5 L95.5,159.5 L89.5,159.5 L96.5,145.5 L103.5,159.5 L97.5,159.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="[[Prototype]]-Copy-2" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="106" y="169">[[Prototype]]</tspan>
</text>
<text id="constructor-copy-2" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="16" y="219">constructor</tspan>
</text>
<text id="class-Rabbit" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="14" y="18">class Rabbit</tspan>
</text>
<text id="class-Rabbit-extends" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="224" y="18">class Rabbit extends Object</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 5 KiB

BIN
1-js/09-classes/02-class-inheritance/3-class-extend-object/rabbit-extends-object@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 60 KiB

2
1-js/09-classes/02-class-inheritance/3-class-extend-object/solution.md
View file

@ -71,7 +71,7 @@ By the way, `Function.prototype` has "generic" function methods, like `call`, `b
Here's the picture:
![](rabbit-extends-object.png)
![](rabbit-extends-object.svg)
So, to put it short, there are two differences:

BIN
1-js/09-classes/02-class-inheritance/animal-rabbit-extends.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 31 KiB

64
1-js/09-classes/02-class-inheritance/animal-rabbit-extends.svg Normal file
View file

@ -0,0 +1,64 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="446px" height="316px" viewBox="0 0 446 316" 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>animal-rabbit-extends.svg</title>
<desc>Created with sketchtool.</desc>
<g id="inheritance" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="animal-rabbit-extends.svg">
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="238" y="23" width="185" height="64"></rect>
<text id="constructor:-Animal" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="248" y="42">constructor: Animal</tspan>
<tspan x="248" y="57">run: function</tspan>
<tspan x="248" y="72">stop: function</tspan>
</text>
<rect id="Rectangle-1-Copy" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="238" y="286" width="185" height="28"></rect>
<text id="Animal.prototype" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="237" y="15">Animal.prototype</tspan>
</text>
<rect id="Rectangle-1-Copy-4" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="238" y="166" width="185" height="48"></rect>
<text id="constructor:-Rabbit" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="248" y="185">constructor: Rabbit</tspan>
<tspan x="248" y="200">hide: function</tspan>
</text>
<text id="Rabbit.prototype" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="237" y="158">Rabbit.prototype</tspan>
</text>
<rect id="Rectangle-1-Copy-2" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="11" y="23" width="105" height="48"></rect>
<text id="Animal" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="10" y="15">Animal</tspan>
</text>
<rect id="Rectangle-1-Copy-3" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="11" y="166" width="105" height="48"></rect>
<text id="Rabbit" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="10" y="158">Rabbit</tspan>
</text>
<text id="new-Rabbit" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="243" y="278">new Rabbit</tspan>
</text>
<path id="Line" d="M327.5,110.5 L327.5,138.5 L325.5,138.5 L325.5,110.5 L319.5,110.5 L326.5,96.5 L333.5,110.5 L327.5,110.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line-Copy" d="M199,48 L132,48 L132,46 L199,46 L199,40 L213,47 L199,54 L199,48 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="[[Prototype]]" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="336" y="120">[[Prototype]]</tspan>
</text>
<path id="Line-Copy-3" d="M327.5,244.5 L327.5,272.5 L325.5,272.5 L325.5,244.5 L319.5,244.5 L326.5,230.5 L333.5,244.5 L327.5,244.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="[[Prototype]]-Copy" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="336" y="254">[[Prototype]]</tspan>
</text>
<text id="prototype" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="139" y="35">prototype</tspan>
</text>
<path id="Line-Copy-2" d="M199,189 L132,189 L132,187 L199,187 L199,181 L213,188 L199,195 L199,189 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="prototype-copy" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="139" y="176">prototype</tspan>
</text>
<text id="name:-&quot;White-Rabbit&quot;" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="249" y="304">name: "White Rabbit"</tspan>
</text>
<text id="constructor" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="17" y="41">constructor</tspan>
</text>
<text id="constructor-copy" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="17" y="183">constructor</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 4.8 KiB

BIN
1-js/09-classes/02-class-inheritance/animal-rabbit-extends@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 76 KiB

10
1-js/09-classes/02-class-inheritance/article.md
View file

@ -24,7 +24,7 @@ class Animal {
let animal = new Animal("My animal");
```
![](rabbit-animal-independent-animal.png)
![](rabbit-animal-independent-animal.svg)
...And `Rabbit`:
@ -42,7 +42,7 @@ class Rabbit {
let rabbit = new Rabbit("My rabbit");
```
![](rabbit-animal-independent-rabbit.png)
![](rabbit-animal-independent-rabbit.svg)
Right now they are fully independent.
@ -88,7 +88,7 @@ Now the `Rabbit` code became a bit shorter, as it uses `Animal` constructor by d
Internally, `extends` keyword adds `[[Prototype]]` reference from `Rabbit.prototype` to `Animal.prototype`:
![](animal-rabbit-extends.png)
![](animal-rabbit-extends.svg)
So, if a method is not found in `Rabbit.prototype`, JavaScript takes it from `Animal.prototype`.
@ -384,7 +384,7 @@ So, in both lines `(*)` and `(**)` the value of `this.__proto__` is exactly the
Here's the picture of what happens:
![](this-super-loop.png)
![](this-super-loop.svg)
1. Inside `longEar.eat()`, the line `(**)` calls `rabbit.eat` providing it with `this=longEar`.
```js
@ -501,7 +501,7 @@ The reason is simple:
- So its `[[HomeObject]]` is `rabbit`, as it was created in `rabbit`. There's no way to change `[[HomeObject]]`.
- The code of `tree.sayHi()` has `super.sayHi()` inside. It goes up from `rabbit` and takes the method from `animal`.
![](super-homeobject-wrong.png)
![](super-homeobject-wrong.svg)
### Methods, not function properties

BIN
1-js/09-classes/02-class-inheritance/class-inheritance-array-object.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 17 KiB

41
1-js/09-classes/02-class-inheritance/class-inheritance-array-object.svg Normal file
View file

@ -0,0 +1,41 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="233px" height="316px" viewBox="0 0 233 316" 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>class-inheritance-array-object.svg</title>
<desc>Created with sketchtool.</desc>
<g id="inheritance" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="class-inheritance-array-object.svg">
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="13" y="158" width="219" height="58"></rect>
<text id="slice:-function" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="23" y="181">slice: function</tspan>
<tspan x="23" y="196">...</tspan>
</text>
<text id="Array.prototype" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="12" y="150">Array.prototype</tspan>
</text>
<text id="arr" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="12" y="267">arr</tspan>
</text>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="13" y="25" width="219" height="58"></rect>
<text id="hasOwnProperty:-func" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="23" y="48">hasOwnProperty: function</tspan>
<tspan x="23" y="63">...</tspan>
</text>
<text id="Object.prototype" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="12" y="17">Object.prototype</tspan>
</text>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="13" y="275" width="219" height="28"></rect>
<path id="Line" d="M73.5,238.5 L73.5,266.5 L71.5,266.5 L71.5,238.5 L65.5,238.5 L72.5,224.5 L79.5,238.5 L73.5,238.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line-2" d="M73.5,106.5 L73.5,134.5 L71.5,134.5 L71.5,106.5 L65.5,106.5 L72.5,92.5 L79.5,106.5 L73.5,106.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="[1,-2,-3]" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="20" y="293">[1, 2, 3]</tspan>
</text>
<text id="[[Prototype]]" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="86" y="115">[[Prototype]]</tspan>
</text>
<text id="[[Prototype]]-Copy" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="86" y="247">[[Prototype]]</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 3 KiB

BIN
1-js/09-classes/02-class-inheritance/class-inheritance-array-object@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 40 KiB

BIN
1-js/09-classes/02-class-inheritance/class-inheritance-rabbit-animal-2.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 38 KiB

62
1-js/09-classes/02-class-inheritance/class-inheritance-rabbit-animal-2.svg Normal file
View file

@ -0,0 +1,62 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="589px" height="467px" viewBox="0 0 589 467" 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>class-inheritance-rabbit-animal-2.svg</title>
<desc>Created with sketchtool.</desc>
<g id="inheritance" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="class-inheritance-rabbit-animal-2.svg">
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="11" y="336" width="220" height="28"></rect>
<text id="jump:-function" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="21" y="354">jump: function</tspan>
</text>
<text id="Rabbit.prototype" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="10" y="328">Rabbit.prototype</tspan>
</text>
<text id="rabbit" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="10" y="424">rabbit</tspan>
</text>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="11" y="230" width="220" height="28"></rect>
<text id="eat:-function" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="21" y="250">eat: function</tspan>
</text>
<text id="Animal.prototype" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="10" y="222">Animal.prototype</tspan>
</text>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="11" y="433" width="220" height="28"></rect>
<path id="Line" d="M71.5,392.5 L71.5,420.5 L69.5,420.5 L69.5,392.5 L63.5,392.5 L70.5,378.5 L77.5,392.5 L71.5,392.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line-2" d="M71.5,284.5 L71.5,312.5 L69.5,312.5 L69.5,284.5 L63.5,284.5 L70.5,270.5 L77.5,284.5 L71.5,284.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="name:-&quot;White-Rabbit&quot;" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="18" y="451">name: "White Rabbit"</tspan>
</text>
<text id="[[Prototype]]" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#EC6B4E">
<tspan x="83" y="303">[[Prototype]]</tspan>
</text>
<text id="[[Prototype]]-Copy" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="83" y="406">[[Prototype]]</tspan>
</text>
<text id="Rabbit.prototype.__p" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#EC6B4E">
<tspan x="84" y="283">Rabbit.prototype.__proto__ = Animal.prototype sets this</tspan>
</text>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="11" y="95" width="220" height="58"></rect>
<text id="toString:-function-h" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="21" y="112">toString: function</tspan>
<tspan x="21" y="127">hasOwnProperty: function</tspan>
<tspan x="21" y="142">...</tspan>
</text>
<text id="Object.prototype" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="10" y="87">Object.prototype</tspan>
</text>
<path id="Line" d="M71.5,175.5 L71.5,203.5 L69.5,203.5 L69.5,175.5 L63.5,175.5 L70.5,161.5 L77.5,175.5 L71.5,175.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="[[Prototype]]" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="80" y="183">[[Prototype]]</tspan>
</text>
<path id="Line-2" d="M71.5,43.5 L71.5,71.5 L69.5,71.5 L69.5,43.5 L63.5,43.5 L70.5,29.5 L77.5,43.5 L71.5,43.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="[[Prototype]]" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="80" y="51">[[Prototype]]</tspan>
</text>
<text id="null" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="56" y="18">null</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 4.7 KiB

BIN
1-js/09-classes/02-class-inheritance/class-inheritance-rabbit-animal-2@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 92 KiB

BIN
1-js/09-classes/02-class-inheritance/class-inheritance-rabbit-animal.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 19 KiB

39
1-js/09-classes/02-class-inheritance/class-inheritance-rabbit-animal.svg Normal file
View file

@ -0,0 +1,39 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="198px" height="258px" viewBox="0 0 198 258" 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>class-inheritance-rabbit-animal.svg</title>
<desc>Created with sketchtool.</desc>
<g id="inheritance" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="class-inheritance-rabbit-animal.svg">
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="11" y="128" width="179" height="28"></rect>
<text id="methods-of-Rabbit" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="19" y="146">methods of Rabbit</tspan>
</text>
<text id="Rabbit.prototype" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="10" y="120">Rabbit.prototype</tspan>
</text>
<text id="rabbit" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="10" y="213">rabbit</tspan>
</text>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="11" y="21" width="179" height="28"></rect>
<text id="methods-of-Animal" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="19" y="38">methods of Animal</tspan>
</text>
<text id="Animal.prototype" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="10" y="13">Animal.prototype</tspan>
</text>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="11" y="222" width="179" height="28"></rect>
<path id="Line" d="M71.5,181.5 L71.5,209.5 L69.5,209.5 L69.5,181.5 L63.5,181.5 L70.5,167.5 L77.5,181.5 L71.5,181.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line-2" d="M71.5,76.5 L71.5,104.5 L69.5,104.5 L69.5,76.5 L63.5,76.5 L70.5,62.5 L77.5,76.5 L71.5,76.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="[[Prototype]]" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="80" y="86">[[Prototype]]</tspan>
</text>
<text id="[[Prototype]]-Copy" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="80" y="190">[[Prototype]]</tspan>
</text>
<text id="properties-of-rabbit" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="19" y="239">properties of rabbit</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
1-js/09-classes/02-class-inheritance/class-inheritance-rabbit-animal@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 44 KiB

BIN
1-js/09-classes/02-class-inheritance/rabbit-animal-independent-animal.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 18 KiB

42
1-js/09-classes/02-class-inheritance/rabbit-animal-independent-animal.svg Normal file
View file

@ -0,0 +1,42 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="449px" height="211px" viewBox="0 0 449 211" 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>rabbit-animal-independent-animal.svg</title>
<desc>Created with sketchtool.</desc>
<g id="inheritance" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="rabbit-animal-independent-animal.svg">
<path d="M238,23 L238,87 L416,87 L416,23 L238,23 Z" id="Rectangle-1" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB"></path>
<text id="constructor:-Animal" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="248" y="29"></tspan>
<tspan x="248" y="44">constructor: Animal</tspan>
<tspan x="248" y="59">run: function</tspan>
<tspan x="248" y="74">stop: function</tspan>
</text>
<text id="Animal.prototype" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="237" y="15">Animal.prototype</tspan>
</text>
<rect id="Rectangle-1-Copy-2" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="11" y="23" width="105" height="28"></rect>
<text id="Animal" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="10" y="15">Animal</tspan>
</text>
<path d="M237,168 L237,196 L415,196 L415,168 L237,168 Z" id="Rectangle-1-Copy-3" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB"></path>
<text id="new-Animal" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="239" y="160">new Animal</tspan>
</text>
<path id="Line" d="M327.5,112.5 L327.5,140.5 L325.5,140.5 L325.5,112.5 L319.5,112.5 L326.5,98.5 L333.5,112.5 L327.5,112.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line-Copy" d="M199,38 L132,38 L132,36 L199,36 L199,30 L213,37 L199,44 L199,38 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="[[Prototype]]" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="336" y="122">[[Prototype]]</tspan>
</text>
<text id="prototype" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="133" y="25">prototype</tspan>
</text>
<text id="name:-&quot;My-animal&quot;" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="249" y="186">name: "My animal"</tspan>
</text>
<text id="constructor" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="17" y="41">constructor</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 3 KiB

BIN
1-js/09-classes/02-class-inheritance/rabbit-animal-independent-animal@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 44 KiB

BIN
1-js/09-classes/02-class-inheritance/rabbit-animal-independent-rabbit.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 17 KiB

41
1-js/09-classes/02-class-inheritance/rabbit-animal-independent-rabbit.svg Normal file
View file

@ -0,0 +1,41 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="449px" height="202px" viewBox="0 0 449 202" 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>rabbit-animal-independent-rabbit.svg</title>
<desc>Created with sketchtool.</desc>
<g id="inheritance" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="rabbit-animal-independent-rabbit.svg">
<path d="M238,23 L238,71 L416,71 L416,23 L238,23 Z" id="Rectangle-1" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB"></path>
<text id="constructor:-Rabbit" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="248" y="29"></tspan>
<tspan x="248" y="44">constructor: Rabbit</tspan>
<tspan x="248" y="59">hide: function</tspan>
</text>
<text id="Rabbit.prototype" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="237" y="15">Rabbit.prototype</tspan>
</text>
<rect id="Rectangle-1-Copy-2" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="11" y="23" width="105" height="28"></rect>
<text id="Rabbit" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="10" y="15">Rabbit</tspan>
</text>
<path d="M237,151 L237,179 L415,179 L415,151 L237,151 Z" id="Rectangle-1-Copy-3" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB"></path>
<text id="new-Rabbit" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="239" y="143">new Rabbit</tspan>
</text>
<path id="Line" d="M327.5,95.5 L327.5,123.5 L325.5,123.5 L325.5,95.5 L319.5,95.5 L326.5,81.5 L333.5,95.5 L327.5,95.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line-Copy" d="M199,38 L132,38 L132,36 L199,36 L199,30 L213,37 L199,44 L199,38 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="[[Prototype]]" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="336" y="105">[[Prototype]]</tspan>
</text>
<text id="prototype" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="139" y="25">prototype</tspan>
</text>
<text id="name:-&quot;My-rabbit&quot;" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="249" y="169">name: "My rabbit"</tspan>
</text>
<text id="constructor" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="17" y="41">constructor</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 3 KiB

BIN
1-js/09-classes/02-class-inheritance/rabbit-animal-independent-rabbit@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 42 KiB

BIN
1-js/09-classes/02-class-inheritance/super-homeobject-wrong.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 9.6 KiB

44
1-js/09-classes/02-class-inheritance/super-homeobject-wrong.svg Normal file
View file

@ -0,0 +1,44 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="395px" height="192px" viewBox="0 0 395 192" 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>super-homeobject-wrong.svg</title>
<desc>Created with sketchtool.</desc>
<g id="inheritance" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="super-homeobject-wrong.svg">
<path d="M237,30 L237,58 L335,58 L335,30 L237,30 Z" id="Rectangle-1" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB"></path>
<text id="sayHi" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="247" y="48">sayHi</tspan>
</text>
<text id="plant" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="241" y="22">plant</tspan>
</text>
<path d="M237,143 L237,171 L335,171 L335,143 L237,143 Z" id="Rectangle-1-Copy-4" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB"></path>
<text id="sayHi" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="247" y="162">sayHi</tspan>
</text>
<text id="tree" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="241" y="135">tree</tspan>
</text>
<path id="Line" d="M288.5,84.5 L288.5,112.5 L286.5,112.5 L286.5,84.5 L280.5,84.5 L287.5,70.5 L294.5,84.5 L288.5,84.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line-Copy" d="M121.003531,156.550731 L246.003617,157.00363 L245.99637,159.003617 L120.996285,158.550718 L120.974546,164.550678 L107,157.5 L121.02527,150.55077 L121.003531,156.550731 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<rect id="Rectangle-1-Copy-3" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="8" y="30" width="98" height="28"></rect>
<text id="sayHi" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="18" y="48">sayHi</tspan>
</text>
<rect id="Rectangle-1-Copy-2" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="8" y="143" width="98" height="28"></rect>
<text id="animal" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="12" y="22">animal</tspan>
</text>
<text id="rabbit" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="12" y="131">rabbit</tspan>
</text>
<path id="Line-Copy-4" d="M59.5,86.5 L59.5,114.5 L57.5,114.5 L57.5,86.5 L51.5,86.5 L58.5,72.5 L65.5,86.5 L59.5,86.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="[[HomeObject]]" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="115" y="142">[[HomeObject]]</tspan>
</text>
<text id="sayHi" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="16" y="162">sayHi</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 3.3 KiB

BIN
1-js/09-classes/02-class-inheritance/super-homeobject-wrong@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 22 KiB

BIN
1-js/09-classes/02-class-inheritance/this-super-loop.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 22 KiB

72
1-js/09-classes/02-class-inheritance/this-super-loop.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 151 KiB

BIN
1-js/09-classes/02-class-inheritance/this-super-loop@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 52 KiB

BIN
1-js/09-classes/03-static-properties-methods/animal-rabbit-static.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 29 KiB

64
1-js/09-classes/03-static-properties-methods/animal-rabbit-static.svg Normal file
View file

@ -0,0 +1,64 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="446px" height="316px" viewBox="0 0 446 316" 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>animal-rabbit-static.svg</title>
<desc>Created with sketchtool.</desc>
<g id="inheritance" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="animal-rabbit-static.svg">
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="238" y="23" width="182" height="48"></rect>
<text id="constructor:-Animal" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="248" y="42">constructor: Animal</tspan>
<tspan x="248" y="57">run: function</tspan>
</text>
<rect id="Rectangle-1-Copy" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="238" y="278" width="182" height="28"></rect>
<text id="Animal.prototype" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="237" y="15">Animal.prototype</tspan>
</text>
<rect id="Rectangle-1-Copy-4" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="238" y="158" width="182" height="48"></rect>
<text id="constructor:-Rabbit" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="248" y="177">constructor: Rabbit</tspan>
<tspan x="248" y="192">hide: function</tspan>
</text>
<text id="Rabbit.prototype" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="237" y="150">Rabbit.prototype</tspan>
</text>
<rect id="Rectangle-1-Copy-2" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="11" y="23" width="98" height="48"></rect>
<text id="Animal" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="10" y="15">Animal</tspan>
</text>
<rect id="Rectangle-1-Copy-3" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="11" y="158" width="98" height="48"></rect>
<text id="Rabbit" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="10" y="150">Rabbit</tspan>
</text>
<text id="rabbit" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="243" y="267">rabbit</tspan>
</text>
<path id="Line" d="M327.5,102.5 L327.5,130.5 L325.5,130.5 L325.5,102.5 L319.5,102.5 L326.5,88.5 L333.5,102.5 L327.5,102.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line-Copy" d="M199,38 L132,38 L132,36 L199,36 L199,30 L213,37 L199,44 L199,38 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="[[Prototype]]" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="336" y="112">[[Prototype]]</tspan>
</text>
<path id="Line-Copy-4" d="M57.5,102.5 L57.5,130.5 L55.5,130.5 L55.5,102.5 L49.5,102.5 L56.5,88.5 L63.5,102.5 L57.5,102.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="[[Prototype]]-Copy-2" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#EC6B4E">
<tspan x="66" y="112">[[Prototype]]</tspan>
</text>
<path id="Line-Copy-3" d="M327.5,236.5 L327.5,264.5 L325.5,264.5 L325.5,236.5 L319.5,236.5 L326.5,222.5 L333.5,236.5 L327.5,236.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="[[Prototype]]-Copy" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="336" y="246">[[Prototype]]</tspan>
</text>
<text id="prototype" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="139" y="25">prototype</tspan>
</text>
<path id="Line-Copy-2" d="M199,181 L132,181 L132,179 L199,179 L199,173 L213,180 L199,187 L199,181 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="prototype-copy" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="139" y="168">prototype</tspan>
</text>
<text id="compare" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="20" y="41">compare</tspan>
</text>
<text id="name:-&quot;White-Rabbit&quot;" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="249" y="296">name: "White Rabbit"</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 4.9 KiB

BIN
1-js/09-classes/03-static-properties-methods/animal-rabbit-static@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 68 KiB

2
1-js/09-classes/03-static-properties-methods/article.md
View file

@ -174,7 +174,7 @@ Now we can call `Rabbit.compare` assuming that the inherited `Animal.compare` wi
How does it work? Again, using prototypes. As you might have already guessed, `extends` gives `Rabbit` the `[[Prototype]]` reference to `Animal`.
![](animal-rabbit-static.png)
![](animal-rabbit-static.svg)
So, `Rabbit` function now inherits from `Animal` function. And `Animal` function normally has `[[Prototype]]` referencing `Function.prototype`, because it doesn't `extend` anything.

2
1-js/09-classes/05-extend-natives/article.md
View file

@ -78,6 +78,6 @@ For example, both `Array` and `Date` inherit from `Object`, so their instances h
Here's the picture structure for `Date` and `Object`:
![](object-date-inheritance.png)
![](object-date-inheritance.svg)
As you can see, there's no link between `Date` and `Object`. They are independent, only `Date.prototype` inherits from `Object.prototype`.

BIN
1-js/09-classes/05-extend-natives/object-date-inheritance.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 34 KiB

71
1-js/09-classes/05-extend-natives/object-date-inheritance.svg Normal file
View file

@ -0,0 +1,71 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="486px" height="370px" viewBox="0 0 486 370" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>object-date-inheritance.svg</title>
<desc>Created with sketchtool.</desc>
<g id="inheritance" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="object-date-inheritance.svg">
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="262" y="23" width="219" height="78"></rect>
<text id="constructor:-Object" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="272" y="42">constructor: Object</tspan>
<tspan x="272" y="57">toString: function</tspan>
<tspan x="272" y="72">hasOwnProperty: function</tspan>
<tspan x="272" y="87">...</tspan>
</text>
<rect id="Rectangle-1-Copy" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="262" y="329" width="178" height="28"></rect>
<text id="Object.prototype" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="261" y="15">Object.prototype</tspan>
</text>
<rect id="Rectangle-1-Copy-4" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="262" y="183" width="219" height="78"></rect>
<text id="constructor:-Date-to" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="272" y="202">constructor: Date</tspan>
<tspan x="272" y="217">toString: function</tspan>
<tspan x="272" y="232">getDate: function</tspan>
<tspan x="272" y="247">...</tspan>
</text>
<text id="Date.prototype" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="261" y="175">Date.prototype</tspan>
</text>
<rect id="Rectangle-1-Copy-2" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="15" y="23" width="133" height="64"></rect>
<text id="Object" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="14" y="15">Object</tspan>
</text>
<rect id="Rectangle-1-Copy-3" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="15" y="183" width="133" height="64"></rect>
<text id="Date" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="14" y="175">Date</tspan>
</text>
<text id="new-Date()" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="263" y="318">new Date()</tspan>
</text>
<path id="Line" d="M351.5,127.5 L351.5,155.5 L349.5,155.5 L349.5,127.5 L343.5,127.5 L350.5,113.5 L357.5,127.5 L351.5,127.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line-Copy" d="M223,38 L156,38 L156,36 L223,36 L223,30 L237,37 L223,44 L223,38 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="[[Prototype]]" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="360" y="137">[[Prototype]]</tspan>
</text>
<path id="Line-Copy-3" d="M351.5,287.5 L351.5,315.5 L349.5,315.5 L349.5,287.5 L343.5,287.5 L350.5,273.5 L357.5,287.5 L351.5,287.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="[[Prototype]]-Copy" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="360" y="297">[[Prototype]]</tspan>
</text>
<text id="prototype" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="163" y="25">prototype</tspan>
</text>
<path id="Line-Copy-2" d="M223,206 L156,206 L156,204 L223,204 L223,198 L237,205 L223,212 L223,206 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="prototype-copy" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="163" y="193">prototype</tspan>
</text>
<text id="defineProperty" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="24" y="41">defineProperty</tspan>
<tspan x="24" y="56">keys</tspan>
<tspan x="24" y="71">...</tspan>
</text>
<text id="now" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="24" y="202">now</tspan>
<tspan x="24" y="217">parse</tspan>
<tspan x="24" y="232">...</tspan>
</text>
<text id="1-Jan-2019" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="273" y="347">1 Jan 2019</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 5.2 KiB

BIN
1-js/09-classes/05-extend-natives/object-date-inheritance@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 86 KiB

2
1-js/09-classes/06-instanceof/article.md
View file

@ -94,7 +94,7 @@ The algorithm of `obj instanceof Class` works roughly as follows:
Here's the illustration of what `rabbit instanceof Animal` compares with `Animal.prototype`:
![](instanceof.png)
![](instanceof.svg)
By the way, there's also a method [objA.isPrototypeOf(objB)](mdn:js/object/isPrototypeOf), that returns `true` if `objA` is somewhere in the chain of prototypes for `objB`. So the test of `obj instanceof Class` can be rephrased as `Class.prototype.isPrototypeOf(obj)`.

BIN
1-js/09-classes/06-instanceof/instanceof.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 31 KiB

51
1-js/09-classes/06-instanceof/instanceof.svg Normal file
View file

@ -0,0 +1,51 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="509px" height="435px" viewBox="0 0 509 435" 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>instanceof.svg</title>
<desc>Created with sketchtool.</desc>
<g id="inheritance" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="instanceof.svg">
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="9" y="200" width="139" height="28"></rect>
<text id="Animal.prototype" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="8" y="192">Animal.prototype</tspan>
</text>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="9" y="94" width="139" height="28"></rect>
<text id="Object.prototype" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="8" y="86">Object.prototype</tspan>
</text>
<path id="Line-2" d="M69.5,148.5 L69.5,176.5 L67.5,176.5 L67.5,148.5 L61.5,148.5 L68.5,134.5 L75.5,148.5 L69.5,148.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<rect id="Rectangle-1-Copy" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="9" y="307" width="139" height="28"></rect>
<text id="Rabbit.prototype" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="8" y="299">Rabbit.prototype</tspan>
</text>
<path id="Line-2-Copy" d="M69.5,255.5 L69.5,283.5 L67.5,283.5 L67.5,255.5 L61.5,255.5 L68.5,241.5 L75.5,255.5 L69.5,255.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="[[Prototype]]" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="80" y="266">[[Prototype]]</tspan>
</text>
<rect id="Rectangle-1-Copy-2" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="9" y="398" width="139" height="28"></rect>
<text id="rabbit" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="8" y="390">rabbit</tspan>
</text>
<path id="Line-2-Copy-2" d="M69.5,361.5 L69.5,389.5 L67.5,389.5 L67.5,361.5 L61.5,361.5 L68.5,347.5 L75.5,361.5 L69.5,361.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="[[Prototype]]-Copy-3" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="80" y="372">[[Prototype]]</tspan>
</text>
<text id="[[Prototype]]-Copy" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="80" y="159">[[Prototype]]</tspan>
</text>
<path id="Line-2" d="M71.5,41.5 L71.5,69.5 L69.5,69.5 L69.5,41.5 L63.5,41.5 L70.5,27.5 L77.5,41.5 L71.5,41.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="null" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="56" y="16">null</tspan>
</text>
<text id="[[Prototype]]-Copy-2" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="81" y="54">[[Prototype]]</tspan>
</text>
<text id="=-Animal.prototype?" font-family="PTMono-Regular, PT Mono" font-size="16" font-weight="normal" fill="#EE6B47">
<tspan x="317" y="217">= Animal.prototype?</tspan>
</text>
<path id="Line" d="M188.656014,308.982762 L305.787391,232.115296 L306.884704,233.787391 L189.753327,310.654858 L193.045266,315.671145 L177.5,317.5 L185.364076,303.966474 L188.656014,308.982762 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line-Copy" d="M198.5,211.5 L305.5,211.5 L305.5,213.5 L198.5,213.5 L198.5,219.5 L184.5,212.5 L198.5,205.5 L198.5,211.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line-Copy-2" d="M194.988745,128.905563 L305.873622,196.163603 L304.836397,197.873622 L193.951521,130.615582 L190.839847,135.745639 L182.5,122.5 L198.100419,123.775506 L194.988745,128.905563 Z" fill="#EE6B47" fill-rule="nonzero"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 4.4 KiB

BIN
1-js/09-classes/06-instanceof/instanceof@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 75 KiB

2
1-js/09-classes/07-mixins/article.md
View file

@ -97,7 +97,7 @@ new User("Dude").sayHi(); // Hello Dude!
Please note that the call to the parent method `super.say()` from `sayHiMixin` looks for the method in the prototype of that mixin, not the class.
![](mixin-inheritance.png)
![](mixin-inheritance.svg)
That's because methods `sayHi` and `sayBye` were initially created in `sayHiMixin`. So their `[[HomeObject]]` internal property references `sayHiMixin`, as shown on the picture above.

BIN
1-js/09-classes/07-mixins/mixin-inheritance.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 25 KiB

54
1-js/09-classes/07-mixins/mixin-inheritance.svg Normal file
View file

@ -0,0 +1,54 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="486px" height="295px" viewBox="0 0 486 295" 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>mixin-inheritance.svg</title>
<desc>Created with sketchtool.</desc>
<g id="inheritance" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="mixin-inheritance.svg">
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="305" y="130.109589" width="178" height="58"></rect>
<text id="sayHi:-function-sayB" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="315" y="153.109589">sayHi: function</tspan>
<tspan x="315" y="168.109589">sayBye: function</tspan>
</text>
<text id="sayHiMixin" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="304" y="122.109589">sayHiMixin</tspan>
</text>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="305" y="23.109589" width="178" height="28"></rect>
<text id="say:-function" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="315" y="41.109589">say: function</tspan>
</text>
<text id="sayMixin" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="304" y="15.109589">sayMixin</tspan>
</text>
<path id="Line-2" d="M365.5,78.609589 L365.5,106.609589 L363.5,106.609589 L363.5,78.609589 L357.5,78.609589 L364.5,64.609589 L371.5,78.609589 L365.5,78.609589 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="[[Prototype]]" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="378" y="87">[[Prototype]]</tspan>
</text>
<rect id="Rectangle-1-Copy" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="8" y="130.109589" width="178" height="58"></rect>
<text id="constructor:-User-sa" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="18" y="146.109589">constructor: User</tspan>
<tspan x="18" y="161.109589">sayHi: function</tspan>
<tspan x="18" y="176.109589">sayBye: function</tspan>
</text>
<text id="User.prototype" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="7" y="122.109589">User.prototype</tspan>
</text>
<path id="Line-2-Copy" d="M68.5,218.609589 L68.5,246.609589 L66.5,246.609589 L66.5,218.609589 L60.5,218.609589 L67.5,204.609589 L74.5,218.609589 L68.5,218.609589 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line-2-Copy-2" d="M264.5,176.609589 L154.5,176.609589 L154.5,174.609589 L264.5,174.609589 L264.5,168.609589 L278.5,175.609589 L264.5,182.609589 L264.5,176.609589 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line-2-Copy-3" d="M264.5,160.609589 L154.5,160.609589 L154.5,158.609589 L264.5,158.609589 L264.5,152.609589 L278.5,159.609589 L264.5,166.609589 L264.5,160.609589 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="[[Prototype]]-Copy" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="81" y="227">[[Prototype]]</tspan>
</text>
<rect id="Rectangle-1-Copy-2" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="12" y="261" width="99" height="28"></rect>
<text id="name:-..." font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="18" y="278.109589">name: ...</tspan>
</text>
<text id="user" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="11" y="253">user</tspan>
</text>
<text id="[[HomeObject]" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="193" y="148">[[HomeObject]</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 4.4 KiB

BIN
1-js/09-classes/07-mixins/mixin-inheritance@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 66 KiB