title: Why do I get "Uncaught ReferenceError: this is not defined" in my class constructor?
body: <h2>Background</h2>
  
  <p>I am making a Chrome extension that prints a log once a page reloads. I have all my functions in one bug page, and so lately I decided to make my code readable and refactor it using <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes" rel="nofollow noreferrer">classes</a>.</p>
  
  <h2>Problem</h2>
  
  <p>I managed to get my extension up and running, but now, every time I load the page, a get a lot of errors.</p>
  
  <p>Namely, I get the error of <code>Uncaught ReferenceError: this is not defined</code> in my cat's constructor!</p>
  
  <p><strong>init.js</strong>:</p>
  
  <pre><code>"use strict";
  window.onload = function() {
    let cat = new Cat("Boby");
    console.log(cat.toString());
  };
  </code></pre>
  
  <p><strong>mammal.js</strong>:</p>
  
  <pre><code>"use strict";
  class Mammal{
    constructor(name){
      this.name = name;
      this.kingdom = "mammalia";
    }
  }
  </code></pre>
  
  <p><strong>cat.js</strong>:   </p>
  
  <pre><code>"use strict";
  class Cat extends Mammal{
    constructor(name){
      this.name = name;
      this.type = "Cat";
    }
  
    toString(){
      return this.type + " from kingdom " + this.kingdom + " has name " + this.name;
    }
  }
  </code></pre>
  
  <p>At first, I thought I had a problem with my JSON, since each class is in a separate file, perhaps the files were not being loaded in the correct order.</p>
  
  <p><strong>manifest.json</strong>:</p>
  
  <pre><code>{
    "manifest_version": 2,
    "name": "MyExtension",
    "description": "some tool",
    "version": "1.3.1",
    "permissions": [
      "storage",
      "tabs",
      "http://*/*",
      "https://*/*"
    ],
    "content_scripts": [
    {
      "matches": ["myWebsite"],
      "run_at": "document_end",
      "js": [
        "caseList/init.js",
        "caseList/mammal.js",
        "caseList/cat.js"
      ]
    }]
  }
  </code></pre>
  
  <p>However, after much debugging and testing, nothing works!
  The only thing that seems to 'work' is if I change <code>class Cat extends Mammal</code> to <code>class Cat</code>.</p>
  
  <p>But since cats are lovely mammals, I don't want to do that!</p>
  
  <h2>Questions:</h2>
  
  <ol>
  <li>Do Chrome extensions support ES6?</li>
  <li>How can I fix this code, while keeping class inheritance and separated files?</li>
  </ol>