title: Cannot access parent class variable from child class in javascript
body: <p>I have two classes, a parent class and a child class that inherits from the parent class. When initializing the child class I call the constructor of the parent class with the <code>super()</code> keyword. Then I attempt to access the parent class variable in a child method. However, when I attempt to do this I receive this error: <code>Cannot read property 'undefined'</code>. Why is the variable undefined? Does the constructor not work as I expected it to?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    class Book {
        constructor(title, author, chapters) {
          this.title = title; //string
          this.author = author; //string
          this.chapters = chapters; //array of strings
        }
        getTitle() {
          return this.title;
        }
        getAuthor() {
          return this.author;
        }
      }
      class Chapter extends Book {
        constructor(title, author, chapters, numberPages, subject, time, chapterIndex) {
          super(title, author, chapters);
          this.numberPages = numberPages;
          this.subject = subject;
          this.time = time;
          this.chapterIndex = chapterIndex;
        }
        getChapterText() {
          return this.chapters[this.chapterIndex];
        }
      }
  
      var chapterOne = new Chapter("title", "author", ["lorem ipsum...", "lorem ipsum...", "lorem ipsum..."], 42, "about lorem ipsum", "3:01", 0); //book_object is an array of everything the chapter constructor needs
      console.log(chapterOne.getChapterText());</code></pre>
  </div>
  </div>
  </p>
  
  <p>I've also tried using <code>super.chapters</code> to access the parent class variable, but I just got this error: <code>unexpected keyword super</code>.</p>
  
  <p><strong>Update</strong></p>
  
  <p>Maybe using <code>${book_object}</code> made my question too confusing. This javascript is running as JSP (java server page). Therefore it's being compiled before being served. I updated my question to reduce confusion. </p>
  
  <p><strong>Update 2</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    class Book {
        constructor(title, author, chapters) {
          this.title = title; //string
          this.author = author; //string
          this.chapters = chapters; //array of strings
        }
        getTitle() {
          return this.title;
        }
        getAuthor() {
          return this.author;
        }
      }
      class Chapter extends Book {
        constructor(title, author, chapters, numberPages, subject, time, chapterIndex) {
          super(title, author, chapters);
          this.numberPages = numberPages;
          this.subject = subject;
          this.time = time;
          this.currentChapter = this.getChapterText(); //I forgot to include this line in my original question.
          this.chapterIndex = chapterIndex;
        }
        getChapterText() {
          return this.chapters[this.chapterIndex];
        }
      }
  
      var chapterOne = new Chapter("title", "author", ["lorem ipsum...", "lorem ipsum...", "lorem ipsum..."], 42, "about lorem ipsum", "3:01", 0); //book_object is an array of everything the chapter constructor needs
      console.log(chapterOne.currentChapter);</code></pre>
  </div>
  </div>
  </p>
  
  <p>I just realized that in my actual code (the code in this question is based on my actual code) I was calling my child class method in my child class constructor, and in that method I was trying to access my parent class variable. Here is a snippet of that. Turns out my issue was this all along. Would someone care to explain why this happens?</p>