{
    "componentChunkName": "component---src-templates-blog-post-js",
    "path": "/understanding-classes-in-javascript/",
    "result": {"data":{"markdownRemark":{"html":"<div class=\"table-of-contents\">\n<ul>\n<li><a href=\"#constructor\">Constructor</a></li>\n<li><a href=\"#instance\">Instance</a></li>\n<li><a href=\"#inheritance\">Inheritance</a></li>\n</ul>\n</div>\n<p>Classes are used to produce similar objects, reducing duplicate code and debugging time. We can think of them as templates for objects.</p>\n<h3 id=\"constructor\" style=\"position:relative;\"><a href=\"#constructor\" aria-label=\"constructor permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Constructor</h3>\n<p>By convention, we capitalize and CamelCase class names. JavaScript calls the constructor method every time it creates a new instance of a class.</p>\n<pre class=\"grvsc-container synthwave-84\" data-language=\"js\" data-index=\"0\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"1\"></span><span class=\"grvsc-source\"><span class=\"mtk10\">class</span><span class=\"mtk1\"> </span><span class=\"mtk9\">Book</span><span class=\"mtk1\"> {</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"2\"></span><span class=\"grvsc-source\"><span class=\"mtk1\">  </span><span class=\"mtk10\">constructor</span><span class=\"mtk1\">(</span><span class=\"mtk3 mtki\">title</span><span class=\"mtk1\">, </span><span class=\"mtk3 mtki\">author</span><span class=\"mtk1\">) {</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"3\"></span><span class=\"grvsc-source\"><span class=\"mtk1\">    </span><span class=\"mtk9 mtkb\">this</span><span class=\"mtk1\">.</span><span class=\"mtk7\">title</span><span class=\"mtk1\"> </span><span class=\"mtk12\">=</span><span class=\"mtk1\"> </span><span class=\"mtk3\">title</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"4\"></span><span class=\"grvsc-source\"><span class=\"mtk1\">    </span><span class=\"mtk9 mtkb\">this</span><span class=\"mtk1\">.</span><span class=\"mtk7\">author</span><span class=\"mtk1\"> </span><span class=\"mtk12\">=</span><span class=\"mtk1\"> </span><span class=\"mtk3\">author</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"5\"></span><span class=\"grvsc-source\"><span class=\"mtk1\">    </span><span class=\"mtk9 mtkb\">this</span><span class=\"mtk1\">.</span><span class=\"mtk7\">copiesSold</span><span class=\"mtk1\"> </span><span class=\"mtk12\">=</span><span class=\"mtk1\"> </span><span class=\"mtk7\">0</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"6\"></span><span class=\"grvsc-source\"><span class=\"mtk1\">  }</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"7\"></span><span class=\"grvsc-source\"></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"8\"></span><span class=\"grvsc-source\"><span class=\"mtk1\">  </span><span class=\"mtk6\">sellOneCopy</span><span class=\"mtk1\">() {</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"9\"></span><span class=\"grvsc-source\"><span class=\"mtk1\">    </span><span class=\"mtk9 mtkb\">this</span><span class=\"mtk1\">.</span><span class=\"mtk7\">copiesSold</span><span class=\"mtk10\">++</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"10\"></span><span class=\"grvsc-source\"><span class=\"mtk1\">  }</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"11\"></span><span class=\"grvsc-source\"><span class=\"mtk1\">}</span></span></span></code></pre>\n<p>JavaScript will invoke the constructor method every time we create a new instance of our <del>Book</del> class. The constructor method accepts two arguments: <del>title</del> &#x26; <del>author</del>.</p>\n<p>The <del>this</del> keyword inside the constructor refers to an instance of the <del>Book</del> class. We use <del>this</del> to set the value of <del>Book</del> class instances' <del>title</del> and <del>author</del> properties to the <del>title</del> and <del>author</del> input parameters.</p>\n<h3 id=\"instance\" style=\"position:relative;\"><a href=\"#instance\" aria-label=\"instance permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Instance</h3>\n<p>An instance is an object that contains the property names and methods of a class, but with unique property values.</p>\n<p>We use the <del>new</del> keyword to create an instance of our <del>Book</del> class. The <del>new</del> keyword runs the constructor, runs the code inside it and returns the new instance.</p>\n<p>We call a method by appending the instance with a period (<del>.</del>) and the method name including opening and closing parentheses.</p>\n<pre class=\"grvsc-container synthwave-84\" data-language=\"js\" data-index=\"1\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"1\"></span><span class=\"grvsc-source\"><span class=\"mtk4 mtki\">// myBook variable stores an instance of our Book class.</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"2\"></span><span class=\"grvsc-source\"><span class=\"mtk10\">const</span><span class=\"mtk1\"> </span><span class=\"mtk3\">myBook</span><span class=\"mtk1\"> </span><span class=\"mtk12\">=</span><span class=\"mtk1\"> </span><span class=\"mtk10\">new</span><span class=\"mtk1\"> </span><span class=\"mtk9\">Book</span><span class=\"mtk1\">(</span><span class=\"mtk16\">&quot;A Starry Night&quot;</span><span class=\"mtk1\">, </span><span class=\"mtk16\">&quot;Hemanta Sundaray&quot;</span><span class=\"mtk1\">)</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"3\"></span><span class=\"grvsc-source\"></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"4\"></span><span class=\"grvsc-source\"><span class=\"mtk9\">console</span><span class=\"mtk1\">.</span><span class=\"mtk6\">log</span><span class=\"mtk1\">(</span><span class=\"mtk3\">myBook</span><span class=\"mtk1\">)</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"5\"></span><span class=\"grvsc-source\"><span class=\"mtk4 mtki\">//Book { title: &#39;A Starry Night&#39;, author: &#39;Hemanta Sundaray&#39; }</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"6\"></span><span class=\"grvsc-source\"></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"7\"></span><span class=\"grvsc-source\"><span class=\"mtk9\">console</span><span class=\"mtk1\">.</span><span class=\"mtk6\">log</span><span class=\"mtk1\">(</span><span class=\"mtk3\">myBook</span><span class=\"mtk1\">.</span><span class=\"mtk7\">author</span><span class=\"mtk1\">)</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"8\"></span><span class=\"grvsc-source\"><span class=\"mtk4 mtki\">// Hemanta Sundaray</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"9\"></span><span class=\"grvsc-source\"></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"10\"></span><span class=\"grvsc-source\"><span class=\"mtk3\">myBook</span><span class=\"mtk1\">.</span><span class=\"mtk6\">sellOneCopy</span><span class=\"mtk1\">()</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"11\"></span><span class=\"grvsc-source\"></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"12\"></span><span class=\"grvsc-source\"><span class=\"mtk9\">console</span><span class=\"mtk1\">.</span><span class=\"mtk6\">log</span><span class=\"mtk1\">(</span><span class=\"mtk3\">myBook</span><span class=\"mtk1\">.</span><span class=\"mtk7\">copiesSold</span><span class=\"mtk1\">)</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"13\"></span><span class=\"grvsc-source\"><span class=\"mtk4 mtki\">// 1</span></span></span></code></pre>\n<h3 id=\"inheritance\" style=\"position:relative;\"><a href=\"#inheritance\" aria-label=\"inheritance permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Inheritance</h3>\n<p>When multiple classes share properties and methods, we use inheritance to reduce the amount of code we need to write.</p>\n<p>With inheritance, we create a parent class(also known as a superclass) with properties and methods multiple child classes(also known as subclasses) share. The child classes inherit properties and methods from the parent class.</p>\n<p>Let’s create a child class named <del>Ebook</del> by extending the shared properties and methods in the <del>Book</del> parent class.</p>\n<pre class=\"grvsc-container synthwave-84\" data-language=\"js\" data-index=\"2\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"1\"></span><span class=\"grvsc-source\"><span class=\"mtk10\">class</span><span class=\"mtk1\"> </span><span class=\"mtk9\">Ebook</span><span class=\"mtk1\"> </span><span class=\"mtk10\">extends</span><span class=\"mtk1\"> </span><span class=\"mtk11\">Book</span><span class=\"mtk1\"> {</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"2\"></span><span class=\"grvsc-source\"><span class=\"mtk1\">  </span><span class=\"mtk10\">constructor</span><span class=\"mtk1\">(</span><span class=\"mtk3 mtki\">title</span><span class=\"mtk1\">, </span><span class=\"mtk3 mtki\">author</span><span class=\"mtk1\">, </span><span class=\"mtk3 mtki\">fileSize</span><span class=\"mtk1\">) {</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"3\"></span><span class=\"grvsc-source\"><span class=\"mtk1\">    </span><span class=\"mtk9 mtkb\">super</span><span class=\"mtk1\">(</span><span class=\"mtk3\">title</span><span class=\"mtk1\">, </span><span class=\"mtk3\">author</span><span class=\"mtk1\">)</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"4\"></span><span class=\"grvsc-source\"><span class=\"mtk1\">    </span><span class=\"mtk9 mtkb\">this</span><span class=\"mtk1\">.</span><span class=\"mtk7\">fileSize</span><span class=\"mtk1\"> </span><span class=\"mtk12\">=</span><span class=\"mtk1\"> </span><span class=\"mtk3\">fileSize</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"5\"></span><span class=\"grvsc-source\"><span class=\"mtk1\">  }</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"6\"></span><span class=\"grvsc-source\"><span class=\"mtk1\">}</span></span></span></code></pre>\n<ul>\n<li>\n<p><strong>extends</strong>: The <del>extends</del> keyword makes the methods of the <del>Book</del> class available inside the <del>Ebook</del> class.</p>\n</li>\n<li>\n<p><strong>super</strong>: The <del>super</del> keyword calls the constructor of the parent class. In our case, <del>super(title, author)</del> passes the <del>title</del> and <del>author</del> arguments of the <del>Ebook</del> class to the constructor of the <del>Book</del> class. When the <del>Book</del> constructor runs, it sets <del>this.title=title</del> and <del>this.author=author</del> for new <del>Ebook</del> instances.</p>\n</li>\n</ul>\n<blockquote>\n<p><strong>Note</strong>: We must always call the <del>super</del> method before we can use the <del>this</del> keyword - if you don’t, JavaScript will throw a reference error.</p>\n</blockquote>\n<p>In addition to inherited features, child classes can contain their own properties and methods. <del>fileSize</del> is a new property that is unique to the <del>Ebook</del> class, so we set it in the <del>Ebook</del> constructor.</p>\n<pre class=\"grvsc-container synthwave-84\" data-language=\"js\" data-index=\"3\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"1\"></span><span class=\"grvsc-source\"><span class=\"mtk10\">class</span><span class=\"mtk1\"> </span><span class=\"mtk9\">Ebook</span><span class=\"mtk1\"> </span><span class=\"mtk10\">extends</span><span class=\"mtk1\"> </span><span class=\"mtk11\">Book</span><span class=\"mtk1\"> {</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"2\"></span><span class=\"grvsc-source\"><span class=\"mtk1\">  </span><span class=\"mtk10\">constructor</span><span class=\"mtk1\">(</span><span class=\"mtk3 mtki\">title</span><span class=\"mtk1\">, </span><span class=\"mtk3 mtki\">author</span><span class=\"mtk1\">, </span><span class=\"mtk3 mtki\">fileSize</span><span class=\"mtk1\">) {</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"3\"></span><span class=\"grvsc-source\"><span class=\"mtk1\">    </span><span class=\"mtk9 mtkb\">super</span><span class=\"mtk1\">(</span><span class=\"mtk3\">title</span><span class=\"mtk1\">, </span><span class=\"mtk3\">author</span><span class=\"mtk1\">)</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"4\"></span><span class=\"grvsc-source\"><span class=\"mtk1\">    </span><span class=\"mtk9 mtkb\">this</span><span class=\"mtk1\">.</span><span class=\"mtk7\">fileSize</span><span class=\"mtk1\"> </span><span class=\"mtk12\">=</span><span class=\"mtk1\"> </span><span class=\"mtk3\">fileSize</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"5\"></span><span class=\"grvsc-source\"><span class=\"mtk1\">  }</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"6\"></span><span class=\"grvsc-source\"><span class=\"mtk1\">}</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"7\"></span><span class=\"grvsc-source\"></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"8\"></span><span class=\"grvsc-source\"><span class=\"mtk10\">const</span><span class=\"mtk1\"> </span><span class=\"mtk3\">myEbook</span><span class=\"mtk1\"> </span><span class=\"mtk12\">=</span><span class=\"mtk1\"> </span><span class=\"mtk10\">new</span><span class=\"mtk1\"> </span><span class=\"mtk9\">Ebook</span><span class=\"mtk1\">(</span><span class=\"mtk16\">&quot;Learn TypeScript&quot;</span><span class=\"mtk1\">, </span><span class=\"mtk16\">&quot;Hemanta Sundaray&quot;</span><span class=\"mtk1\">, </span><span class=\"mtk16\">&quot;1MB&quot;</span><span class=\"mtk1\">)</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"9\"></span><span class=\"grvsc-source\"></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"10\"></span><span class=\"grvsc-source\"><span class=\"mtk3\">myEbook</span><span class=\"mtk1\">.</span><span class=\"mtk6\">sellOneCopy</span><span class=\"mtk1\">()</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"11\"></span><span class=\"grvsc-source\"></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"12\"></span><span class=\"grvsc-source\"><span class=\"mtk9\">console</span><span class=\"mtk1\">.</span><span class=\"mtk6\">log</span><span class=\"mtk1\">(</span><span class=\"mtk3\">myEbook</span><span class=\"mtk1\">.</span><span class=\"mtk7\">copiesSold</span><span class=\"mtk1\">)</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"13\"></span><span class=\"grvsc-source\"><span class=\"mtk4 mtki\">// 1</span></span></span></code></pre>\n<p>In the code above, because the properties and methods of the <del>Book</del> parent class are available to the <del>Ebook</del> child class, we are able to call the <del>sellOneCopy()</del> method on the <del>myEbook</del> instance.</p>\n<style class=\"grvsc-styles\">\n  .grvsc-container {\n    overflow: auto;\n    position: relative;\n    -webkit-overflow-scrolling: touch;\n    padding-top: 1rem;\n    padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem));\n    padding-bottom: 1rem;\n    padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem));\n    border-radius: 8px;\n    border-radius: var(--grvsc-border-radius, 8px);\n    font-feature-settings: normal;\n    line-height: 1.4;\n  }\n  \n  .grvsc-code {\n    display: table;\n  }\n  \n  .grvsc-line {\n    display: table-row;\n    box-sizing: border-box;\n    width: 100%;\n    position: relative;\n  }\n  \n  .grvsc-line > * {\n    position: relative;\n  }\n  \n  .grvsc-gutter-pad {\n    display: table-cell;\n    padding-left: 0.75rem;\n    padding-left: calc(var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)) / 2);\n  }\n  \n  .grvsc-gutter {\n    display: table-cell;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    user-select: none;\n  }\n  \n  .grvsc-gutter::before {\n    content: attr(data-content);\n  }\n  \n  .grvsc-source {\n    display: table-cell;\n    padding-left: 1.5rem;\n    padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem));\n    padding-right: 1.5rem;\n    padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));\n  }\n  \n  .grvsc-source:empty::after {\n    content: ' ';\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    user-select: none;\n  }\n  \n  .grvsc-gutter + .grvsc-source {\n    padding-left: 0.75rem;\n    padding-left: calc(var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)) / 2);\n  }\n  \n  /* Line transformer styles */\n  \n  .grvsc-has-line-highlighting > .grvsc-code > .grvsc-line::before {\n    content: ' ';\n    position: absolute;\n    width: 100%;\n  }\n  \n  .grvsc-line-diff-add::before {\n    background-color: var(--grvsc-line-diff-add-background-color, rgba(0, 255, 60, 0.2));\n  }\n  \n  .grvsc-line-diff-del::before {\n    background-color: var(--grvsc-line-diff-del-background-color, rgba(255, 0, 20, 0.2));\n  }\n  \n  .grvsc-line-number {\n    padding: 0 2px;\n    text-align: right;\n    opacity: 0.7;\n  }\n  \n  .synthwave-84 { background-color: #262335; }\n  .synthwave-84 .mtkb { font-weight: bold; }\n  .synthwave-84 .mtki { font-style: italic; }\n  .synthwave-84 .mtk10 { color: #FEDE5D; }\n  .synthwave-84 .mtk1 { color: #FFFFFF; }\n  .synthwave-84 .mtk9 { color: #FE4450; }\n  .synthwave-84 .mtk3 { color: #FF7EDB; }\n  .synthwave-84 .mtk7 { color: #2EE2FA; }\n  .synthwave-84 .mtk12 { color: #FFFFFFEE; }\n  .synthwave-84 .mtk6 { color: #36F9F6; }\n  .synthwave-84 .mtk4 { color: #848BBD; }\n  .synthwave-84 .mtk16 { color: #FF8B39; }\n  .synthwave-84 .mtk11 { color: #D50; }\n  .synthwave-84 .grvsc-line-highlighted::before {\n    background-color: var(--grvsc-line-highlighted-background-color, rgba(255, 255, 255, 0.1));\n    box-shadow: inset var(--grvsc-line-highlighted-border-width, 4px) 0 0 0 var(--grvsc-line-highlighted-border-color, rgba(255, 255, 255, 0.5));\n  }\n</style>","frontmatter":{"title":"Understanding Classes in JavaScript","date":"2021-06-17"}}},"pageContext":{"slug":"/understanding-classes-in-javascript/","prev":{"fields":{"slug":"/responsive-typography-with-css-clamp-function/"},"frontmatter":{"modules":null}},"next":{"fields":{"slug":"/sticky-footer-using-flexbox-and-grid/"},"frontmatter":{"modules":null}}}},
    "staticQueryHashes": ["3159585216"]}