How to import/export a class in Vanilla JavaScript (JS)

Question

I went through this and I’ve a solution with a third js file as module.
rectangle.js will be same and myHifiRectangle.js file have only one modification.

import Rectangle from './rectangle.js';

export default class MyHiFiRectangle extends Rectangle {
      constructor(height, width) {
      super(height,width);
      this.foo= "bar";  
   }
}

Now, we need a third file which will be a module file, let say, script.js

import MyHiFiRectangle from './myHifiRectangle.js'

var v = new MyHiFiRectangle(2,4);
console.log(v.foo);

Now, the third file, script.js should be made a module. More on modules here. I have all three files under modelJS folder.

<script type="module" src="https://stackoverflow.com/modelJS/script.js"></script>

Now, when you run, you should see ‘bar’ getting printed in the developer tool’s console tab.

Leave a Comment Cancel reply