Javascript - Extend An Es6 Class In Es5

I am using the following code for a slider with Siema: https://codepen.io/pawelgrzybek/pen/boQQWy Which uses extending classes to add dots to the slide. All works well except that

Solution 1:

You would then replace the class with an old-style constructor function, and then manipulate the prototype to set up the prototype hierarchy:

functionSiemaWithDots() {
    Siema.apply(this, arguments);
}

SiemaWithDots.prototype = Object.create(Siema.prototype);
SiemaWithDots.prototype.constructor = SiemaWithDots;
SiemaWithDots.prototype.addDots = function () {
    // ... your code ...
};
SiemaWithDots.prototype.updateDots = function () {
    // ... your code ...
};

Solution 2:

Currently, your code contains a lot of ES6 features - const, class, arrow functions. You should use an online transpiler like Babel.JS to make your code ES5-compatible.

Also, in your code, you're using a class before you define it. It's good practice to move all class definitions and arrow functions to the top of your code (normal ES5 functions are located before any code is evaluated). So your code should look like:

classSiemaWithDotsextendsSiema {...}

constmySiemaWithDots=newSiemaWithDots({...});