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

Embed font to SVG

Browse source
This commit is contained in:
Ilya Kantor 2019-08-11 14:17:38 +03:00
parent 1310171dd7
commit 4d44df6a3a
226 changed files with 225 additions and 11893 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,67 +1 @@
<?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>
<svg xmlns="http://www.w3.org/2000/svg" width="458" height="344" viewBox="0 0 458 344"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/pack/modules/styles/blocks/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/pack/modules/styles/blocks/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/pack/modules/styles/blocks/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="inheritance" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="rabbit-extends-object.svg"><path id="Rectangle-1" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M228 61v68h178V61H228z"/><text id="call:-function-bind:" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="238" y="80">call: function</tspan> <tspan x="238" y="95">bind: function</tspan> <tspan x="238" y="110">...</tspan></text><path id="Rectangle-1-Copy" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M228 303h178v28H228z"/><text id="Function.prototype" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="227" y="53">Function.prototype</tspan></text><path id="Rectangle-1-Copy-4" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M228 202v28h178v-28H228z"/><text id="constructor" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="238" y="220">constructor</tspan></text><text id="Object" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="227" y="194">Object</tspan></text><text id="Rabbit" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="233" y="292">Rabbit</tspan></text><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M317.5 157.5v28h-2v-28h-6l7-14 7 14h-6z"/><text id="[[Prototype]]" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="326" y="167">[[Prototype]]</tspan></text><path id="Line-Copy-3" fill="#EE6B47" fill-rule="nonzero" d="M317.5 261.5v28h-2v-28h-6l7-14 7 14h-6z"/><text id="[[Prototype]]-Copy" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="326" y="271">[[Prototype]]</tspan></text><text id="constructor-copy" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="236" y="321">constructor</tspan></text><path id="Rectangle-1-Copy-3" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M8 61h178v68H8z"/><text id="call:-function-bind:-copy" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="18" y="80">call: function</tspan> <tspan x="18" y="95">bind: function</tspan> <tspan x="18" y="110">...</tspan></text><path id="Rectangle-1-Copy-2" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M8 201h178v28H8z"/><text id="Function.prototype-Copy" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="7" y="53">Function.prototype</tspan></text><text id="Rabbit-Copy" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="13" y="190">Rabbit</tspan></text><path id="Line-Copy-4" fill="#EE6B47" fill-rule="nonzero" d="M97.5 159.5v28h-2v-28h-6l7-14 7 14h-6z"/><text id="[[Prototype]]-Copy-2" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="106" y="169">[[Prototype]]</tspan></text><text id="constructor-copy-2" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="16" y="219">constructor</tspan></text><text id="class-Rabbit" fill="#EE6B47" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="14" y="18">class Rabbit</tspan></text><text id="class-Rabbit-extends" fill="#EE6B47" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="224" y="18">class Rabbit extends Object</tspan></text></g></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5 KiB

After

Width:  |  Height:  |  Size: 4.1 KiB

Before After
Before After

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

@ -1,64 +1 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="467px" height="316px" viewBox="0 0 467 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="242" 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="252" y="42">constructor: Animal</tspan>
<tspan x="252" y="57">run: function</tspan>
<tspan x="252" y="72">stop: function</tspan>
</text>
<rect id="Rectangle-1-Copy" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="242" 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="241" y="15">Animal.prototype</tspan>
</text>
<rect id="Rectangle-1-Copy-4" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="242" 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="252" y="185">constructor: Rabbit</tspan>
<tspan x="252" 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="241" 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="247" y="278">new Rabbit</tspan>
</text>
<path id="Line" d="M331.5,110.5 L331.5,138.5 L329.5,138.5 L329.5,110.5 L323.5,110.5 L330.5,96.5 L337.5,110.5 L331.5,110.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line-Copy" d="M211,48 L132,48 L132,46 L211,46 L211,40 L225,47 L211,54 L211,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="340" y="120">[[Prototype]]</tspan>
</text>
<path id="Line-Copy-3" d="M331.5,244.5 L331.5,272.5 L329.5,272.5 L329.5,244.5 L323.5,244.5 L330.5,230.5 L337.5,244.5 L331.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="340" 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="M211,190 L132,190 L132,188 L211,188 L211,182 L225,189 L211,196 L211,190 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="253" 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>
<svg xmlns="http://www.w3.org/2000/svg" width="467" height="316" viewBox="0 0 467 316"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/pack/modules/styles/blocks/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/pack/modules/styles/blocks/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/pack/modules/styles/blocks/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="inheritance" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="animal-rabbit-extends.svg"><path id="Rectangle-1" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M242 23h185v64H242z"/><text id="constructor:-Animal" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="252" y="42">constructor: Animal</tspan> <tspan x="252" y="57">run: function</tspan> <tspan x="252" y="72">stop: function</tspan></text><path id="Rectangle-1-Copy" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M242 286h185v28H242z"/><text id="Animal.prototype" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="241" y="15">Animal.prototype</tspan></text><path id="Rectangle-1-Copy-4" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M242 166h185v48H242z"/><text id="constructor:-Rabbit" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="252" y="185">constructor: Rabbit</tspan> <tspan x="252" y="200">hide: function</tspan></text><text id="Rabbit.prototype" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="241" y="158">Rabbit.prototype</tspan></text><path id="Rectangle-1-Copy-2" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M11 23h105v48H11z"/><text id="Animal" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="10" y="15">Animal</tspan></text><path id="Rectangle-1-Copy-3" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M11 166h105v48H11z"/><text id="Rabbit" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="10" y="158">Rabbit</tspan></text><text id="new-Rabbit" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="247" y="278">new Rabbit</tspan></text><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M331.5 110.5v28h-2v-28h-6l7-14 7 14h-6z"/><path id="Line-Copy" fill="#EE6B47" fill-rule="nonzero" d="M211 48h-79v-2h79v-6l14 7-14 7v-6z"/><text id="[[Prototype]]" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="340" y="120">[[Prototype]]</tspan></text><path id="Line-Copy-3" fill="#EE6B47" fill-rule="nonzero" d="M331.5 244.5v28h-2v-28h-6l7-14 7 14h-6z"/><text id="[[Prototype]]-Copy" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="340" y="254">[[Prototype]]</tspan></text><text id="prototype" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="139" y="35">prototype</tspan></text><path id="Line-Copy-2" fill="#EE6B47" fill-rule="nonzero" d="M211 190h-79v-2h79v-6l14 7-14 7v-6z"/><text id="prototype-copy" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="139" y="176">prototype</tspan></text><text id="name:-&quot;White-Rabbit&quot;" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="253" y="304">name: &quot;White Rabbit&quot;</tspan></text><text id="constructor" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="17" y="41">constructor</tspan></text><text id="constructor-copy" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="17" y="183">constructor</tspan></text></g></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.8 KiB

After

Width:  |  Height:  |  Size: 4 KiB

Before After
Before After

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

@ -1,41 +1 @@
<?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>
<svg xmlns="http://www.w3.org/2000/svg" width="233" height="316" viewBox="0 0 233 316"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/pack/modules/styles/blocks/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/pack/modules/styles/blocks/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/pack/modules/styles/blocks/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="inheritance" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="class-inheritance-array-object.svg"><path id="Rectangle-1" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M13 158h219v58H13z"/><text id="slice:-function" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="23" y="181">slice: function</tspan> <tspan x="23" y="196">...</tspan></text><text id="Array.prototype" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="12" y="150">Array.prototype</tspan></text><text id="arr" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="12" y="267">arr</tspan></text><path id="Rectangle-1" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M13 25h219v58H13z"/><text id="hasOwnProperty:-func" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="23" y="48">hasOwnProperty: function</tspan> <tspan x="23" y="63">...</tspan></text><text id="Object.prototype" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="12" y="17">Object.prototype</tspan></text><path id="Rectangle-1" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M13 275h219v28H13z"/><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M73.5 238.5v28h-2v-28h-6l7-14 7 14h-6z"/><path id="Line-2" fill="#EE6B47" fill-rule="nonzero" d="M73.5 106.5v28h-2v-28h-6l7-14 7 14h-6z"/><text id="[1,-2,-3]" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="20" y="293">[1, 2, 3]</tspan></text><text id="[[Prototype]]" fill="#EE6B47" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="86" y="115">[[Prototype]]</tspan></text><text id="[[Prototype]]-Copy" fill="#EE6B47" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="86" y="247">[[Prototype]]</tspan></text></g></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3 KiB

After

Width:  |  Height:  |  Size: 2.5 KiB

Before After
Before After

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

@ -1,62 +1 @@
<?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>
<svg xmlns="http://www.w3.org/2000/svg" width="589" height="467" viewBox="0 0 589 467"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/pack/modules/styles/blocks/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/pack/modules/styles/blocks/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/pack/modules/styles/blocks/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="inheritance" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="class-inheritance-rabbit-animal-2.svg"><path id="Rectangle-1" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M11 336h220v28H11z"/><text id="jump:-function" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="21" y="354">jump: function</tspan></text><text id="Rabbit.prototype" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="10" y="328">Rabbit.prototype</tspan></text><text id="rabbit" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="10" y="424">rabbit</tspan></text><path id="Rectangle-1" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M11 230h220v28H11z"/><text id="eat:-function" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="21" y="250">eat: function</tspan></text><text id="Animal.prototype" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="10" y="222">Animal.prototype</tspan></text><path id="Rectangle-1" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M11 433h220v28H11z"/><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M71.5 392.5v28h-2v-28h-6l7-14 7 14h-6z"/><path id="Line-2" fill="#EE6B47" fill-rule="nonzero" d="M71.5 284.5v28h-2v-28h-6l7-14 7 14h-6z"/><text id="name:-&quot;White-Rabbit&quot;" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="18" y="451">name: &quot;White Rabbit&quot;</tspan></text><text id="[[Prototype]]" fill="#EC6B4E" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="83" y="303">[[Prototype]]</tspan></text><text id="[[Prototype]]-Copy" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="83" y="406">[[Prototype]]</tspan></text><text id="Rabbit.prototype.__p" fill="#EC6B4E" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="84" y="283">Rabbit.prototype.__proto__ = Animal.prototype sets this</tspan></text><path id="Rectangle-1" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M11 95h220v58H11z"/><text id="toString:-function-h" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><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" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="10" y="87">Object.prototype</tspan></text><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M71.5 175.5v28h-2v-28h-6l7-14 7 14h-6z"/><text id="[[Prototype]]" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="80" y="183">[[Prototype]]</tspan></text><path id="Line-2" fill="#EE6B47" fill-rule="nonzero" d="M71.5 43.5v28h-2v-28h-6l7-14 7 14h-6z"/><text id="[[Prototype]]" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="80" y="51">[[Prototype]]</tspan></text><text id="null" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="56" y="18">null</tspan></text></g></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.7 KiB

After

Width:  |  Height:  |  Size: 3.9 KiB

Before After
Before After

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

@ -1,39 +1 @@
<?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>
<svg xmlns="http://www.w3.org/2000/svg" width="198" height="258" viewBox="0 0 198 258"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/pack/modules/styles/blocks/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/pack/modules/styles/blocks/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/pack/modules/styles/blocks/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="inheritance" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="class-inheritance-rabbit-animal.svg"><path id="Rectangle-1" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M11 128h179v28H11z"/><text id="methods-of-Rabbit" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="19" y="146">methods of Rabbit</tspan></text><text id="Rabbit.prototype" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="10" y="120">Rabbit.prototype</tspan></text><text id="rabbit" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="10" y="213">rabbit</tspan></text><path id="Rectangle-1" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M11 21h179v28H11z"/><text id="methods-of-Animal" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="19" y="38">methods of Animal</tspan></text><text id="Animal.prototype" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="10" y="13">Animal.prototype</tspan></text><path id="Rectangle-1" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M11 222h179v28H11z"/><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M71.5 181.5v28h-2v-28h-6l7-14 7 14h-6z"/><path id="Line-2" fill="#EE6B47" fill-rule="nonzero" d="M71.5 76.5v28h-2v-28h-6l7-14 7 14h-6z"/><text id="[[Prototype]]" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="80" y="86">[[Prototype]]</tspan></text><text id="[[Prototype]]-Copy" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="80" y="190">[[Prototype]]</tspan></text><text id="properties-of-rabbit" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="19" y="239">properties of rabbit</tspan></text></g></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.9 KiB

After

Width:  |  Height:  |  Size: 2.5 KiB

Before After
Before After

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

@ -1,39 +1 @@
<?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 L440,87 L440,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 L439,196 L439,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="M208.5,38 L130,38 L130,36 L208.5,36 L208.5,30 L222.5,37 L208.5,44 L208.5,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>
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="449" height="211" viewBox="0 0 449 211"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/pack/modules/styles/blocks/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/pack/modules/styles/blocks/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/pack/modules/styles/blocks/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="inheritance" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="rabbit-animal-independent-animal.svg"><path id="Rectangle-1" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M238 23v64h202V23H238z"/><text id="constructor:-Animal" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"> <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" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="237" y="15">Animal.prototype</tspan></text><path id="Rectangle-1-Copy-2" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M11 23h105v28H11z"/><text id="Animal" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="10" y="15">Animal</tspan></text><path id="Rectangle-1-Copy-3" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M237 168v28h202v-28H237z"/><text id="new-Animal" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="239" y="160">new Animal</tspan></text><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M327.5 112.5v28h-2v-28h-6l7-14 7 14h-6z"/><path id="Line-Copy" fill="#EE6B47" fill-rule="nonzero" d="M208.5 38H130v-2h78.5v-6l14 7-14 7v-6z"/><text id="[[Prototype]]" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="336" y="122">[[Prototype]]</tspan></text><text id="prototype" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="133" y="25">prototype</tspan></text><text id="name:-&quot;My-animal&quot;" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="249" y="186">name: &quot;My animal&quot;</tspan></text></g></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.8 KiB

After

Width:  |  Height:  |  Size: 2.4 KiB

Before After
Before After

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

@ -1,38 +1 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="463px" height="202px" viewBox="0 0 463 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="M243,23 L243,71 L421,71 L421,23 L243,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="253" y="29"></tspan>
<tspan x="253" y="44">constructor: Rabbit</tspan>
<tspan x="253" 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="242" y="15">Rabbit.prototype</tspan>
</text>
<rect id="Rectangle-1-Copy-2" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="8" y="23" width="108" height="28"></rect>
<text id="Rabbit" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="7" y="15">Rabbit</tspan>
</text>
<path d="M242,151 L242,179 L420,179 L420,151 L242,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="244" y="143">new Rabbit</tspan>
</text>
<path id="Line" d="M332.5,95.5 L332.5,123.5 L330.5,123.5 L330.5,95.5 L324.5,95.5 L331.5,81.5 L338.5,95.5 L332.5,95.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line-Copy" d="M212,38 L132,38 L132,36 L212,36 L212,30 L226,37 L212,44 L212,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="341" 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="254" y="169">name: "My rabbit"</tspan>
</text>
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="463" height="202" viewBox="0 0 463 202"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/pack/modules/styles/blocks/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/pack/modules/styles/blocks/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/pack/modules/styles/blocks/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="inheritance" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="rabbit-animal-independent-rabbit.svg"><path id="Rectangle-1" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M243 23v48h178V23H243z"/><text id="constructor:-Rabbit" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"> <tspan x="253" y="44">constructor: Rabbit</tspan> <tspan x="253" y="59">hide: function</tspan></text><text id="Rabbit.prototype" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="242" y="15">Rabbit.prototype</tspan></text><path id="Rectangle-1-Copy-2" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M8 23h108v28H8z"/><text id="Rabbit" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="7" y="15">Rabbit</tspan></text><path id="Rectangle-1-Copy-3" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M242 151v28h178v-28H242z"/><text id="new-Rabbit" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="244" y="143">new Rabbit</tspan></text><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M332.5 95.5v28h-2v-28h-6l7-14 7 14h-6z"/><path id="Line-Copy" fill="#EE6B47" fill-rule="nonzero" d="M212 38h-80v-2h80v-6l14 7-14 7v-6z"/><text id="[[Prototype]]" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="341" y="105">[[Prototype]]</tspan></text><text id="prototype" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="139" y="25">prototype</tspan></text><text id="name:-&quot;My-rabbit&quot;" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="254" y="169">name: &quot;My rabbit&quot;</tspan></text></g></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.8 KiB

After

Width:  |  Height:  |  Size: 2.4 KiB

Before After
Before After

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

@ -1,44 +1 @@
<?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>
<svg xmlns="http://www.w3.org/2000/svg" width="395" height="192" viewBox="0 0 395 192"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/pack/modules/styles/blocks/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/pack/modules/styles/blocks/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/pack/modules/styles/blocks/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="inheritance" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="super-homeobject-wrong.svg"><path id="Rectangle-1" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M237 30v28h98V30h-98z"/><text id="sayHi" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="247" y="48">sayHi</tspan></text><text id="plant" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="241" y="22">plant</tspan></text><path id="Rectangle-1-Copy-4" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M237 143v28h98v-28h-98z"/><text id="sayHi" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="247" y="162">sayHi</tspan></text><text id="tree" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="241" y="135">tree</tspan></text><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M288.5 84.5v28h-2v-28h-6l7-14 7 14h-6z"/><path id="Line-Copy" fill="#EE6B47" fill-rule="nonzero" d="M121.004 156.55l125 .454-.008 2-125-.453-.021 6L107 157.5l14.025-6.95-.021 6z"/><path id="Rectangle-1-Copy-3" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M8 30h98v28H8z"/><text id="sayHi" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="18" y="48">sayHi</tspan></text><path id="Rectangle-1-Copy-2" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M8 143h98v28H8z"/><text id="animal" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="12" y="22">animal</tspan></text><text id="rabbit" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="12" y="131">rabbit</tspan></text><path id="Line-Copy-4" fill="#EE6B47" fill-rule="nonzero" d="M59.5 86.5v28h-2v-28h-6l7-14 7 14h-6z"/><text id="[[HomeObject]]" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="115" y="142">[[HomeObject]]</tspan></text><text id="sayHi" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="16" y="162">sayHi</tspan></text></g></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.3 KiB

After

Width:  |  Height:  |  Size: 2.7 KiB

Before After
Before After

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

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

Before

Width:  |  Height:  |  Size: 151 KiB

After

Width:  |  Height:  |  Size: 68 KiB

Before After
Before After