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

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